代码之家 › 专栏 › 技术社区 › Adam Tuttle

jquery编码值与jquery.ajax数据元素的预期值不同

rest web-services jquery javascript

Adam Tuttle · 技术社区 · 14 年前

我正在使用jquery.ajax()向RESTWeb服务发出一个Put请求,但是看到了一些非常奇怪的序列化行为。

(在你说:是的,我知道不是所有的浏览器都支持Put——这只是一个API/框架的示例实现,最终不会由浏览器调用,而是由服务器端库调用做支持额外的HTTP谓词。)

这是表格:

<form action="/example/api/artist" method="put" id="update">
    First Name: <input type="text" name="firstname" /><br/>
    Last Name: <input type="text" name="lastname" /><br/>
    Address: <input type="text" name="address" /><br/>
    City: <input type="text" name="city" /><br/>
    State: <input type="text" name="state" /><br/>
    Postal Code: <input type="text" name="postalcode" /><br/>
    Email: <input type="text" name="email" /><br/>
    Phone: <input type="text" name="phone" /><br/>
    Fax: <input type="text" name="fax" /><br/>
    Password: <input type="text" name="thepassword" /><br/>
    <input type="hidden" name="debug" value="true" />
    <input type="submit" value="Update Artist" />
    <input type="reset" value="Cancel" id="updateCancel" />
</form>

JS:

$("#update").submit(function(e){
    e.preventDefault();
    var frm = $(this);
    $.ajax({
        url: frm.attr('action'),
        data:{
            firstname: $("#update input[name=firstname]").val(),
            lastname: $("#update input[name=lastname]").val(),
            address: $("#update input[name=address]").val(),
            city: $("#update input[name=city]").val(),
            state: $("#update input[name=state]").val(),
            postalcode: $("#update input[name=postalcode]").val(),
            email: $("#update input[name=email]").val(),
            phone: $("#update input[name=phone]").val(),
            fax: $("#update input[name=fax]").val(),
            thepassword: $("#update input[name=thepassword]").val()
        },
        type: frm.attr('method'),
        dataType: "json",
        contentType: "application/json",
        success: function (data, textStatus, xhr){
            console.log(data);
            reloadData();
        },
        error: function (xhr, textStatus, err){
            console.log(textStatus);
            console.log(err);
        }
    });
});

当使用Firebug时,我看到请求如下:

firstname=austin&lastname=weber&address=25463+main+street%2c+suite+c&city=berkeley&state=ca&postalcode=94707-4513&email=austin%40life.com&phone=555-513-4318&fax=510-513-4888&p;密码=nopolies

这并不可怕,但理想情况下我宁愿 %20 而不是 + 对于空间。我尝试将每个字段值查找包装在转义中:

firstname: escape($("#update input[name=firstname]").val())

但这让事情变得更糟:

firstname=austin&lastname=weber&address=25463%2520主要街道%2520街道%252C%2520套房%2520C&city=berkeley&state=ca&postalcode=94707-4513&email=austin%40life.com&phone=555-513-4318&fax=510-513-4888&p;密码=nopolies

在这种情况下,值将被转义两次;因此,首先将空间编码为 % 20 ,然后将%符号转义到 %25 导致 %2520 对于空间,以及 %252C 地址字段中的逗号。

我在这里做错什么了?

2 回复 | 直到 14 年前

Emil Vikström 14 年前

+ 是空格的正常转义字符,即使在rfc1738中没有定义它。因为历史原因,它一直被这样使用。这是个大问题吗?我认为很多客户机实现可能都在期待 + 工作也一样。

Dan Heberden 14 年前

您正在使用内置对象序列化。在这种情况下,自己动手:

data: "firstname=" + $("#update input[name=firstname]").val() + "&lastname=" // so on and so on

或者更好的是,让一个函数执行它

function mySerializer(obj) { // send this your {firstname: $(...)} pairs
   $.each(obj, function(i,v,) {  // etc, etc
  });
}