[英]Ajax call not appending to div
我的ajax电话
$('#searchform').submit(function(event) {
$.ajax({
type: "get",
url: "/list",
dataType: "text",
data: $("#searchform").serialize(),
beforeSend: function() {
$(".se-pre-con").show();
},
success: function(data)
{
console.log(data);
$("#testcontent").append(data);
location.href="/test?"+$("#searchform").serialize();
}
});
event.preventDefault();
});
此ajax调用不会将data
追加到testcontent
div。 我很好地获得了控制台日志中的数据,但是它只是不想追加。 div #testcontent
始终为空。
我究竟做错了什么。
实际上,您是将数据追加到#testcontent
,但是这里存在一个错误-您通过调用location.href="/test?"+...
成功刷新页面,浏览器再次呈现默认视图。
您的功能正常。 如果存在问题,则不在给出的源代码范围之内。 我建议使用setTimeout()方法包装重定向,并让用户知道X秒钟内将进行重定向。
/* Variable Defaults */ var dummyURL = 'https://jsonplaceholder.typicode.com/posts/1'; /* Bind Submit Event to Form */ $('#searchform').on('submit', function(event) { $.ajax({ type: 'get', url: dummyURL, dataType: 'text', data: $('#searchform').serialize(), beforeSend: function() { $('.se-pre-con').show(); }, success: function(data) { $('#testcontent').append(data); console.log('Redirected To:', '/test?' + $('#searchform').serialize()); } }); event.preventDefault(); });
.se-pre-con { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="searchform"> <label>First Name:</label> <input type="text" name="first_name"> <br> <label>Last Name:</label> <input type="text" name="first_name"> <br> <button type="submit">Submit</button> </form> <p class="se-pre-con"> Show Me Before Send! </p> <p id="testcontent"></p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.