【问题标题】：Do HTML affect ajax callsHTML 会影响 ajax 调用吗
【发布时间】：2016-05-30 07:23:38
【问题描述】：

我正在制作维基百科查看器，并且我实现了维基百科标题搜索 ajax 调用工作正常，直到我在输入和按钮标签周围添加表单标签。

  <form class="pure-form">
    <input type="text" id="txtff" class="pure-input-rounded" placeholder="Search for...">
    <button type="submit" class="pure-button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
  </form>

我的ajax代码是：

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

  var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=allpages&aplimit=5&apfrom=Albert";

  $.ajax({
    url: url,
    jsonp: "callback",
    dataType: "jsonp",
    success: function(resp){
      console.log(JSON.stringify(resp));
    },
    error: function(err){
      console.log("ERR")
    }
  });
});

我在 codepen 上做这一切：http://codepen.io/theami_mj/pen/KMKPvZ

【问题讨论】：

HTML 不影响 ajax。
错误是什么？？

标签： javascript jquery html ajax wikipedia-api

【解决方案1】：

使用type='button'，type='submit' 将提交表单，页面将被卸载。

$("button").click(function() {
  var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=allpages&aplimit=5&apfrom=Albert";
  $.ajax({
    url: url,
    jsonp: "callback",
    dataType: "jsonp",
    success: function(resp) {
      console.log(JSON.stringify(resp));
    },
    error: function(err) {
      console.log("ERR")
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="pure-form">
  <input type="text" id="txtff" class="pure-input-rounded" placeholder="Search for...">
  <button type="button" class="pure-button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>Go!
  </button>
</form>

【讨论】：

【解决方案2】：

我觉得问题在于添加了submit 按钮类型的form 提交。只需添加一行代码，即e.preventDefault()，以防止您的按钮默认操作submitting the form，这样它就不会提交form

$("button").click(function(e) {
  e.preventDefault()
  var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=allpages&aplimit=5&apfrom=Manoj";

  $.ajax({
    url: url,
    jsonp: "callback",
    dataType: "jsonp",
    success: function(resp) {
      console.log(JSON.stringify(resp));
    },
    error: function(err) {
      console.log("ERR")
    }
  });
});

`UPDATED FIDDLE`

【讨论】：

这也可以。但我认为使用标准的 onsubmit 回调是更“标准”的方式。
它取决于开发人员的选择伙伴.. :) 他们可以选择他们方便的任何一个.. 如果 OP 不想更改任何代码并坚持他现在拥有的，那么这个很好选择.. @lipp
@lipp, onsubmit 处理函数必须是全局的，并且必须避免 globals..jQuery 事件绑定是更推荐的方式..

【解决方案3】：

您应该将单击处理程序/AJAX 调用附加到表单的 onsubmit 事件处理程序：

<form class="pure-form" onsubmit="myAjaxCall">
  <input type="text" id="txtff" class="pure-input-rounded" placeholder="Search for...">
  <button type="submit" class="pure-button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>

这将是您的脚本（只是创建了一个名为 myAjaxCall 的函数，而不是附加点击事件处理程序）。

myAjaxCall = function() {
  var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=allpages&aplimit=5&apfrom=Albert";

  $.ajax({
    url: url,
    jsonp: "callback",
    dataType: "jsonp",
    success: function(resp){
      console.log(JSON.stringify(resp));
    },
    error: function(err){
      console.log("ERR")
    }
  });
}

http://www.w3schools.com/jsref/event_onsubmit.asp

【讨论】：

【解决方案4】：

这是正常行为。类型为 submit 的按钮将发送表单。尝试将 type="submit" 替换为 type="button"。

【讨论】：

【解决方案5】：

你应该去掉表格，或者你应该添加

$("form").on("submit", function(e){
    e.preventDefault();
    return false;
});

到你的JS代码，防止表单的默认行为。

或者，您也可以将按钮单击事件中的所有逻辑移到此处：

$("form").on("submit", function(e){
    e.preventDefault();
    // your AJAX call here
    return false;
});

【讨论】：