AJAX技术是实现页面无刷新异步更新的重要方式，它可以在不刷新整个页面的情况下，实现部分页面的数据更新。同时，在表单提交方面，ajax也提供了方便快捷的方式。
本文将介绍如何使用ajax提交form表单，并且提交json数组。
$(document).ready(function(){
// 获取form表单
var $form = $('#example-form');
// 监听表单提交事件
$form .on('submit',function(event){
// 阻止默认表单提交事件
event.preventDefault();
// 表单序列化为json数组
var formData = $form.serializeArray();
var formDataObject = {};
$(formData).each(function(index,obj){
formDataObject[obj.name] = obj.value;
});
// ajax发送请求
$.ajax({
type: "POST",url: "/example.PHP",data: JSON.stringify(formDataObject),contentType: "application/json; charset=utf-8",dataType: "json",success: function(data){
console.log(data);
},error: function(XMLHttpRequest,textStatus,errorThrown){
console.log(XMLHttpRequest.responseText);
}
});
});
});
以上代码中，首先获取表单对象，然后监听表单提交事件，并阻止表单默认提交事件。接着，使用jquery的serializeArray()方法将表单序列化为数组。然后，使用each()方法遍历数组，将表单数据转为json对象。使用ajax发送post请求，将json对象转化为json字符串作为请求体，设置contentType为"application/json; charset=utf-8"。最后，成功和失败都分别用console.log()进行输出。
AJAX提交表单可以提供更好的用户体验，同时实现更多的功能，如当一个input框校验失败的时候，不需要刷新页面，只需要局部更新提示信息。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
