jquery submit *after* 第三方 ajax 验证答案

【问题标题】：jquery submit *after* third-party ajax validationjquery submit *after* 第三方 ajax 验证
【发布时间】：2009-10-12 08:50:39
【问题描述】：

我有一个表单可以从用户那里获取地址，并将该地址发送到我的服务器。目标是使用 Google 的地理编码来确保地址是唯一的且可进行地理编码，然后再打扰服务器。

我可以成功绑定 form.submit、地理编码、获取我的地标、确保它们是唯一的或不是唯一的……但我完全无法在我的回调中进行提交工作。这让我觉得我不应该在回调中这样做，但这就是我在这里的原因。

基本上，我需要一种方法来提交表单调用我的验证，这会触发回调——如果/当该回调成功时，回调需要能够提交表单（不是 AJAX 帖子，谢谢) 无需再次触发验证。

下面是伪代码，从内存中输入。我已经尝试过 .unbind('submit').submit() 和直接调用 DOM 提交，但都没有成功，但我将它们都包括在这里是为了它的地狱.

<html>
  <head>
    <!-- .. load google maps and jquery .. -->
    <script type="text/javascript">
      $(document).ready(function() {
        // ... insure Google, get geocoder, etc.
        geocoder = ...;

        function geocodeCallback(result) {
          // .. check if result was a success, and unique
          if (.. yes, success ..) {
            // use my not-included snazzy function to normalize the address
            $('#loc').val(normalize(result.Placemark[0]));
            $('#myform').unbind('submit');
            $('#myform')[0].submit(); // see note above
          } else {
            // do something magically useful
          }
        }

        $('#myform').bind('submit', function() {
          geocoder.getLocations($('#loc').val(), geocodeCallBack);
          return false;
        });
      });
    </script>
  </head>
  <body>
    <form id="myform" method="post" action="thispage.html">
      <input type="text" name="loc" />
      <input type="submit" name="sub" value="Submit" />
    </form>
  </body>
</html>

【问题讨论】：

标签： jquery forms geocoding

【解决方案1】：

基本上你需要设置一些标记值来表明它是有效的。例如：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
num = 1;

$(function() {
  $("#form").submit(function() {
    if ($("#valid").val() == "false") {
      setTimeout(callback, 1000);
      $("#comment").text("comment " + num);
      num++;
      return false;
    }
  });
});

function callback() {
  $("#valid").val("true");
  $("#form").submit();
}
</script>
</head>
<body>
<form id="form">
<div id="comment"></div>
<input type="hidden" id="valid" name="valid" value="false">
<input type="text" name="loc">
<input type="submit" value="Submit">
</form>
</body>
</html>

还值得指出的是，您不应依赖此验证，而应在服务器上重复此验证，因为无法阻止潜在的恶意攻击者欺骗看似有效的表单提交。

【讨论】：

【解决方案2】：

您可以延迟表单提交决定，直到数据得到验证：

<script type="text/javascript">
      $(document).ready(function() {
        // ... insure Google, get geocoder, etc.
        geocoder = ...;

        var processingGeo = false;
        var geoResult = false;

        function geocodeCallback(result) {
          // .. check if result was a success, and unique
          if (.. yes, success ..) {
            // use my not-included snazzy function to normalize the address
            $('#loc').val(normalize(result.Placemark[0]));
            geoResult = true;
          } else {
            // do something magically useful
            geoResult = false;
          }
          processingGeo = false;
        }

        $('#myform').bind('submit', function() {
          processingGeo = true;
          geoResult = false;
          geocoder.getLocations($('#loc').val(), geocodeCallBack);
          while (processingGeo) {}
          return geoResult;
        });
      });
</script>

【讨论】：

Max，你的回答不会忙着等待一个真正的 javascript 线程吗？如果我有其他事件触发怎么办？是的，它假设地理编码调用需要很长时间。无论如何，我喜欢这个答案，但我想清楚使用它会产生什么效果。
其实我说得太早了。我喜欢这个答案，因为它提供了一种处理来自回调的替代响应的清晰方法。然而，正如所写的那样，它按预期杀死了 Safari 上的 javascript 处理。