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