簡體   English   中英

使用jquery ajax顯示所有記錄

[英]to display all records using jquery ajax

我已經編寫了用於在同一頁面上顯示記錄的代碼,但它不起作用。實際上我想在我插入的頁面中,同一頁面應該以表格格式顯示所有記錄,並且還顯示最近添加的記錄而沒有刷新頁面。

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>

demo_insert.php

<?
    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調用的回調函數中,您將獲得可用於使用.append().html()等函數填充表的數據。 要查看您的Ajax調用從PHP腳本返回的內容,請將console.log(data)放入回調中,然后您可以使用它來確切了解您希望如何生成內容。

此外,不推薦使用PHP mysql擴展。 請用mysqliPDO替換它。

首先,請使用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>

和你的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);

?>

您的if語句與您返回的內容不兼容。 您正在使用html表進行響應,並在成功回調中將其視為一個簡單變量。

success:function(data){
       if(data="inserted") {
          alert("Insertion Success");
        } else {
          alert("Not Inserted"); 
        }
     } 

您希望將data附加到DOM或使用它執行其他操作。 基於你的php,你想要把它附加到某個地方。

很少的事情,我看到的幾個問題的概括性答案

通常,如果您正在遵循php編碼的某種MVC結構,則需要將Read查詢邏輯與Update,Insert邏輯等分開。

所以,在你的php上,如果你將插入封裝在一個函數或單獨的頁面中,你可以返回一個布爾值,如果插入成功,然后通過成功函數中的另一個ajax getJson調用你的讀表查詢

在php中你通常想要返回你的查詢結果集echo json_encode($ results)

然后在你的javascript中,一旦ajax完成()(用於處理ajax json成功的最新jquery方法)或success(),你可以使用$ .each迭代結果集

如果您感興趣我可以提供更多代碼示例

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM