jquery实现无刷新提交表单

使用ajax

设置一个表单，如：

<form id="myForm">

  <input type="text" value="" name="username">

  <input type="password" value="" name="password">

</form>

监听.submit事件，可以在触发表单提交时的事件，通过return false或者event.preventDefault()来阻止默认的表单提交事件

即：

$("#myForm").submit(function(e){

    //一般使用return fasle来阻止表提交和刷新页面的事件

   //可以通过.serialize()获取和将表单里面的数据格式化为key=value&key=value的形式

  // 或者是使用. serializeArray()将表单里面的数据格式化为数组格式即会变成[{name:"inpue的name",value:"input的value"}]

 //可以自己封装不同的js函数来将表单数据转化成json格式

 var data = $(this).serialzeJson();

 $.ajax({});//通过ajax来提交表单

 return false;//阻止默认的表单提交事件

});

//通过jquery的插件扩展方式将表单数据序列化为json格式

$.fn.serialzeJson = function(){

      var  o  = {};    

   var  a  =  this .serializeArray();    

   $.each(a, function() {    

       if (o[this.name]) { //如果已经存在该键值对的input,将其余相同name的input的value的值放在同一个key下，为该key的value值设置为一个数组   

           if (!o[this.name].push) {    

               o[this.name] = [o[this.name]];    

           }    

           o[this.name].push(this.value || '');    

       } else {    

           o[this.name] = this.value || '';    

       }    

   });    

   return o; 

}