HTML 会影响 ajax 来电吗

Question

我正在制作维基百科查看器，并实现了维基百科标题搜索 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

Answer 1

Use type='button', type='submit' will submit the form and page will be unloaded.

$("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>

Answer 2

您应该附加点击处理程序/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

Answer 3

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

Answer 4

我觉得问题出在添加了 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`

Answer 5

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

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

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

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

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

HTML 会影响 ajax 来电吗

Do HTML affect ajax calls

html

javascript

ajax

jquery

wikipedia-api

`UPDATED FIDDLE`