[英]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>";
?>
首先,請使用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.