需要幫助理解.getJSON（）行爲

我試圖理解爲什麼.getJSON（）調用拋出表單提交時不會抑制錯誤。最初我以爲可能表單提交意味着函數wikiCall（）沒有被啓動。但是，當在提交表單時輸入正確的「wikiLink」[wikiCall（）的參數]，但這會導致.getJSON（）失敗。需要幫助理解.getJSON（）行爲

的HTML

<div class="text-center searchBar"> 
    <form action=""> 
    <input type="text" id="searchText" /> 
    </form> 
</div> 

<div class="container displayResults"> </div>

的JavaScript：

$(document).ready(function() { 
    $('#searchText').keypress(function(e) { 
    var searchItem = $('#searchText').val(); 
    var link = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&gsroffset=&format=json&formatversion=2&callback=?&gsrsearch=' + searchItem; 

    if(e.which == 13) { //if user returns enter key 
     wikiCall(link); 
     //e.preventDefault(); //.getJSON throws error if form submission is not suppressed 
    }  
    }); 
}); 

function wikiCall(wikiLink) { 
    console.log(wikiLink); //prints the correct link even on form submit 
    $.getJSON(wikiLink, function(searchResults) {  
    for (var i = 0; i < searchResults.query.pages.length; i++) { 
     $(".displayResults").append("<div class='searchResultsContainer'><span style='font-weight:bold; font-size:150%; margin-bottom:100px;'>" + searchResults.query.pages[i].title + "</span><br></br>" + searchResults.query.pages[i].extract + "</div>"); 
     $(".displayResults").append("<br>"); 
    } 
    }).fail(function(jqxhr,textStatus,error){ 
    alert(textStatus+": "+error); //shows error:error if form is submitted on enter 
    }); 
}

來源

2016-01-21 CodingerSK

那麼，如果表單被提交，頁面將重新加載，並且ajax調用可能成功，但是當頁面重新加載時，附加到DOM中的任何內容都將丟失，並且要重新加載頁面。 – adeneo

[用戶單擊刷新時處理ajax錯誤]的可能重複（http://stackoverflow.com/questions/699941/handle-ajax-error-when-a-user-clicks-refresh） – showdev

在此處可以正常工作http：///jsfiddle.net/oyu0qzmb/應該爲每個新請求清空容器，儘管 – charlietfl

因爲你form元素的action屬性爲空字符串，通過提交表單你有效地刷新頁面，這會導致瀏覽器中止所有打開的Ajax請求，由此而引發的錯誤處理程序剛剛離開頁面之前，。除非您的控制檯保存頁面之間的日誌，否則在加載下一頁之前，錯誤消息應該只顯示一小段時間。

您的代碼目前沒什麼意義，如果您不希望啓動瀏覽器導航，則應始終防止提交表單的默認行爲。

來源

2016-01-22 00:20:31 iMoses

你爲什麼不只是發送從提交申請。

$(document).ready(function() { 
 
    $('form').on('submit', function(e) { 
 
    e.preventDefault(); 
 
    var searchItem = $('#searchText').val(); 
 
    var link = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts|info&exintro&exlimit=max&inprop=url&generator=search&gsroffset=&format=json&formatversion=2&callback=?&gsrsearch=' + searchItem; 
 
     wikiCall(link); 
 
    }); 
 
}); 
 

 
function wikiCall(wikiLink) { 
 
    console.log(wikiLink); //prints the correct link even on form submit 
 

 
    //clean the div before append the new result; 
 
    $(".displayResults").html(''); 
 

 
    $.getJSON(wikiLink, function(searchResults) {  
 
    for (var i = 0; i < searchResults.query.pages.length; i++) { 
 
     $(".displayResults").append("<div class='searchResultsContainer'><span style='font-weight:bold; font-size:150%; margin-bottom:100px;'>" + searchResults.query.pages[i].title + "</span><br></br>" + searchResults.query.pages[i].extract + "</div>"); 
 
     $(".displayResults").append("<br>"); 
 
    } 
 
    }).fail(function(jqxhr,textStatus,error){ 
 
    alert(textStatus+": "+error); //shows error:error if form is submitted on enter 
 
    }); 
 
}

這裏是你的代碼，並提交表單的工作示例，只需鍵入並回車。 http://jsbin.com/hexoyocusa/edit?html,js,output

來源

2016-01-22 00:20:22

需要幫助理解.getJSON（）行爲

回答

相關問題