ajax提交form表单数据json数据

在Web开发中，表单的提交是非常常见的操作。当我们需要提交form表单数据的时候，一般会使用Ajax技术，以此避免页面跳转刷新，提升用户体验。

在使用Ajax提交form表单数据时，我们可以将表单数据转成JSON数据，使用POST方式发送到服务器。以下是一个示例代码：

$(document).ready(function(){
  $('form').submit(function(event){
    //取消表单的默认提交行为
    event.preventDefault();
    
    //获取表单数据
    var formData = $(this).serializeArray();
    
    //转换成JSON数据
    var jsonData = {};
    jQuery.each(formData,function() {
      jsonData[this.name] = this.value;
    });
    
    //使用Ajax提交JSON数据
    $.ajax({
      type: 'POST',url: 'submit.PHP',data: JSON.stringify(jsonData),dataType: 'json',success: function(response){
        console.log(response);
      },error: function(xhr,textStatus,errorThrown){
        console.log('Error: ' + errorThrown);
      }
    });
  });
}); 

在上面的示例代码中，我们使用jQuery的serializeArray方法获取form表单中的数据，然后使用each方法遍历数据，将其转成JSON格式。使用Ajax发送数据时，需要将JSON数据使用stringify方法转成字符串，然后指定dataType为json，这样服务器返回的数据就可以直接使用JSON对象了。

总之，在Web开发中，Ajax技术已经成为不可或缺的一部分。使用Ajax提交form表单数据可以有效提升用户体验和页面效率，同时也可以避免页面刷新等不必要的操作。如果您想学习更多Ajax相关技术，建议多多掌握jQuery等流行前端框架。