jquery自动将form表单封装成json的具体实现

前端页面：


代码如下:

<span style="font-size:14px;"> <form action="" method="post" id="tf">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<th>
姓名：
</th>
<td>
<input type="text" id="txtUserName" name="model.UserName" />
</td>
<th>
联系手机：
</th>
<td>
<input type="text" name="model.Mobile" id="txtMobile" maxlength="11" />
</td>
<th>
密码：
</th>
<td>
<input type="password" name="model.Pwd" id="txtPwd" maxlength="11" />
</td>
</tr>
<tr>
<td style="text-align: center;" colspan="2">
<input type="button" value=" 提 交 " style="padding-top: 3px;" name="butsubmit"
id="butsubmit" />
</td>
</tr>
</table>
</form>
//提示到服务器
$(function () {
$("#butsubmit").click(function () {
var data = $("#tf").serializeArray(); //自动将form表单封装成json

// $.ajax({
// type: "Post", //访问WebService使用Post方式请求
// contentType: "application/json", //WebService 会返回Json类型
// url: "/home/ratearticle", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
// data: data, //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到
// dataType: 'json',
// success: function (result) { //回调函数，result，返回值
// alert(result.UserName + result.Mobile + result.Pwd);
// }
// });

$.post("/home/ratearticle", data, RateArticleSuccess, "json");
});
})

//结果显示

function RateArticleSuccess(result) {
alert(result.UserName + result.Mobile + result.Pwd);
}</span>

后端处理：


代码如下:

<span style="font-size:14px;">public JsonResult ratearticle(UserInfo model)
{
return Json(model);
}</span>

赞 (0)

相关推荐

  • jQuery把表单元素变为json对象

    复制代码 代码如下: (function($){  $.fn.serializeObject=function(){             var inputs=$(this).find("input,textarea,select");             var o = {};             $.each(inputs,function(i,n){                 switch(n.nodeName.toUpperCase()){          

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • jQuery实现form表单元素序列化为json对象的方法

    jQuery实现form表单元素序列化为json对象的方法

    本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

  • 原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

  • javascript表单域与json数据间的交互第1/3页

    包括对象中有集合属性.对象中引用其他对象属性: 复制代码 代码如下: /** **json对象数据设置到表单域中 */ function jsonObjectToForm(form, jsonObject){     for(i = 0, max = form.elements.length; i < max; i++) {         e = form.elements[i];         eName = e.name;         if(eName.indexOf('.') >

  • 将JavaScript的jQuery库中表单转化为JSON对象的方法

    大家知道Jquery中有serialize方法,可以将表单序列化为一个"&"连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现.   我在网上看到有人用替换的方法,先用serialize序列化后,将&替换成":"."'": /** * 重置form表单 * @param formId form的id */ function resetQuery(formId){ var fid = "#&qu

  • JS获取一个表单字段中多条数据并转化为json格式

    JS获取一个表单字段中多条数据并转化为json格式

    如图需要获取下面两个li标签里面的数据,然后传给后台:而后台接收的数据格式是json的,所以需要把两个li里面的信息转化为以下格式的. {recieverName:小红,recieverPhone:12341234,recieverAddress:中国湖南},{recieverName:小明,recieverPhone:12345678,recieverAddress:中国上海} 代码如下: var recieverArr = []; //全局变量 var recieverMsg = {}; /

  • jquery自动将form表单封装成json的具体实现

    前端页面: 复制代码 代码如下: <span style="font-size:14px;"> <form action="" method="post" id="tf"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr

  • form表单数据封装成json格式并提交给服务器的实现方法

    1.jsp代码,form表单: <form action="#" id="costForm"> <input type="hidden" id="userId" name="userId"/> <div id="COST"> <img src='<%=path %>/cvc/center/images/close.png' class

  • jQuery序列化form表单数据为JSON对象的实现方法

    jquery提供的serialize方法能够实现. $("#searchForm").serialize(); 但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串. serialize确实是能够解决一般的提交数据.但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象). 方法如下: (function(window, $) { $.fn.serializeJs

  • jQuery ajax提交Form表单实例(附demo源码)

    本文实例讲述了jQuery ajax提交Form表单的方法.分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form代码如下: <form id="Form1" action="action.aspx" method="post" > 名称:<input

  • jQuery实现获取form表单内容及绑定数据到form表单操作分析

    jQuery实现获取form表单内容及绑定数据到form表单操作分析

    本文实例讲述了jQuery实现获取form表单内容及绑定数据到form表单操作.分享给大家供大家参考,具体如下: 在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单: 获取表单的数据:$("#formid").serializeJson(); 绑定数据到表单:$("#formid").setForm(js

  • jQuery实现form表单序列化转换为json对象功能示例

    jQuery实现form表单序列化转换为json对象功能示例

    本文实例讲述了jQuery实现form表单序列化转换为json对象功能.分享给大家供大家参考,具体如下: 做web前端开发时,需要ajax提交大量表单数据,如果一个个form字段拼接很费劲也容易出错,下面方法可解决这个问题 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery form序列化转换为json对象</title> <

  • jQuery序列化后的表单值转换成Json

    小朋友有一个表单,他想以Json的方式获取到表单的内容.小朋友尝试了以下方式. 通过$("#form").serialize()可以获取到序列化的表单值字符串. 例如: a=1&b=2&c=3&d=4&e=5 通过$("#form").serializeArray()输出以数组形式序列化表单值. [ {name: 'firstname', value: 'Hello'}, {name: 'lastname', value: 'Worl

  • 基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap+jQuery.validate实现Form表单验证

    基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

  • jQuery动态设置form表单的enctype值(实现代码)

    代码简单, 注意2个地方enctype和encoding 复制代码 代码如下: $("#form").attr("enctype", "multipart/form-data");            $("#form").attr("encoding", "multipart/form-data");            $("#form").attr(&quo

随机推荐