form表单的回调

最新推荐文章于 2022-03-17 16:37:24 发布

qq_37591315

最新推荐文章于 2022-03-17 16:37:24 发布

阅读量1.3w

点赞数 2

分类专栏：前端文章标签： form表单的回调

本文链接：https://blog.csdn.net/qq_37591315/article/details/87438881

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

背景：平时使用的form表单只能单方向提交，不能进行和ajax类似的回调，在这种背景下给大家介绍一下这种新的方法实现form表单的回调

用到的js脚本

应用：提交文件到服务器（form表单最简单），同时进行回调。

注，文件提交的代码没写，本案例目标是掌握form表单回调

本文档使用方法：

浏览器访问

成功显示

jquery.form.js传送门：http://malsup.github.io/jquery.form.js 点击网页另存为

jquery传送门：https://code.jquery.com/jquery-3.3.1.min.js

1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/jquery.form.js"></script>
</head>
<body>
    <form action="./server.php" id="form1" method="post"  enctype="multipart/form-data">
        <input type="file" id="file_sc" name="file" ><br/>
        提交人：<input type="text" id="name" name="name" ><br/>
            <input type="submit" id="tj" value="提交">
     </form>
<script>
 $("#form1").bind("submit", function(){  
	var file=$("#file_sc").val();
	if(file == ""){  
		alert("请选择文件！！！");
		return false;  
	}  
});
$(function(){
	/** 验证文件是否导入成功  */
	$("#form1").ajaxForm(function(data){  
		if(data=="1"){
			alert("提交成功！");   
		}
	});     
});
</script>
</body>
</html>

server.php代码：

<?php

echo 1;


?>

qq_37591315

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
form表单的回调

背景：平时使用的form表单只能单方向提交，不能进行和ajax类似的回调，在这种背景下给大家介绍一下这种新的方法实现form表单的回调用到的js脚本应用：提交文件到服务器（form表单最简单），同时进行回调。注，文件提交的代码没写，本案例目标是掌握form表单回调本文档使用方法：把文件放在phpstudy的WWW目录浏览器访问成功显示 ...
复制链接

扫一扫

专栏目录