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

我觉得问题是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 2

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

Answer 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

Answer 4

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

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; 
});