JQuery异步post上传表单数据标准化模板

JQuery异步post上传表单数据标准化模板是一种常用的前端技术。本攻略将详细讲解此过程，并提供两条示例说明。具体步骤如下：

一、设置请求 url 和 data

请求 url 可以指向一个后台处理请求的页面。
data 是现有表单的序列化数据和其他要提交的数据的对象。对象的主要属性应与表单中的输入字段的“name”属性匹配。

二、设置异步ajax请求

设置请求类型为POST，使用ajax异步提交数据。

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: url,
    data: data,
    async: true,
    success: function (data) {
    //成功后的回调操作
    },
    error: function (data) {
    //失败后的回调操作
    }
 });

其中，dataType 为预期返回的数据类型，可以为 text、xml、json 等。成功和失败后都会有回调函数。url 是请求地址，data 是需要提交的数据。

三、设置回调函数

成功时候， success 返回这个ajax请求成功之后的回调函数，可以获取后台返回数据，然后根据返回数据进行不同的处理。

success: function(data){
    if(data.code===0){
        alert("提交成功！");
    }else if(data.code === 1){
        alert("提交失败！");
    }
 }

失败时候， error 返回这个ajax请求失败之后的回调函数，可以获取后台返回的失败原因，然后根据失败原因进行不同的处理。

error: function(xhr, status, error){
    alert('Error: ' + error.message);
 }

四、示例

示例1:

<!--HTML-->
<form id="form" method="post" enctype="multipart/form-data">
    <input type="text" name="username" value=""/>
    <input type="file" name="file" id="file" value=""/>
    <button type="submit">提交</button>
</form>

<!--JS模板-->
var url = "后台处理接口地址";
var data = new FormData($("#form")[0]);
data.append("remark", "DIY");
$.ajax({
    type: 'POST',
    dataType: 'json',
    url: url,
    data: data,
    async: true,
    contentType: false,
    processData: false,
    success: function (data) {
        //提交成功后的回调操作
    },
    error: function (xhr, status, error) {
        //提交失败后的回调操作
    }
});

示例2:

//HTML
<form action="#" id="myform" enctype="multipart/form-data">
    <input type="text" id="name" name="name">
    <input type="text" id="email" name="email">
    <input type="submit" name="submit" value="Submit">
</form>

//JS模板
$("#myform").submit(function(e) {   
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url : formURL,
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR) 
        {
            //提交成功后的回调操作
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
           //提交失败后的回调操作
        }
    });
    e.preventDefault(); //阻止默认提交行为
});

以上就是JQuery异步post上传表单数据标准化模板的详细攻略，包含两条示例说明，希望对您有所帮助。