jQuery.form提交复杂表单

页面表单代码如下:

<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>
    &nbsp;&nbsp;&nbsp;
    单价:<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开发方法。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值