Question

嗨我在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>" );
            }
    }); 
}

Answer 1

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

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

OR

在onclick函数中添加return false;

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

Answer 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>" );
            }
    }); 
}

希望这有帮助。

Js编辑的div内容消失了

2 个答案: