Ajax成功JSON html输出循环-结果仅显示纳秒级

问题描述 投票:0回答:1

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>
jquery html arrays json ajax
1个回答
0
投票

从技术上讲,问题是当您单击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();
    });  
});  

摘自event.preventDefault()文档:

如果调用此方法,则不会触发事件的默认操作。

我希望有帮助!

© www.soinside.com 2019 - 2024. All rights reserved.