夏日博客

A-A+

jquery把form表单保存成对象传给接口

2016年01月11日 前端设计 暂无评论 阅读 6 views 次

如果你使用了jquery我们有许多方法可以把表单变成对话或序列化了，下面一起来看一些关于jquery把form表单保存成对象传给接口的例子。

在模板式开发时，我们form表单可以直接提交到服务器相应的方法，服务器就可以进行处理，但在新的移动端，用的比较多的是以json数据格式的传输，和服务器端的接口交互，这样我们需要把传统的form表单元素组合成我们想要的对象，再传输给接口。

下面是个例子:

  1. <form action="" id="form" method="post">  
  2.  <input type="hidden" name="id" value="12" />  
  3.  <input type="date" name="startTime" id="startTime" value="" />  
  4.  <input type="date" name="endTime" id="endTime" value="" />  
  5.  <input type="button" name="" id="btn" value="提交" />  
  6. </form>  

JS：

  1. $("#btn").on('click',function () {  
  2.     var data = $("#form").serializeArray(); //先进行序列化数组操作  
  3.     var postData = {};  //创建一个对象  
  4.     $.each(data, function(n,v) {      
  5.         postData[data[n].name]=data[n].value;  //循环数组，把数组的每一项都添加到对象中  
  6.     });  
  7.     console.log(postData);  //{"id":12,"startTime":"2015-06-12","endTime":"2015-06-15"}  
  8. })  

除了此方法还有像:

  1. $('#form').click(function(){   
  2.  var postData = $('#submitform').serialize();  
  3.  $.ajax({  
  4.   type: "POST",  
  5.   url: "/tugou/postajax.php",  
  6.   data: postData,  
  7.   success: function(msg){  
  8.    alert(msg);     
  9.   }  
  10.  });  
  11. })  
标签：

给我留言