有时我们在html中,如果直接用表单的格式向服务器发送请求,这样会刷新整个web界面,用户的体验感不好,下面介绍如何使用js实现异步请求,可以只改变我们需要改变的界面
1、准备前端html代码
为了说明功能,我们准备最简单的例子
<form method="POST" enctype="multipart/form-data" id="testForm">
<label for="exampleFormControlFile1" style="font-size: 30px;">请选择文件</label>
<input type="text" name="input-text">
<input type="file" id="exampleFormControlFile" name="file" style="width: 200px;">
<button type="button" id="button-submit">确认</button>
</form>
2、JS代码
首先必须引入jquery的JS框架,可以直接使用CDN
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
在下面实现异步请求
<script>
("#button-submit").click(function(){
// 获取序列化的html表单数据
var data = new FormData(("#testForm")[0]);
$.ajax({
type:'post',
url:"/test", // 你请求的url 需要自己修改哦
cache: false, //上传文件不需缓存
processData: false, //需设置为false。因为data值是FormData对象,不需要对数据做处理
contentType: false, //需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
data:data, // 表单数据
dataType:'json',
success:function(data){
// 在这里可以做一些服务程序 ,
// 比如从服务器接收json格式数据 ,解析,操作html显示数据
alert("请求成功");
},
error:function(){
// 请求失败提示工作
alert("请求失败");
}
});
});
</script>
0