logo标签列表

JavaScript编辑的div内容消失了

javascriptajax
3

嗨，我正在ajax调用成功后将内容添加到

中。但很快，追加的文本就会消失。为什么会发生这种情况？能否请您帮忙解决？

我的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>" );
            }
    }); 
}
@gilsha，感谢您的编辑。 - Bineesh
1
@Bineesh 我猜测你从ajax调用中获取的数据格式不正确，这可能导致了这个问题，你有检查过来自ajax调用的数据吗？它的格式是否正确？ - Sumit Surana
1
这个链接可能有帮助 - https://dev59.com/cnzaa4cB1Zd3GeqPNDY1 - Gilsha
页面会重新加载，因为提交按钮正在提交您的表单。尝试将按钮类型从“submit”更改为“button”。 - Gilsha
1
@ozil，谢谢你的帮助。 - Bineesh
显示剩余4条评论
2个回答
2

由于提交按钮正在提交您的表单，因此页面会重新加载。尝试将按钮类型从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个小时）。 - Bineesh
0

您应该在函数中添加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>" );
            }
    }); 
}

希望这可以帮到你。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接