如何使用javascript从php页面获取结果？_Javascript_Php_Jquery_Ajax

如何使用javascript从php页面获取结果？

javascript php jquery ajax

如何使用javascript从php页面获取结果？,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我正在尝试使用javascript从我的php页面获取数据，但javascript似乎工作不正常。在这种情况下，当单击我的提交按钮时，数据应发送到操作页面，但我不想转到php页面，php页面中的结果应显示在初始页面中（在这个at div id:result中）页面视图这是我的索引页，这只是示例视图 register.html <!DOCTYPE> <html> <head> <title>REGESITER</title>

我正在尝试使用javascript从我的php页面获取数据，但javascript似乎工作不正常。在这种情况下，当单击我的提交按钮时，数据应发送到操作页面，但我不想转到php页面，php页面中的结果应显示在初始页面中（在这个at div id:result中）

页面视图

这是我的索引页，这只是示例视图

    <!DOCTYPE>
<html>
<head>
<title>REGESITER</title>
<script src="script/jquery-1.11.2.min.js" type="text/javascript"></script>
<script>
    $("sub").click( function() {

        $.post($("#myform").attr("action"),
        $("#myform :input").serializeArray(),
        function (data) {
            $("#res").empty();
            $("#res").html(data);
        });

  $("#myform").submit( function() {
    return false;
  });
});</script>
</head>
<body>



<form id="myform" action="helper.php"  method="post">

FIRSTNAME:<input type="text" name="txtfname" id="fname">
<br><br>
LASTNAME:<input type="text" name="txtlname" id="lname">
<br><br>
AGE:<input type="text" name="txtage" id="age">
<br><br>
<button id="sub">SUBMIT</button> 


</form>

<div id="res">Result</div>
</body>
</html>


里吉斯特
$（“子”）。单击（函数（）{
$.post（$（“#myform”）.attr（“操作”），
$（“#myform:input”）.serializeArray（），
功能（数据）{
$（“#res”）.empty（）；
$（“#res”）.html（数据）；
});
$（“#myform”）.submit（函数（）{
返回false；
});
});
名字：



姓氏：



年龄：



提交
结果

这是我的php文件，从中获取回显结果

helper.php

<?
       $fname=$_POST['txtfname'];

       $lname=$_POST['txtlname'];

       $age=$_POST['txtage'];

   $con=mysql_connect('localhost','root','');

    if ($con)
    {
      $db=mysql_select_db('register',$con);
    }



   if ($db)
   {      
       $q1=mysql_query("insert into regdb(firstname,lastname,age) values('$fname','$lname','$age')",$con);

      echo"inserted into database";

      }
      else
      {
          echo "error in query";
      }
      ?>

完整的工作html代码：-
     <!DOCTYPE>
<html>
<head>
<title>REGESITER</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$( document ).ready(function() {
        $( "#sub" ).click(function(event) {

             $.post('helper.php',
             $("#myform :input").serializeArray(),
             function (data) {
                 $("#res").empty();
                 $("#res").html(data);
             });


     });
});
        </script>
</head>
<body>



<form id="myform" action=""  method="post">

FIRSTNAME:<input type="text" name="txtfname" id="fname">
<br><br>
LASTNAME:<input type="text" name="txtlname" id="lname">
<br><br>
AGE:<input type="text" name="txtage" id="age">
<br><br>
<input type="button" id="sub" value="Enter" />


</form>

<div id="res">Result</div>
</body>
</html>


里吉斯特
$（文档）.ready（函数（）{
$（“#子”）。单击（函数（事件）{
$.post（'helper.php'，
$（“#myform:input”）.serializeArray（），
功能（数据）{
$（“#res”）.empty（）；
$（“#res”）.html（数据）；
});
});
});
名字：



姓氏：



年龄：



结果
谢谢gaurav，现在代码工作正常。非常感谢。请将其标记为正确答案以帮助他人