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:

提交



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) {
    //提交失败后的回调操作
}
});

//HTML






//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上传表单数据标准化模板相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用,就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！