js编辑的div内容消失答案

【问题标题】：Js edited div content disappearsjs编辑的div内容消失
【发布时间】：2016-02-29 09:31:34
【问题描述】：

您好，我在ajax 调用成功后将内容附加到 div。但很快附加的文字就消失了。为什么会这样，你能帮忙吗？

我的js 保存在另一个文件中，js 通过按钮单击事件调用。

HTML：

<html>

  <head> </head>

  <body>
    <script type='text/javascript' src='jq/jquery.js'></script>
    <script type='text/javascript' src='js/bootstrap.min.js'></script>
    <script type='text/javascript' src='js/script.js'></script>
    <br/>

    <form name="form">
        <input type="text" id="uname" name="uname">
        <input type="submit" onclick="postData()" id="data-submit"> 
    </form>

    <br/>
    <br/>
    <br/>
    <br/>

    <div id="feedback"></div>

    <script type='text/javascript'>
      //this sometimes show errors on google chrome. 
      //$(document).ready(function(){});
    </script>
  </body>

</html>

这是我的js文件的全部内容

function postData(){                
    var uname=$('#uname').val();    
    $.ajax({
            url:'checkempcode.php',
            data: {name: uname},
            type: "POST",           
            async: false,
            success: function(data){
                window.alert('Checking');
                $('#feedback').html(data);
                $( "#feedback" ).append( "<p>Test</p>" );
            }
    }); 
}

【问题讨论】：

你也可以分享你的html
@gilsha 感谢您的编辑
@Bineesh 我的猜测是您从 ajax 调用获得的数据格式不正确，这可能导致此问题，您是否碰巧检查了来自 ajax 调用的数据？格式是否正确？
此链接可能会有所帮助 - stackoverflow.com/questions/21617060/…
@ozil，感谢您的帮助。

标签： javascript ajax

【解决方案1】：

由于提交按钮正在提交您的表单，因此页面会重新加载。尝试将按钮类型从 submit 更改为 button

 <input type="button" onclick="postData()" id="data-submit"/>

或

在onclick函数中添加return false；

 <input type="submit" onclick="postData(); return false;" id="data-submit"/>

【讨论】：

谢谢；有效。又节省了我 2 个小时。（过去 2 小时我在这个问题上迷路了）

【解决方案2】：

您应该在函数中添加event.preventDefault() 以防止表单提交：

function postData(){              
    event.preventDefault();

    var uname=$('#uname').val();    
    $.ajax({
            url:'checkempcode.php',
            data: {name: uname},
            type: "POST",           
            async: false,
            success: function(data){
                window.alert('Checking');
                $('#feedback').html(data);
                $( "#feedback" ).append( "<p>Test</p>" );
            }
    }); 
}

希望这会有所帮助。

【讨论】：