jQuery异步提交表单的两种方式

深入理解jQuery异步提交表单的两种实用方式

在网页开发中，我们经常需要处理表单的异步提交，以提高用户体验。这里，我们将详细介绍两种常用的jQuery异步提交表单的方式，供感兴趣的小伙伴们参考。

方式一：普通ajax方式提交

当我们点击页面上的某个元素（比如ID为“send”的按钮）时，会触发一个点击事件。在这个事件的回调函数中，我们使用jQuery的$.ajax()方法进行异步提交。具体代码如下：

```javascript

$(function(){

$('send').click(function(){

$.ajax({

type: "GET", //提交方式

url: GLOBAL_PATH + "/Enterprise/savepanyphoto", //提交的URL

data: {username:$("username").val(), content:$("content").val()}, //要提交的数据

dataType: "json", //期望返回的数据类型

success: function(data){ //请求成功后的回调函数

$('resText').empty(); //清空resText里的内容

var html = '';

$.each(data, function(mentIndex, ment){

html += '

});

$('resText').html(html); //将返回的数据显示在页面上

}

});

});

});

```

方式二：普通ajaxSubmit方式提交表单

这种方式需要引入额外的插件，如jquery.form.js。具体代码如下：

```html

```

然后定义一个函数，比如叫uploader_img()，在这个函数里面进行表单的提交：

```javascript

function uploader_img(){

var optionsSave={

type: "POST", //提交方式

url: GLOBAL_PATH + "/Enterprise/savepanyphoto", //提交的URL

data:$('addImg').serialize(), //序列化表单数据

success: function (data) { //请求成功后的回调函数

if (data.code == 0) {

AlertMini('alt1', "上传图片成功!", 'success.gif', 2);

window.location.reload(); //页面刷新

} else {

AlertMini('alt1', "上传图片失败!", 'error.gif', 2);

}

},

error: function (data) {

AlertMini('alt1', "上传图片失败!", 'error.gif', 2); //请求失败时的回调

}

}

$('addImg').ajaxSubmit(optionsSave); //提交表单

}

```

以上就是两种jQuery异步提交表单的方式。希望对大家的学习有所帮助，同时也希望大家多多支持我们的博客。不论选择哪种方式，关键是要根据实际需求来选择最合适的技术方案。