form表单的回调
背景:平时使用的form表单只能单方向提交,不能进行和ajax类似的回调,在这种背景下给大家介绍一下这种新的方法实现form表单的回调
用到的js脚本
应用:提交文件到服务器(form表单最简单),同时进行回调。
注,文件提交的代码没写,本案例目标是掌握form表单回调
本文档使用方法:
- 把文件放在phpstudy的WWW目录
- 浏览器访问
- 成功显示
jquery.form.js传送门:.form.js 点击网页另存为
jquery传送门:.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代码:
<?phpecho 1;?>
form表单的回调
背景:平时使用的form表单只能单方向提交,不能进行和ajax类似的回调,在这种背景下给大家介绍一下这种新的方法实现form表单的回调
用到的js脚本
应用:提交文件到服务器(form表单最简单),同时进行回调。
注,文件提交的代码没写,本案例目标是掌握form表单回调
本文档使用方法:
- 把文件放在phpstudy的WWW目录
- 浏览器访问
- 成功显示
jquery.form.js传送门:.form.js 点击网页另存为
jquery传送门:.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代码:
<?phpecho 1;?>