爲什麼我的AJAX數據加載消失？

-2

我從電影數據庫API中加載JSON數據。 AJAX加載搜索功能，它工作正常，但隨後消失。下面的代碼：爲什麼我的AJAX數據加載消失？

<div class="form-group"> 
    <label for="movie">inserisci film:</label> 
    <input type="text" class="form-control" id="movie" type="text"></input> 
</div> 
<button type="submit" onclick="search()" class="btn btn-default">cerca</button>

然後我調用該函數

function search() { 
    var film = document.getElementById('movie').value; 
    var key = '?api_key=somekey'; 
    alert(film + key); 
    $.ajax({  
     type: 'GET', 
     url : 'http://api.themoviedb.org/3/search/movie'+key+'&query='+film, 
     async: false, 
     data: { 
      format: 'json' 
     }, 
     success: function(data){ 
      $('#titolo').append(data.results[0].original_title); 
      $('#immagine').append('<img src=' + url + key + ata.results[0].poster_path + '></img>'); 
      console.log(data); 
     },    
    }); 
};

有什麼不對？謝謝

來源

2015-12-21 Nonsono Statoio

你可能會被阻止由[同源策略（http://en.wikipedia.org/wiki/Same-origin_policy）因爲您正在向第三方域提出請求。但是（最重要的是）**刪除'async：false' **。這是非常糟糕的做法，因爲它會阻塞UI線程，從而使瀏覽器看起來像用戶一樣，直到請求完成。 –

你提供的HTML是不夠的，你錯過了使用'titolo'和'immagine'的元素，例如 – Luizgrs

你不會取消提交......表單做它應該做的事情，將數據發送到動作。 – epascarello

您點擊提交按鈕
JavaScript的運行
Ajax請求被髮送
因爲async: false整個UI鎖，直到JS做
的DOM被更新成功功能
表單提交
瀏覽器加載新頁面

如果您要使用固有事件屬性（您不應該），那麼您需要從函數return false中停止事件的正常行爲發生。

onclick="search(); return false;"

來源

2015-12-21 13:18:59 Quentin

是的，他沒有包括，但它表明他有一切。 'form-group'，它可能是一個表單下使用的引導類和代碼的行爲。 –

你明白了，也謝謝你關於異步的建議 –

其因您提交表單

你叫search()功能，然後執行後的形式會得到提交的正常流動和重定向到新url。你必須返回false時submitted.You可以做這樣的事情：

complete: function(data){ 
     return false; 
    }

來源

2015-12-21 13:26:35

爲什麼我的AJAX數據加載消失？

回答

相關問題