Javascript 是否将jQuery输入包含在表单post中？

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

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

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

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

当ajax的焦点超出地址字段时，会触发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中？谢谢你的帮助

首先，小心不要让这些隐藏字段与当前代码重复。如果在focusout上每次成功的AJAX调用都会调用它，那么如果用户多次切换焦点，您可能会得到很多这样的调用

这就是说，如果您想像现在这样坚持在一个单独的调用中将所有干净的数据发送到API，我认为您采取了正确的方法。但是，由于上述原因，您应该在静态html中包含隐藏字段，而不是在AJAX响应中创建新字段。现在您可以在AJAX响应上更新这些输入的值。快速示例：

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

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

---

我想我更喜欢隐藏输入字段的方法，只是“更漂亮”的更新。

为什么收件人div中没有这些字段，因为它们已经隐藏了

<div class="recipients">

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

---

嗯，为什么不将地址发送到API，并在提交表单时从服务器端执行此操作？我这样做的原因是表单允许多个地址条目，并且有其他我没有包含在代码模型中的字段。我想知道你将如何在服务器端处理它，你能提供一些细节吗？很高兴知道。另外，我之所以在jQuery中输入完整的html，是因为我允许多个条目，它们进入数组地址[][field_name]。这是我提出问题的最简单方式。是的，我确实为focusout准备了其他保护措施！只是因为表单允许多个地址，所以它还可以包含所有html。听起来修改表单是最好的方法，谢谢！

<div class="recipients">

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

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