Fatal编程技术网
  • javascript/
  • Javascript PHP页面刷新。Ajax不起作用

Javascript PHP页面刷新。Ajax不起作用

javascript php jquery html ajax

Javascript PHP页面刷新。Ajax不起作用,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,为什么22.php不在div中显示结果 1） 单击“提交”后，我没有收到错误消息。 2） 我可以看到页面的选项卡快速重新加载，输入的文本字段被清除。 3） 没有显示错误消息或结果 <html> <head> <title>My first PHP page</title> <script type="text/javascript" src="http://ajax.googleap

为什么
22.php
不在div中显示结果

1） 单击“提交”后，我没有收到错误消息。
2） 我可以看到页面的选项卡快速重新加载，输入的文本字段被清除。
3） 没有显示错误消息或结果

<html>    
    <head>
      <title>My first PHP page</title>
      <script type="text/javascript" 
         src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script>
      $(document).ready(function() {            
        $("#btn").click(function(event){
           event.preventDefault();
           var myname = $("#name").val();
           var myage = $("#age").val();
           yourData ='myname='+myname+'&myage='+myage;
                $.ajax({
                  type:'POST',
                  data:yourData,//Without serialized                  
                  url: '23.php',
                  success:function(data) {
                     if(data){
                        $('#testform')[0].reset();//reset the form
            $('#result').val(data);
                        alert('Submitted');
                     }else{
                        return false;
                      }                        
                   };
                 });                    
            });             
         });
    </script>
   </head>
    <body>
      <form method="post" id="testform">
        Name:
        <input type="text" name="name" id="name" />Age:
        <input type="text" name="age" id="age" />
        <input type="submit" name="submit" id="btn" />
      </form>
      <div id='result'></div>
    </body>
</html>


我的第一个PHP页面
$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（事件）{
event.preventDefault（）；
var myname=$（“#name”）.val（）；
var myage=$（“#age”）.val（）；
yourData='myname='+myname+'&myage='+myage；
$.ajax({
类型：'POST'，
data:yourData，//未序列化
url:'23.php'，
成功：功能（数据）{
如果（数据）{
$（'#testform'）[0].reset（）；//重置表单
$（'结果'）.val（数据）；
警报（“已提交”）；
}否则{
返回false；
}                        
};
});                    
});             
});
姓名：
年龄：
jQuery代码没有阻止浏览器提交表单，因此在Ajax请求完成之前重新加载页面。您应该使用
submit
事件，而不是
click
one，包括
returnfalse以防止它实际提交表单并重新加载页面


$(document).ready(function() {            
        $("#testform").submit(function(event){ // Using form's submit event instead of button's click event
           var myname = $("#name").val();
           var myage = $("#age").val();
           yourData ='myname='+myname+'&myage='+myage;
                $.ajax({
                  type:'POST',
                  data:yourData,//Without serialized                  
                  url: '23.php',
                  success:function(data) {
                     if(data){
                        $('#testform')[0].reset();//reset the form
            $('#result').val(data);
                        alert('Submitted');
                     }else{
                        return false;
                      }                        
                   };
                 });   
            return false;                    
            });          
         });



尽管我已经做了必要的修改，但仍然无法工作。谢谢你的回复。这在您的计算机中运行得好吗？HTML表单驻留在22.php中，其结果将取自23.php，在23.php中，回音欢迎消息随年龄增长。这个欢迎信息应该显示在22.php中。一切似乎都是正确的。但还是不行。好的，我已经帮你把零钱换回来了。谢谢你的解释！先生，你检查过工作功能了吗？您是否已更正了我的代码中的任何错误，并在此处的任何位置发布，因为我无法从您的评论中看到任何代码。我是stackoverflow的新手，并且仍然熟悉那里的情况。：）。感谢您的合作。我指的是我对您的问题本身所做的一些编辑，我还没有提交答案，由于我缺乏PHP方面的经验，我不打算这样做。

$(document).ready(function() {            
        $("#testform").submit(function(event){ // Using form's submit event instead of button's click event
           var myname = $("#name").val();
           var myage = $("#age").val();
           yourData ='myname='+myname+'&myage='+myage;
                $.ajax({
                  type:'POST',
                  data:yourData,//Without serialized                  
                  url: '23.php',
                  success:function(data) {
                     if(data){
                        $('#testform')[0].reset();//reset the form
            $('#result').val(data);
                        alert('Submitted');
                     }else{
                        return false;
                      }                        
                   };
                 });   
            return false;                    
            });          
         });