转载地址:http://blog.163.com/guohuanhuan_cool@126/blog/static/16761423820130222512427/
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式
jquery中的serialize() 方法该方法通过序列化表单值,创建 URL 编码文本字符串
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中
这样当表单中要提交的参数比较多时,就可以使用该方法进行提交,否则将在ajax中得代码会很长,有可能在编写时出错,也不方便检查
以下是自己写的测试代码
public class ItemInfo
{
public string PartNumber
{
get ;
set ;
}
public string Project
{
get ;
set ;
}
public string Family
{
get ;
set ;
}
public decimal Unit_Price
{
get ;
set ;
}
public int ? Component_Qty
{
get ;
set ;
}
public string Active
{
get ;
set ;
}
public string HaveChild
{
get ;
set ;
}
public DateTime Effective_Date
{
get ;
set ;
}
public DateTime Expire_Date
{
get ;
set ;
}
public string Maintained_By
{
get ;
set ;
}
}
Html代码:
<form id="fm" method="post" novalidate>
<div class="fitem">
<label>PartNumber:</label>
<input name="PartNumber" class="easyui-validatebox" required="true" >
</div>
<div class="fitem">
<label>Project:</label>
<input id="projectID" name="Project" class="easyui-combobox" />
</div>
<div class="fitem">
<label>Family:</label>
<input name="Family"/>
</div>
<div class="fitem">
<label>Unit_Price:</label>
<input name="Unit_Price" data-options="min:0.0,precision:6"/ >
</div>
<div class="fitem">
<label>Component_Qty:</label>
<input name="Component_Qty" data-options="min:0,precision:0" />
</div>
<div class="fitem">
<label>Active:</label>
<input type="checkbox" name="Active" />
</div>
<div class="fitem">
<label>HaveChild:</label>
<input type="checkbox" name="HaveChild" />
</div>
<div class="fitem">
<label>Effective_Date:</label>
<input id="EFF_Date" name="Effective_Date" />
</div>
<div class="fitem">
<label>Expire_Date:</label>
<input id="EX_Date" name="Expire_Date" />
</div>
<div class="fitem">
<label>Maintained_By:</label>
<input name="Maintained_By" readonly/>
</div>
</form>
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);
}
});
public class ItemInfoController : Controller
{
public bool EditItem(ItemInfo item)
{return true;
}
}
//OK