PHP提交表单没有刷新

时间:2016-03-15 17:43:00

标签: php jquery html ajax

当用户提交表单时,应显示结果而不刷新页面。 PHP脚本也在同一个HTML页面中。

$.post jQuery出了什么问题?

<!--
	Submit form without refreshing
-->

<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 type="text/javascript" language="javascript">
    $(document).ready(function() {
      $("#btn").click(function(event) {
        var myname = $("#name").val();
        var myage = $("#age").val();
        $.post(
          "23.php", $("#testform").serialize()
        );
      });
    });
  </script>
</head>

<body>
  <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="testform">
    <!-- $_SERVER['PHP_SELF'] array -->
    Name:
    <input type="text" name="name" id="name" />Age:
    <input type="text" name="age" id="age" />
    <input type="submit" name="submit" id="btn" />
  </form>
</body>

</html>

<?php
    if ( isset($_POST['submit']) ) { // was the form submitted?
        echo "Welcome ". $_POST["name"] . "<br>";
        echo "You are ". $_POST["age"] . "years old<br>";
    }
?>

3 个答案:

答案 0 :(得分:0)

您需要在javascript中使用event.preventDefault

       $("#btn").click(function(event){
          event.preventDefault();

          var myname = $("#name").val();
          var myage = $("#age").val();

            $.post( 
              "23.php", $( "#testform" ).serialize()
           );

        });

答案 1 :(得分:0)

是的,你需要e.preventDefault。另外,我认为这些var myname和myage变量是不必要的,因为你在$ .post中序列化了整个表单。

试试这个:

 $(document).ready(function() {

    $("#btn").click(function(e) {
       e.preventDefault();
        $.post(
            "23.php", $("#testform").serialize()
        );
     });
});

希望这有帮助。

和平!的xD

答案 2 :(得分:0)

这是我完成所有建议后的最终完整代码。但是在获得结果时仍然令人耳目一新。让我们看一下代码中是否有任何进一步的错误。谢谢你的帮助。

UPDATE! - 所有这些HTML和PHP脚本都驻留在名为23.php

的同一文件中

&#13;
&#13;
<!--
	Submit form without refreshing
-->

<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 type = "text/javascript" language = "javascript">
         $(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
                    				alert('Submitted');
                 			}else{
                    				return false;
                  			}                        
               			};
             		});                    
        	});            
           
     	});
      </script>
</head>
<body>
		<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="testform"> <!-- $_SERVER['PHP_SELF'] array -->
			Name: <input type="text" name="name" id="name"/>
			Age: <input type="text" name="age" id="age"/>
			<input type="submit" name="submit" id="btn"/>
		</form>

	
</body>
</html>
&#13;
&#13;
&#13;

<?php

    if ( isset($_POST['submit']) ) { //was the form submitted?

        echo "Welcome ". $_POST["name"] . "<br>";
        echo "You are ". $_POST["age"] . "years old<br>";
    }
?>