jquery用ajax提交表单

jquery ajax三种方式异步提交表单

一、使用Html5 FormData对象的方式ajax异步提交数据和文件：

注意代码Jquery ajax的必须传参数processData: false，contentType: false，否则会报错：

<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<form class="ajax_form">
  <input type="text" name="str" value="aiezu.com" />
  <input type="text" name="num" value="123456" />
  <input type="file" name="image"  />
  <button type="button" class="btn_submit">提交</button>
</form>
<script>
  $(function() {
    $(".btn_submit").on('click', function() {
      var data = new FormData($(".ajax_form")[0]);
      $.ajax({
        type: 'POST',
        dataType: 'json',
        processData: false, // 告诉jquery不要处理数据
        contentType: false, // 告诉jquery不要设置contentType
        data: data,
        url: '/test_form.php',
        success: function(json, textStatus, xhr) {
          //.....省略...
        },
        error: function(xhr, textStatus, errorThrown) {}
      })
    })
  })
</script>

优点：简单好用，能直接ajax异步提交数据和文件；
缺点：部分浏览器支持不够好，如IE 10一下版本不支持；

二、使用jquery serialize()函数构建数据或者手动构建数据对象方式：

本方式建议在只异步提交基本数据，不需要异步上传文件的情况下使用：

<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<form class="ajax_form">
  <input type="text" name="str" value="aiezu.com" />
  <input type="text" name="num" value="123456" />
  <input type="file" name="image"  />
  <button type="button" class="btn_submit">提交</button>
</form>
<script>
  $(function() {
    $(".btn_submit").on('click', function() {
      var data = $(".ajax_form").serialize(); // str=aiezu.com&num=123456
      //或者
      var data = {str:$('[name="str"]').val(), num:$('[name="num"]').val()};
      $.ajax({
        type: 'POST',
        dataType: 'json',
        data: data,
        url: '/test_form.php',
        success: function(json, textStatus, xhr) {
          //.....省略...
        },
        error: function(xhr, textStatus, errorThrown) {}
      })
    })
  })
</script>

优点：简单好用，几乎兼容所有浏览器；
缺点：无法ajax异步上传文件，只能异步提交基本数据；
　
三、使用jquery from插件来ajax异步提交数据和文件：

<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<form class="ajax_form">
  <input type="text" name="str" value="aiezu.com" />
  <input type="text" name="num" value="123456" />
  <input type="file" name="image" />
  <button type="button" class="btn_submit">提交</button>
</form>
<script>
  $(function() {
    $(".btn_submit").on('click', function() {
      var params = {
        type: 'POST',
        dataType: 'text',
        url: '/test_form.php',
        success: function(text, textStatus, xhr) {
          var json = eval(json);
        },
        error: function(xhr, textStatus, errorThrown) {
        }
      }

      $(".ajax_form").ajaxSubmit(params);
    })
  })
</script>

优点：自动判断浏览器是否支持html5 FormData，支持直接使用FormData提交，不支持时会使用iframe方式伪装ajax 异步提交；
缺点：IE低版本响应类型只能是html、xml，否则会提示下载文件。