Question

为什么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
    if ( isset($_POST['name']) ) { // was the form submitted?
        echo "Welcome ". $_POST["name"] . "<br>";
        echo "You are ". $_POST["age"] . "years old<br>";
    }
?>

Answer 1

您的jQuery代码不会阻止浏览器提交表单，因此在Ajax请求完成之前重新加载页面。您应该使用submit事件而不是click事件，并在结尾处包含return false;，以防止它实际提交表单并重新加载页面。

$(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;                    
            });          
         });

PHP页面刷新。 Ajax无法正常工作

1 个答案: