javascript - JQuery - 触发点击事件而不重新加载页面

Question

我的页面上有一个简单的表单

<div class="data-form">
    <p>Are you hungry?</p>
    <form>
        <label class="radio-inline"><input type="radio" name="optradio" value="yes">Yes</label>
        <label class="radio-inline"><input type="radio" name="optradio" value="no">No</label>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <a id="yes" href="https://someurl.php?ans=yes"></a>
    <a id="no" href="https://someurl.php?ans=no"></a>
</div>

当用户选择一个选项然后单击“提交”时，我需要删除表单并将其替换为“谢谢”。为此，我执行以下操作

$("form").submit(function (e) {
    e.preventDefault();
    var radioValue = $("input[name='optradio']:checked").val();
    if(radioValue == "yes") {
        $('.data-form').html('');
        $('.data-form').html('<p>Thank you</p>');
    }
    if(radioValue=="no") {
        $('.data-form').html('');
        $('.data-form').html('<p>Thank you</p>');
    }
});

这是我试图找出可能性的部分。在表单中，您可以看到有两个 anchor 标记，一个表示是，一个表示否。现在在我的 JQuery 中，如果他们选择"is"，我可以做这样的事情

$('a#yes')[0].click();

现在将重新加载页面，网址为

https://someurl.php?ans=yes

这个 url 触发很重要，因为我没有对他们提交的数据做任何事情(我没有将其存储在数据库或类似的东西中)。相反，我使用 Apache 日志。在 Apache 日志中，如果我看到上述 url 已被触发，我就知道有人单击了"is"，反之亦然。由于我正在使用一些外部程序，我必须这样做。

现在一切正常了，我可以在日志中看到响应。然而，触发点击事件的问题是它会重新加载页面。

我想知道，是否有可能在不重新加载页面的情况下触发此点击事件？同时仍然能够在我的 Apache 日志中看到响应？

我正在考虑以某种方式使用 Ajax 来实现这一目标，但我没有在任何地方发布我的数据，所以不确定是否可能？有关我所赞赏的选项的任何信息。

谢谢

Answer 1

我强烈建议使用 AJAX 调用来提交表单。您将获得额外的灵 active ，并且 URL 无需更改。该表单将提交到您提供的 URL(您上面的 URL)，并且该部分将更改为所需的措辞。另一个更改是将 type="submit"输入更改为按钮。这不会在单击时提交表单(并且不需要其他解决方法来停止提交)。

更新了 fiddle 以包括单选按钮示例和 anchor 标记，如所述。将 URL 更新为您的 URL。这是使用 JQuery 运行的。

HTML:

<div class="data-form">
  <p>Are you hungry?</p>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio" value="yes">Yes</label>
    <label class="radio-inline">
      <input type="radio" name="optradio" value="no">No</label>
    <button type="button" class="submitButton1 btn btn-primary">Submit</button>
  </form>
  <a id="areYouHungryOption" data-value="yes">Yes</a>
  <a id="areYouHungryOption" data-value="no">No</a>
</div>

Javascript:

$(".submitButton1").click(function() {

  if ($('input[name="optradio"]:checked').size() > 0) {
    submitData($('input[name="optradio"]:checked').val());
  } else {
    alert('Please select an option!');
  }
})

$("a#areYouHungryOption").click(function() {
  submitData($(this).data("value"));
})

var submitData = function(answer) {
  $.ajax({

      method: "GET",
      url: "/echo/html/",
      data: {
        ans: $('input[name="optradio"]:checked').val()
      }
    })
    .done(function(msg) {
      $('.data-form').html('Thanks for your feedback!');
    });
}

请参阅以下 JSFiddle 项目的示例

https://jsfiddle.net/bgerhards/3y0vwf2m/