jQuery基于ajax()使用serialize()提交form数据的方法

一、jQuery基于ajax()使用serialize()提交form数据的方法简介
在前端开发中，经常会使用ajax来进行异步数据交互，而form表单是我们平时常用的页面元素之一。当我们需要提交一个form表单数据的时候，可以使用jQuery框架下的ajax()方法来完成请求，同时配合使用serialize()方法来将form表单的数据序列化。这样，我们就可以通过ajax异步提交表单数据了。下面就详细介绍一下这个方法的实现步骤。

二、代码示例

1. HTML代码

<form id="myForm">
  <div>
    <label>用户名：</label>
    <input type="text" name="userName" />
  </div>
  <div>
    <label>密码：</label>
    <input type="password" name="password" />
  </div>
  <div>
    <button type="button" id="submitBtn">提交</button>
  </div>
</form>

1. JavaScript代码

$(function(){
  $('#submitBtn').click(function(){
    // 获取form的数据
    var formData = $('#myForm').serialize();
    // 发送ajax请求
    $.ajax({
      url: 'submit-url',
      type: 'post',
      data: formData,
      dataType: 'json',
      success: function(data){
        console.log(data);
      }
    });
  });
});

在这个例子中，我们首先通过jQuery选择器获取到页面上的form表单元素，然后在提交按钮点击事件中，调用serialize()方法将form数据序列化为字符串格式。接着，使用ajax()方法发送一个POST请求，将序列化后的数据传递到服务器端。最后，处理服务器返回的数据。

另外一个示例，更直观的展现了如何使用serialize()方法将表单数据序列化成json格式的字符串：

1. HTML代码

<form id="myForm">
  <div>
    <label>用户名：</label>
    <input type="text" name="userName" />
  </div>
  <div>
    <label>密码：</label>
    <input type="password" name="password" />
  </div>
  <div>
    <button type="button" id="submitBtn">提交</button>
  </div>
</form>

1. JavaScript代码

$(function(){
  $('#submitBtn').click(function(){
    // 获取form的数据
    var formData = JSON.stringify($('#myForm').serializeArray());
    // 发送ajax请求
    $.ajax({
      url: 'submit-url',
      type: 'post',
      data: formData,
      dataType: 'json',
      contentType: "application/json; charset=utf-8",
      success: function(data){
        console.log(data);
      }
    });
  });
});

在这个示例中，我们通过使用jQuery的serializeArray()方法将form表单数据转换成一个数组对象，然后调用JSON.stringify()方法将这个数组序列化成json格式的字符串。接着，将序列化后的数据传递到服务器端。需要注意的是，由于数据是以json格式提交的，因此需要设置contentType参数为“application/json; charset=utf-8”，才能正确地将数据传递给服务器端。最后，处理服务器返回的数据。