今天在研究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. Bulk-Only传输协议 UFI命令块规范

    USB设备分为5大类,即显示器.通信设备.音频设备.人机输入和海量存储.通常所用的U盘.移动硬盘均属于海量存储类.海量存储类的规范中包括4个独立的子规范,即CBI传输.Bulk-Only传输.ATA命 ...

  2. Eclipse IDE for Java EE Developers使用和新建工程helloworld

    开发j2ee还是用专门的java ee eclipse,自带了许多开发j2ee的插件,包括: This package includes: Data Tools Platform Eclipse Gi ...

  3. HTTP协议及HTTP包

    HTTP协议用于在Internet上发送和接收消息.HTTP协议是一种请求-应答式的协议 ——客户端发送一个请求,服务器返回该请求的应答,所有的请求与应答都是HTTP包.HTTP协议使用可靠的TCP连 ...

  4. 【转】在Eclipse中安装和使用TFS插件

    文章地址:http://www.cnblogs.com/judastree/archive/2012/09/05/2672640.html 问题: 在Eclipse中安装和使用TFS插件. 解决过程: ...

  5. PKU 1050-To The Max(找矩形内元素最大和)

    Given a two-dimensional array of positive and negative integers, a sub-rectangle is any contiguous s ...

  6. ※数据结构※→☆非线性结构(tree)☆============二叉树 顺序存储结构(tree binary sequence)(十九)

    二叉树 在计算机科学中,二叉树是每个结点最多有两个子树的有序树.通常子树的根被称作“左子树”(left subtree)和“右子树”(right subtree).二叉树常被用作二叉查找树和二叉堆或是 ...

  7. jquery 绑定动态元素

    以一个小例子来简单说明下情况 ? 1 2 3 4 5 6 7 8  <script src="jquery-1.11.0.min.js"></script> ...

  8. android面试题集1

    Android 面试题(有详细答案) 附带答案,共100分 一.选择题(30题,每题1.5分,共45分) 1.java.io包中定义了多个流类型来实现输入和输出功能,可以从不同的角度对其进行分类,按功 ...

  9. Linux下的压缩zip,解压缩unzip命令具体解释及实例

    实例:压缩server上当前文件夹的内容为xxx.zip文件 zip -r xxx.zip ./* 解压zip文件到当前文件夹 unzip filename.zip ================= ...

  10. windows 下使clion支持c++11操作记录

    最近用上了windows下的clion,发现默认安装的MINGW版本太低,导致所带的gcc版本竟然是3.5的,实在太老了,不支持c++11,于是手动修改了mingw的版本.首先去mingw的官网下载最 ...