gpt4 book ai didi

javascript - 无法使用调用 API jquery 更新带有新内容的 div

转载 作者:行者123 更新时间:2023-11-30 12:16:16 25 4
gpt4 key购买 nike

到处寻找尝试解决这个简单的问题。我在 jQuery 中使用 Ajax 调用,试图用来自 API 的新数据替换“#newevent”。我能够成功检索数据,但无法在每次调用时替换数据。发生的情况是新数据只是添加到旧数据的底部。我试过使用 $('#newevent').html('') 和 $('#newevent').empty() 但没有成功。任何建议将不胜感激!谢谢

索引.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>

脚本.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);

}

});
});


});

最佳答案

问题是 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);

}

});
});
});

关于javascript - 无法使用调用 API jquery 更新带有新内容的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32357656/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com