有时我们在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>