無法使用API jquery調用使用新內容更新div

Question

一直在尋找嘗試解決這個簡單問題。 我在jQuery中使用Ajax調用嘗試用來自API的新數據替換'#newevent'。 我能夠成功檢索數據，但無法用每次調用替換數據。 會發生什么是新數據只是添加到舊數據的底部。 我嘗試過使用$（'＃newevent'）。html（''）和$（'＃newevent'）。empty（）但沒有成功。 任何建議將不勝感激！ 謝謝

的index.html

<!DOCTYPE html>

<html>
<head>

</head>
<body>
<form id="query" action="away.php" method="get">
<label for="location">Location:</label>
<input type="text" id="location" name="location"/>
<input type="submit" value="submit" />
</form>
<h1>Welcome to Event Planner</h1>
<h2>The site where will help you plan upcoming events with what the weather is doing for that day!</h2>

<section id="container">
<div id="newevent"> 

</div>
</section>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="templates/script.js"></script>
</body>
</html>

scripts.js中

$(document).ready(function(){
var newContent='';
var $content=$('#newevent');

$("#query").submit(function (e){
    e.preventDefault();
    var data = $(this).serialize();
    var url="http://api.eventful.com/json/events/search?app_key=XXXXXXXXX&";
    var url= url.concat(data);
    console.log(url);


$.ajax({
    url:url,
    dataType: 'jsonp',      
    success:function(response) 
    {
        $content.html("");
        $content.html(function()
            {
                for(var i=0; i<response.events.event.length; i++)
                {
                    newContent+=response.events.event[i].description;
                }
                return newContent;
            }).hide().fadeIn(400);  

    }

});
});


});

Answer 1

問題是newContent沒有被重置，通過執行newContent = "";在每次調用時將其設置為空字符串newContent = ""; ：

$(document).ready(function () {
    var newContent = '';
    var $content = $('#newevent');

    $("#query").submit(function (e) {
        e.preventDefault();
        var data = $(this).serialize();
        var url = "http://api.eventful.com/json/events/search?app_key=XXXXXXXXX&";
        var url = url.concat(data);
        console.log(url);

        $.ajax({
            url: url,
            dataType: 'jsonp',
            success: function (response)
            {
                newContent = ""; //Add this
                $content.html("");
                $content.html(function ()
                {
                    for (var i = 0; i < response.events.event.length; i++)
                    {
                        newContent += response.events.event[i].description;
                    }
                    return newContent;
                }).hide().fadeIn(400);

            }

        });
    });
});

或者@Jamiec在他的評論中指出我們只在html函數回調中聲明它：

$(document).ready(function () {
    var $content = $('#newevent');

    $("#query").submit(function (e) {
        e.preventDefault();
        var data = $(this).serialize();
        var url = "http://api.eventful.com/json/events/search?app_key=XXXXXXXXX&";
        var url = url.concat(data);
        console.log(url);

        $.ajax({
            url: url,
            dataType: 'jsonp',
            success: function (response)
            {
                $content.html(function ()
                {
                    var newContent = "";
                    for (var i = 0; i < response.events.event.length; i++)
                    {
                        newContent += response.events.event[i].description;
                    }
                    return newContent;
                }).hide().fadeIn(400);

            }

        });
    });
});

無法使用API jquery調用使用新內容更新div

問題描述

1 個解決方案

解決方案1
3 已采納 2015-09-02 15:55:45

無法使用API​​ jquery調用使用新內容更新div

問題描述

1 個解決方案

解決方案1 3 已采納 2015-09-02 15:55:45

無法使用API jquery調用使用新內容更新div

解決方案1
3 已采納 2015-09-02 15:55:45