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

$.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);
}
});
publicclassItemInfoController:Controller
{
publicboolEditItem(ItemInfo item)
{
returntrue;
}
}
实验成功,很方便。
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式的更多相关文章
- C# 模拟提交 Form表单的数据
用 HttpWebRequest Post方法模拟提交Form表单数据时,需要设置 ContentType 为 "application/x-www-form-urlencoded" ...
- 3..jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...
- html基础:jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...
- jquery获取form表单中的数据
$(function() { $('#submit').click(function() { var d = {}; var t = $('form').serializeArray(); //t的值 ...
- form 转json,将form表单中的数据序列化数组后转换为Json
页面中引用了jquery,第一想到的就是序列化,但是序列化后的表单字段为a=1&b=2这种. 这里写一个jquery的扩展方法 $.fn.serializeObject = function( ...
- js 向form表单中插入数据
var newElement = document.createElement("input"); var nowtime=year+""+month+day+ ...
- 通过button将form表单的数据提交到action层
form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性". ...
- Button按钮为什么无缘无故会提交form表单?
我的form表单里有好几个Button按钮,每个按钮有不同的功能,可是这些按钮居然都有提交功能,真是把我惊呆了 <button class="btn btn-info " o ...
- Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...
随机推荐
- Laravel 模板引擎Blade中标签详细介绍
这篇文章主要介绍了Laravel模板引擎Blade中section的一些标签的区别介绍,需要的朋友可以来看看. Laravel 框架中的Blade模板引擎很好用,但是官方文档介绍的并不详细,我接下来将 ...
- Roads in the North(POJ 2631 DFS)
Description Building and maintaining roads among communities in the far North is an expensive busine ...
- MVC5学习相关资源整理
1 官方 Getting Started http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started 英文不好,英文好的同 ...
- Uubntu scrot 的简单使用
scrot 是一个使用 imlib2 库截取屏幕和保存图像的的工具. 1:安装 #apt-get install scrot 2:查看帮助 #scrot -help -v, --version显示版本 ...
- 大规模集群FTP代理(基于lvs的vsftpd网络负载均衡方案部署(PASV))
[目的] 在日常工作中,我们经常需要在某服务器上开FTP(Server)服务.但就是这么简单的事情通常也会变得很复杂,原因如下:1.需要开通FTP的服务器没有公网IP地址:(即不能直接访问到)2.这样 ...
- VS2008生成的程序无法在其它电脑上运行,提示系统无法执行指定的程序
经过一番查找,最给力的参考是 http://www.cnblogs.com/visoeclipse/archive/2010/02/27/1674866.html ------------------ ...
- Django的安装配置和开发
参考:<Django Web开发指南> Django的安装配置 1.https://www.djangoproject.com/download/下载Django-1.5.1.tar.gz ...
- hdu 4751 Divide Groups(dfs染色 或 2-sat)
Problem Description This year is the 60th anniversary of NJUST, and to make the celebration more c ...
- iOS 7 改变Status Bar 颜色
Set the UIViewControllerBasedStatusBarAppearance to NO in the Info.plist. In ViewDidLoad method or a ...
- Change the ball(找规律)
Change the ball Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...