Php 使用jquery ajax显示所有记录_Php_Jquery

Php 使用jquery ajax显示所有记录

php jquery

Php 使用jquery ajax显示所有记录,php,jquery,Php,Jquery,我已经为在同一页上显示记录编写了代码，但它不起作用。实际上，我希望在插入同一页的页面中，以表格格式显示所有记录，并在不刷新页面的情况下显示最近添加的记录 ajaxinsert.php <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" > $(document).ready(function() { $("#insert"

我已经为在同一页上显示记录编写了代码，但它不起作用。实际上，我希望在插入同一页的页面中，以表格格式显示所有记录，并在不刷新页面的情况下显示最近添加的记录

ajaxinsert.php

<script type="text/javascript" src="../jquery.js"></script>

<script type="text/javascript" >
$(document).ready(function() {
    $("#insert").click(function() {
       var name  = $("#name").val();
       var rno  = $("#rno").val();
    var address = $("#address").val();

    //var dataString = "&name="+name"+&address="+address;
    $.ajax({
      type:'POST',
      data:{name: name,
            rno:rno,
            address:address},
      url:'demo_insert.php',
      success:function(data){
       if(data="inserted") {
          alert("Insertion Success");
        } else {
          alert("Not Inserted"); 
        }
     } 
   });  
    });
});
</script>
</head>

<body>
<form id="myform" action="demo_insert.php"> 
<label>Name: </label> <input id="name" type="text" />
<label>Rno: </label> <input id="rno" type="text" />
<label>Address: </label> <input id="address" type="text" />
<input name="Submit" type="button"  id="insert" value="Submit"/>
<!--<a id="insert" title="Insert Data" href="#">Push into mysql</a>-->
 <!-- For displaying a message -->

<div id="message"></div>
</form>
</body>

<?
    include('connection.php');
 //Pull data from home.php front-end page

 $name=mysql_escape_string($_POST['name']);
 $rno=mysql_escape_string($_POST['rno']);
 $address=mysql_escape_string($_POST['address']);
 //Insert Data into mysql
$query=mysql_query("INSERT INTO school(name,rno,address) VALUES('$name','$rno','$address')");

$dispquery=mysql_query("select * from school"); 
echo "<table border=1>";

   echo "<tr>";
   echo"<td>Srno</td>";
   echo "<td>Name</td>";
   echo"<td>Rno</td>";
   echo "<td>Address</td>";  
   echo"</tr>";
$i=1;
while($result=mysql_fetch_array($dispquery))
{
    echo "<tr>";
    echo "<td>" .$i."</td>";
    echo "<td>" .$result['name'] ."</td>";
     echo "<td>" .$result['rno'] ."</td>"; 
    echo "<td>" .$result['address'] ."</td>";   
    echo "</tr>";
    $i++;
}
   echo"</table>";
?>


$（文档）.ready（函数（）{
$（“#插入”）。单击（函数（）{
var name=$（“#name”）.val（）；
var rno=$（“#rno”）.val（）；
var address=$（“#address”）.val（）；
//var dataString=“&name=“+name”+&address=“+address；
$.ajax({
类型：'POST'，
数据：{name:name，
rno:rno，
地址：address}，
url:'demo_insert.php'，
成功：功能（数据）{
如果（data=“inserted”）{
警报（“插入成功”）；
}否则{
警告（“未插入”）；
}
} 
});  
});
});
姓名：
Rno：
地址:

demo_insert.php

<script type="text/javascript" src="../jquery.js"></script>

<script type="text/javascript" >
$(document).ready(function() {
    $("#insert").click(function() {
       var name  = $("#name").val();
       var rno  = $("#rno").val();
    var address = $("#address").val();

    //var dataString = "&name="+name"+&address="+address;
    $.ajax({
      type:'POST',
      data:{name: name,
            rno:rno,
            address:address},
      url:'demo_insert.php',
      success:function(data){
       if(data="inserted") {
          alert("Insertion Success");
        } else {
          alert("Not Inserted"); 
        }
     } 
   });  
    });
});
</script>
</head>

<body>
<form id="myform" action="demo_insert.php"> 
<label>Name: </label> <input id="name" type="text" />
<label>Rno: </label> <input id="rno" type="text" />
<label>Address: </label> <input id="address" type="text" />
<input name="Submit" type="button"  id="insert" value="Submit"/>
<!--<a id="insert" title="Insert Data" href="#">Push into mysql</a>-->
 <!-- For displaying a message -->

<div id="message"></div>
</form>
</body>

<?
    include('connection.php');
 //Pull data from home.php front-end page

 $name=mysql_escape_string($_POST['name']);
 $rno=mysql_escape_string($_POST['rno']);
 $address=mysql_escape_string($_POST['address']);
 //Insert Data into mysql
$query=mysql_query("INSERT INTO school(name,rno,address) VALUES('$name','$rno','$address')");

$dispquery=mysql_query("select * from school"); 
echo "<table border=1>";

   echo "<tr>";
   echo"<td>Srno</td>";
   echo "<td>Name</td>";
   echo"<td>Rno</td>";
   echo "<td>Address</td>";  
   echo"</tr>";
$i=1;
while($result=mysql_fetch_array($dispquery))
{
    echo "<tr>";
    echo "<td>" .$i."</td>";
    echo "<td>" .$result['name'] ."</td>";
     echo "<td>" .$result['rno'] ."</td>"; 
    echo "<td>" .$result['address'] ."</td>";   
    echo "</tr>";
    $i++;
}
   echo"</table>";
?>

您必须实际将内容添加到DOM中。在Ajax调用的回调函数中，您将获得数据，可以使用或之类的函数填充表。要查看您的Ajax调用从PHP脚本中得到了什么，请将

console.log（data）

放入回调中，然后您可以使用它来准确地了解如何生成内容

此外，PHP

mysql

扩展也不推荐使用。如果语句与您返回的内容不兼容，请将其替换为或。

您的

。您使用一个html表进行响应，并且在成功回调中将其视为一个简单变量
success:function(data){
       if(data="inserted") {
          alert("Insertion Success");
        } else {
          alert("Not Inserted"); 
        }
     } 

您希望将数据
附加到DOM中，或者对其执行其他操作。基于您的php，您希望将其附加到某个位置。
一些事情，我看到的一些问题的概括答案
通常，如果您遵循某种php编码的MVC结构，您将希望将读取查询逻辑与更新、插入逻辑等分离
因此，在php上，如果将insert封装在函数或单独的页面中，如果insert成功，则可以返回一个布尔值，然后通过success函数中的另一个ajax getJson调用read table查询
在php中，您通常希望返回查询结果集
echo json_编码（$results）
然后，在javascript中，一旦ajax完成（）（处理ajax json成功的最新jquery方法）或success（），就可以使用$。遍历结果集
如果您感兴趣，我可以首先提供更多的代码示例，请使用mysqli或PDO连接到数据库，mysql方法已被弃用，不久将停止工作并破坏您的所有代码
第二，你几乎一路都到了那里，尽管还不完全到。我建议采取稍微不同的方法，也许可以使用jQuery和JSON
按如下方式更改第一个文件：
<script type="text/javascript" >
    $(document).ready(function() {
        $.ajax({
            type:'POST',
            data: {
                name: $("#name").val(),
                rno: $("#rno").val(),
                address: $("#address").val()
            },
            dataType: 'json',
            url:'demo_insert.php',
            success: function(data) {
                if(data.insert) {
                    alert("Insertion Success");
                    // All your content will be in data.output now which you can append wherever
                } else {
                    alert("Not Inserted"); 
                }
            } 
        }); 
    });
</script>


$（文档）.ready（函数（）{
$.ajax({
类型：'POST'，
数据：{
名称：$（“#名称”）.val（），
rno:$（“#rno”）.val（），
地址：$（“#地址”）.val（）
},
数据类型：“json”，
url:'demo_insert.php'，
成功：功能（数据）{
if（data.insert）{
警报（“插入成功”）；
//您的所有内容都将在data.output中，您可以将其附加到任何位置
}否则{
警告（“未插入”）；
}
} 
}); 
});

您的php本身，请注意，我并没有将您的代码更改为PDO或mysqli，但您应该对此进行研究
<?php
include('connection.php');
//Pull data from home.php front-end page

$response = new StdClass();

$name=mysql_escape_string($_POST['name']);
$rno=mysql_escape_string($_POST['rno']);
$address=mysql_escape_string($_POST['address']);

//Insert Data into mysql
$query=mysql_query("INSERT INTO school(name,rno,address) VALUES('$name','$rno','$address')");

// Add the insert to the response
$response->insert = !$query ? false : true;

// Only continue if its true
if ($response->insert) {
$dispquery=mysql_query("select * from school");
    $response->output = '';
    $response->output .= "
        <table border=1>
        <tr>
        <td>Srno</td>
        <td>Name</td>
        <td>Rno</td>
        <td>Address</td>
        </tr>";
    $i=1;

    while($result=mysql_fetch_array($dispquery)) {
        $response->output .= "
        <tr>
        <td>$i</td>
        <td>{$result['name']}</td>
        <td>{$result['rno']}</td>
        <td>{$result['address']}</td>
        </tr>";
        $i++;
    }
    $response->output .= "</table>";
}

header('Content-Type: application/json');
echo json_encode($response);

即使是JSON，他的if
语句也不兼容>>