Question

请考虑以下HTML：

<input type='text' id='name'/>
<option id='option'>
  <select value='1'>hi</select>
  <select value='2'>bye</select>
</option>
<input type='text' id='date'/>

这是一个非常简单的表单，用于从用户获取搜索条件。我需要通过AJAX调用将此搜索条件提交给服务器。用于执行此操作的最佳数据类型/结构是什么？ 为什么？

我正在考虑使用字符串与JSON对象。所以，我要么通过

"John|2|2010-10-10"

到服务器或我将传递

{"name":"John","option":2,"date":"2010-10-10"}

也许还有一些其他创造性的方式来处理搜索条件？这个标准只被发送到服务器一次，它没有回到JS。

Answer 1

Google使用查询字符串，相当于：

search?name=John&option=2&date=2010-10-10

这有一些优点：

搜索可以加入书签或通过电子邮件发送为链接
适当的搜索是GET请求而不是POST，因为它不会更改服务器上的状态
它为您提供了一个简单的“穷人的API”，可以非常简单地生成执行特定搜索的请求

缺点：

您必须对所有内容进行网址编码
搜索字符串在日志等中存档

那就是说，如果你在你给出的选项之间做出选择，我会选择JSON：它会更长一些，但我认为它会为你明确命名参数（而不是依赖于位置内的位置）带来很多麻烦一个字符串）。

Answer 2

如果您将HTML包装在<form>标记中，则可以在jQuery中轻松使用$.serializeArray()函数。

http://api.jquery.com/serializeArray/

$.serializeArray()以以下形式创建JavaScript对象文字：

[ {name: a, value:1}, {name: b, value: 2}, ...]

我相信这是完成的，因为您的表单可能有多个具有相同名称的字段。关联数组不支持此功能。

我建议您以JSON格式（使用serializeArray或其他方法）而不是普通字符串将数据发送到服务器。 JSON更加标准化，可以处理转义字符。如果您使用管道分隔的字符串，那么当用户想要向服务器提交管道（|）时，您必须考虑到这一点。然后你会遇到价值之间有||**等疯狂分隔符的情况。（我见过这个 - 它太丑了！）。坚持使用JSON。

如果您更喜欢可以包含在请求正文中的更类似查询字符串的格式（例如a = 1＆amp; b = 2＆amp; c = 3），则可以使用$.serialize()。

http://api.jquery.com/serialize/

Answer 3

使用jQuery表单插件

http://jquery.malsup.com/form/

Answer 4

最好创建一个自己的数据结构来传输数据。您可以按照您需要的方式100％设计格式，因此它的体积小，速度快，效率高。

第二个最佳选择是JSON，它已经非常轻巧和快速。但同样，没有任何格式可以击败你自己。

这种下降趋势很明显，它不兼容也不便携。所以你必须考虑到这一点。

使用AJAX向服务器提交搜索条件的最佳方式？

4 个答案: