今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 
jquery中的serialize() 方法 
该方法通过序列化表单值,创建 URL 编码文本字符串 
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中 
这样当表单中要提交的参数比较多时,就可以使用该方法进行提交,否则将在ajax中得代码会很长,有可能在编写时出错,也不方便检查 
以下是自己写的测试代码

 ItemInfo类:

publicclassItemInfo
{
publicstringPartNumber
{
get;
set;
}
publicstringProject
{
get;
set;
}
publicstringFamily
{
get;
set;
}
publicdecimalUnit_Price
{
get;
set;
}
publicint?Component_Qty
{
get;
set;
}
publicstringActive
{
get;
set;
}
publicstringHaveChild
{
get;
set;
}
publicDateTimeEffective_Date
{
get;
set;
}
publicDateTimeExpire_Date
{
get;
set;
}
publicstringMaintained_By
{
get;
set;
}
}

Html代码:

<formid="fm"method="post"novalidate>
<divclass="fitem">
<label>PartNumber:</label>
<inputname="PartNumber"class="easyui-validatebox"required="true">
</div>
<divclass="fitem">
<label>Project:</label>
<inputid="projectID"name="Project"class="easyui-combobox"/>
</div>
<divclass="fitem">
<label>Family:</label>
<inputname="Family"/>
</div>
<divclass="fitem">
<label>Unit_Price:</label>
<inputname="Unit_Price"data-options="min:0.0,precision:6"/>
</div>
<divclass="fitem">
<label>Component_Qty:</label>
<inputname="Component_Qty"data-options="min:0,precision:0"/>
</div>
<divclass="fitem">
<label>Active:</label>
<inputtype="checkbox"name="Active"/>
</div>
<divclass="fitem">
<label>HaveChild:</label>
<inputtype="checkbox"name="HaveChild"/>
</div>
<divclass="fitem">
<label>Effective_Date:</label>
<inputid="EFF_Date"name="Effective_Date"/>
</div>
<divclass="fitem">
<label>Expire_Date:</label>
<inputid="EX_Date"name="Expire_Date"/>
</div>
<divclass="fitem">
<label>Maintained_By:</label>
<inputname="Maintained_By"readonly/>
</div>
</form>

Form表单中的Name属性是必须和ItemInfo类属性的字段名称一致才可以,这一点十分重要。

Jquery代码  

$.ajax({
type:"post",
url:'/ItemInfo/EditItem',//对应于controllerName/ActionName
timeout:3000,
data: $("#fm").serialize(),// { PartNumber: '22', Project: 'Project', Family: 'Chord' },
error:function(){ alert('Failed!');},
success:function(data, textStatus){
$('#Planner_ItemInfo').datagrid('loadData', data);
}
});

蓝色部分的data经Json数据处理后对应的字段全部是ItemInfo类中属性的,这样MVC会根据ItemInfo类的属性字符串(如Project字段)去Form表单中获取对应的取值,从而实现类数据的取值。
 
MVC后台代码:

  publicclassItemInfoController:Controller

    {

publicboolEditItem(ItemInfo item)

{
returntrue;
}

}

实验成功,很方便。

今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式的更多相关文章

  1. C# 模拟提交 Form表单的数据

    用 HttpWebRequest Post方法模拟提交Form表单数据时,需要设置 ContentType 为 "application/x-www-form-urlencoded" ...

  2. 3..jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

  3. html基础:jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

  4. jquery获取form表单中的数据

    $(function() { $('#submit').click(function() { var d = {}; var t = $('form').serializeArray(); //t的值 ...

  5. form 转json,将form表单中的数据序列化数组后转换为Json

    页面中引用了jquery,第一想到的就是序列化,但是序列化后的表单字段为a=1&b=2这种. 这里写一个jquery的扩展方法 $.fn.serializeObject = function( ...

  6. js 向form表单中插入数据

    var newElement = document.createElement("input"); var nowtime=year+""+month+day+ ...

  7. 通过button将form表单的数据提交到action层

    form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性". ...

  8. Button按钮为什么无缘无故会提交form表单?

    我的form表单里有好几个Button按钮,每个按钮有不同的功能,可是这些按钮居然都有提交功能,真是把我惊呆了 <button class="btn btn-info " o ...

  9. Jquery通过Ajax方式来提交Form表单

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

随机推荐

  1. 加速ssh连接

    今天aws大姨妈了,也不知道是aws问题还是gfw的问题,反正我都已经问候了你们zzsbd!!! ping aws的丢包都是75%以上,这还玩个雕啊,果断去找加速的教程来看,但是发现cygwin下并没 ...

  2. jQuery.data的是jQuery的数据缓存系统

    jQuery.Data源码 jQuery.data的是jQuery的数据缓存系统 jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储 ...

  3. python----特性003

    python特性003:计算特性 #!/usr/local/bin/python3.5 class MyNumber(object): def __init__(self,number): self. ...

  4. 使用 asp.net Web API 2的坑

    使用工具: Googl  浏览器+PostMan 插件 写了个  控制器 添加了个Action,结果呢?GET 方式请求没问题. POST一直,在服务器端获取不了参数...找了官方的文档 .各种雨里雾 ...

  5. python手记(44)

    #!/usr/bin/env python # -*- coding: utf-8 -*- #http://blog.csdn.net/myhaspl #code:myhaspl@qq.com imp ...

  6. 转化率最高的16个WordPress 电子商务主题

    想自己开一个WordPress的电子商务商店?下面我们分享转化率最高的16个WordPress 电子商务主题,它们拥有最棒的用户体验,集成最新的用户体验,慢慢欣赏吧! 原文地址:http://thet ...

  7. HBase 4、Phoenix安装和Squirrel安装

    描述 现有hbase的查询工具有很多如:Hive,Tez,Impala,Shark/Spark,Phoenix等.今天主要记录Phoenix. phoenix,中文译为“凤凰”,很美的名字.Phoen ...

  8. Unity 读取Excel

    游戏有大多数配置文件,比如玩家等级,游戏商店信息等等.通常情况下把这些放入excel中来读取 第一种解决方案: xlsx –> csv –> 改变成UTF-8 或者Unicode编码 –& ...

  9. Redux中的重要概念

    Action/Reducer/Store 首先,先看看第一张图,图中展示了Redux的单向数据流,以及Action.Reducer和Store这三个核心概念. 下面就围绕上图,非别介绍Action.R ...

  10. 【数学三角恒等变幻】【HDU2552】三足鼎立

    Problem Description MCA山中人才辈出,洞悉外界战火纷纷,山中各路豪杰决定出山拯救百姓于水火,曾以题数扫全场的威士忌,曾经高数九十九的天外来客,曾以一剑铸十年的亦纷菲,歃血为盟,盘 ...