您的位置:首页 > Web前端 > JQuery

jQuery.form提交复杂表单

2015-11-11 17:11 871 查看
页面表单代码如下:

<form id="form1" action="/AjaxDemo/AddProduct.cspx" method="post">
<p><b>商品基本资源录入</b></p>
<table style="border: 0px">
<tr><td>商品分类:</td><td><select name="CategoryId" style="width: 300px">
<option value="1" selected="selected">手机</option><option value="2">计算机</option>
<option value="3">衣服</option><option value="4">生活用品</option>
</select></td></tr>
<tr><td>商品名称:</td><td><input type="text" name="ProductName" style="width: 300px" value="" /></td></tr>
<tr><td>库存单位:</td><td><select name="Unit" style="width: 100px">
<option value="个" selected="selected">个</option><option value="双">双</option>
<option value="箱">箱</option><option value="只">只</option>
</select>
   
单价:<input type="text" name="Price" style="width: 120px" value="123.45" />
</td></tr>
<tr><td>销售方式:</td><td>
<label><input type="radio" name="SaleMode" value="0" checked="checked" />零售</label>
<label><input type="radio" name="SaleMode" value="1" />批发</label>
</td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>

<tr><td>可选颜色:</td><td>
<label><input type="checkbox" name="Colors" value="Red" checked="checked" />红色</label>
<label><input type="checkbox" name="Colors" value="Green" />绿色</label>
<label><input type="checkbox" name="Colors" value="Blue" checked="checked" />蓝色</label>
<label><input type="checkbox" name="Colors" value="White" />白色</label>
<label><input type="checkbox" name="Colors" value="Black" />黑色</label>
</td></tr>
<tr><td>备注信息:</td><td>
<textarea name="Remark" cols="20" rows="50" style="width: 300px; height: 50px">http://www.cnblogs.com/fish-li</textarea>
</td></tr>
</table>
<br />
<input type="submit" name="submit" value="提交" />

</form>

JavaScript代码:

<script type="text/javascript">
$(function(){
$("#form1").ajaxForm({
beforeSubmit:ValidateForm,
success:function(result){
$("#output").val(result);
}
});
function ValidateForm(formData,jqForm,options){
if(jqForm.context.ProductName.value.length==0){
alert("商品名称不可空");
$(jqForm.context.ProductName).focus();
return false;

}
return true;
}

});
</script>
服务端代码:
public string AddProduct(Product product)
{//简单地返回一个xml字符串,
//告诉客户端:服务端收到了什么样的数据
return XmlHelper.XmlSerialize(product,Encoding.UTF-8);

}

不管表单是什么样的,永远只需要一个调用。
而且它将jQuery的调用过程也做了非常好的封装,所以我认为这是最容易使用的AJAX开发方法。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ajax