为什么我的 AJAX 数据加载然后消失了？答案

【问题标题】：Why does my AJAX data load then disappear?为什么我的 AJAX 数据加载然后消失了？
【发布时间】：2015-12-21 13:15:58
【问题描述】：

我正在从电影数据库 API 加载 JSON 数据。 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);
        },              
    });
};

有什么问题吗？谢谢你

【问题讨论】：

当您向第三方域发出请求时，您可能被Same Origin Policy 阻止。但是（也是最重要的）删除 async: false。使用它是可怕的做法，因为它阻塞了 UI 线程，使浏览器在用户看来好像它已经崩溃，直到请求完成。
您提供的 HTML 不够，例如您错过了带有 titolo 和 immagine 的元素
你没有取消提交...表单做了它应该做的事情，将数据发送到操作。

标签： javascript jquery json ajax

【解决方案1】：

你点击提交按钮
JavaScript 运行
ajax 请求已发送
因为 async: false 整个 UI 都会锁定，直到 JS 完成
DOM 由成功函数更新
表单提交
浏览器加载一个新页面

如果你打算使用内在事件属性（你不应该），那么你需要从函数中return false 来阻止事件的正常行为发生。

onclick="search(); return false;"

【讨论】：

是的，他没有包括在内，但一切都表明他拥有。 form-group 这可能是一个在表单和代码行为下使用的引导类。
你明白了，也感谢你对异步的建议

【解决方案2】：

因为你提交了表单

您调用了search() 函数，然后在执行后表单将作为正常流程提交并重定向到新的url。提交时必须返回false。您可以执行以下操作：

 complete: function(data){
       return false; 
  }

【讨论】：