Form表单提交详解(4)

以Ajax方式提交部分表单

在前面的示例中，我们看到以Ajax方式提交一个表单是非常容易的，它完全模拟了浏览器的行为。不过，有时我们可能需要只提交表单的一部分，为的是更好的局部更新，那么又该如何做呢？
假如我有以下表单的一部分，我只希望在用户某个按钮时将它提交到服务端：

 
<div id="divCustomerInfo">

    <p>客户名称: <input type="text" name="CustomerName" style="width: 300px" /></p>
    
    <p>客户电话: <input type="text" name="CustomerTel" style="width: 300px" /></p>
    
</div>

我们可以这样来提交这部分表单的数据：

 
$("#btnId").click(function(){

    $.ajax({
        url: "Handler1.ashx", type: "POST",
        data: $('#divCustomerInfo :text').fieldSerialize(),
        success: function(responseText){
        
            alert(responseText);
        }
    });
    
    return false;
});

注意关键的代码行：data: $(‘#divCustomerInfo :text’).fieldSerialize()
注意：此时将由您指定一个【JQuery选择器】来过滤要提交的控件，而不是使用成功控件的筛选逻辑。或者，您也可以使用下面将要介绍的方法，仍然是使用 data: {} 的方式，但需要手工指定数据成员。

使用JQuery，就不要再拼URL了！

JQuery越来越流行，以至于在创建MVC项目时，VS IDE会把JQuery也准备好了，可能MS认为开发WEB项目离不开JQuery了。
的确，JQuery非常方便，尤其是在处理DOM时，不仅如此，在处理AJAX请求时，也非常方便。
不过，有件事却让我很纳闷：经常看到有人在使用JQuery实现Ajax时，把一堆参数放在URL中传递，当然了，发送GET请求嘛，这样做不错，但是，让我不解的是：URL是拼接起来的，而且代码又臭又长！
如果是一个简单的参数：”aaa.aspx?id=” + xxId ，这样也就罢了。但是当一堆参数拼接在一起时，可能一下子还看不清楚到底有几个什么样的参数。而且经验丰富一些的开发人员会发现这样做有时会有乱码问题，可能网上搜过后，知道还有编码的工作要处理，于是又加了一堆编码方法。到此为止，这段代码会让人看起来很累！

如果您平时也是这样做的，那么我今天就告诉您：不要再拼接URL了！ $.ajax()的参数不是有个data成员嘛，用它吧。看代码：

 
$.ajax({
    url: "Handler1.ashx", type: "POST",
    data: { id: 2, name: "aaa", tel: "~!@#$%^&*()_+-=<>?|", xxxx: "要多少还可以写多少", encoding: "见鬼去吧。?& :)" },
    success: function(responseText) {
    
        $("#divResult").html(responseText);
    }
});

你说什么，只能使用GET ？ 哦，那就改一下 type 参数吧。

 
$.ajax({
    url: "Handler1.ashx", type: "GET",
    data: { id: 2, name: "aaa", tel: "~!@#$%^&*()_+-=<>?|", xxxx: "要多少还可以写多少", encoding: "见鬼去吧。?& :)" },
    success: function(responseText) {
    
        $("#divResult").html(responseText);
    }
});

看了这个示例，您还会继续拼URL吗？
说明：为了排版简单，我将参数放在一行了，建议实际使用时，不要挤在一行。

id, name 有什么关系

通常我们在写HTML代码时，会给控件指定一个id属性，这个属性只供JS和CSS使用，在表单提交时，它不起任何作用。
在上面的示例代码中，可能data {}中的各个value就来源于各个不同的控件，那么为那些控件指定相应的id属性将会方便地找到它们。
但是如果不需要用JS和CSS控制的控件，或许它们只是用来显示一些数据(只读)，那么就没有必要指定id属性，当然了，name属性也可以不用给出(避免提交无意义的数据)。
–END

摘自：f​o​r​m​表​单​提​交​过​程

赏

谢谢打赏

支付宝