Ajax请求以JSON格式返回数组。循环遍历返回的数组以吐出其中一列的条目,并使用html divs显示。
问题是结果仅在网页上显示一纳秒,然后消失。
我需要在那里防止违约吗?花括号等是否在正确的位置?
JQuery代码段:
$(document).ready(function(){
$(":submit").click(function(e){
var msg = $("#search").val();
$.ajax({
url:'search.php',
method:'POST',
data:{
msg:msg
},
dataType: 'json',
success: function(response) {
for( var key of Object.keys( response ) ) {
$( '.content' ).append( `<div class="post"><div class="post-text">${response[key].MessageText}</div></div>` );
}
}
});
});
});
HTML:
<form action="index.php" method="post" autocomplete="on"><pre>
<input name="msg" id="search" type="text" autofocus value= "<?php if(isset($_POST['msg'])) {
echo htmlentities ($_POST['msg']); }?>"></input> <span id="error"></span>
<input type="submit" id="submit" style="border:0; padding:0; font-size:0">
</pre></form>
<div class="content"></div>
从技术上讲,问题是当您单击submit
然后刷新页面,这就是为什么您在短时间内看到DOM更改的原因。
也许您可以尝试以下方法:
$(document).ready(function(){
$(":submit").click(function(e) {
var msg = $("#search").val();
$.ajax({
// ajax call details
});
// this step should stop refreshing the page
e.preventDefault();
});
});
如果调用此方法,则不会触发事件的默认操作。
我希望有帮助!