Question

我有一些运行AJAX查询的jQuery / JavaScript函数，但是不应该在初始页面加载时执行，只有在表单提交之后（它重新提交自身，表单值为 get 参数）。

以下是在第一次加载时似乎自动执行的两个函数的代码：

$(document).on('click', '.pageLink', function(){
    var pageNumber = $(this).attr('page');
    $.getJSON('/retrieve/'+pageNumber+location.search, function(data) 
    {
      build(data.results);
  });

和

$.getJSON('/retrieve/1'+location.search, function(data) 
    {
      build(data.results);
   });

构建只是一个辅助函数，我认为正在执行的是页面加载中的一个或两个，但不知道如何防止这种情况。

有没有办法在URL中检查 GET 值，只有在那里有参数时才执行脚本？或者还有其他方法可以做到这一点吗？

谢谢！

Answer 1

您必须使用submit触发器和return false。

＆＃13;

$("#form2").on("submit", function() {
  $.post("https://ipapi.co/json/", $(this).serialize(), function(json) {
    console.log("send it", "your city is " + json.city);
  }, "json");
  console.log($(this).serialize());
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form id="form1">
  <input type="submit" value="normal" />
</form>

<br>

<form id="form2">
  <input name="text" type="text" value="blabla" />
  <input type="submit" value="with return false;" />
</form>

＆＃13;

Answer 2

尝试使用

在表单提交上调用AJAX请求

$('#form_id').on('submit', function() {
    console.log('form has been submitted...');
    // do any operation here
    return false; // remove this in real implementation
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_id">
  <button type="submit">Submit </button>
</form>

仅在提交初始加载

2 个答案: