Question

我在表单中有一个字段供用户输入地址。在他们输入地址后，将其与jQuery.ajax一起发送到远程API以进行验证并解析为各个字段。结果是一个jsonp对象，我操纵它来提取我需要的字段。

我的目标是将地址包含多个部分，以便可以与表单中的其他字段一起处理。到目前为止，我能想出的唯一方法是添加填充了正确值的隐藏字段。这感觉有点笨拙，所以我想知道是否有更好的方法来实现它。

目前，用户在一行中输入地址，类似于：

<form method="POST" id="myForm">
  <input type="text" id ="address>
  <div class="recipients"></div>
  <input type="submit">
</form>

当聚焦地址字段时会触发ajax，并且在成功返回jsonp对象时，将提取必要的字段，然后将其插入到表单中：

success: function(data) {
    var results = data.results[0];
    var address1 = results.Address1;
    var address2 = results.Address2;
    var city     = results.Locality;
    var state    = results.AdministrativeArea;
    var zip      = results.PostalCode;
    var addLines = "<input type='hidden' name='address1' value='"+address1+"'>";
    addLines += "<input type='hidden' name='address2' value='"+address2+"'>";
    addLines += "<input type='hidden' name='state' value='"+state+"'>";
    addLines += "<input type='hidden' name='city' value='"+city+"'>";
    addLines += "<input type='hidden' name='zip' value='"+zip+"'>";
    $(".recipients").append($(addLines));
    }

是否有更优雅的方式将返回的数据包含在POST中？谢谢你的帮助！

Answer 1

首先，请注意不要将这些隐藏字段与当前代码重复。在focusout上每次成功调用AJAX时都会调用它，如果用户切换焦点几次，你可以获得很多这些调用。

也就是说，如果您想像现在这样单独调用将所有干净数据发送到API，我会说您采取了正确的方法。您应该只在静态html中包含隐藏字段，而不是因为上面提到的原因而在AJAX响应上创建新字段。现在，您只需更新AJAX响应中input的值即可。快速举例：

var addLines = "<input type='hidden' name='address1' value='"+address1+"'>"

变为

$('#address1').val(address1); // assume id is 'address1'

如果您仍然不喜欢这种感觉，您可以将实际值保存在JS变量中，例如，再次使用jQuery自己执行POST。截取表单提交，取消它并使用您保存的变量以及表单中的其他字段创建自己的POST。这实际上要维护得更加笨拙和杂乱，因为您需要确保您的代码现在包含表单中的所有相关值，并在添加新字段时继续这样做。

我认为我更喜欢隐藏输入字段的方法，只是更漂亮＆＃39;更新

Answer 2

为什么你没有将它们放在收件人div中，因为它们已经隐藏了

<div class="recipients">

<input type='hidden' name='address1' value="" id="address1">
<input type='hidden' name='address2' value="" id="address2">
....
</div>

然后使用jquery更新它们，如

success: function(data) {
var results = data.results[0];
var address1 = results.Address1;
var address2 = results.Address2;
$('#address1').val(address1);
$('#address2').val(address2);
.....

包含带表单帖子的jQuery输入？

2 个答案: