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

  

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

＆＃13;

＆＃13;

$("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")
    }
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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的函数，而不是附加一个click事件处理程序）。

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 =＆＃34;提交＆＃34;使用type =＆＃34; button＆＃34;。

Answer 4

我觉得问题出在form提交时添加了submit按钮类型。只需添加一行代码即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;
});