jQuery.form提交复杂表单

来源：互联网发布：kenzo男士香水知乎编辑：程序博客网时间：2024/04/30 03:35

页面表单代码如下：

<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代码：

$(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开发方法。

0 0