Я использую систему delete by ID. Пользователь вводит идентификатор записи, которую он хочет удалить, и делается это через PHP. Это все работает, и при успешном удалении небольшое окно предупреждения подтверждает это и возвращается на исходную страницу, на которой показана запись. Тем не менее, я бы хотел использовать AJAX таким образом, чтобы не обновлять страницу и удерживать таблицу на экране.
<head> <title>ajax_test</title> <script language="javascript" type="text/javascript" src="prototype.js"></script> <script> function updateDIV(myDiv) { var url='delete.php'; var params = 'id'; var myAjax = new Ajax.Updater(myDiv, url, {method: 'get', parameters: params}); } </script> </head> <body> <form action="delete.php" method="get"> <input type="text" name="id" placeholder="ID" /> <input type="submit" value="Delete" onclick="updateDIV(targetDiv)" /> <div id="targetDiv"></div> </form> </body> Как вы, наверное, видите, это не работает. Есть ли какие-то вопиющие проблемы, которые я должен исследовать дальше?
Измените функцию updateDIV на следующее:
<script type="text/javascript"> function updateDIV(myDiv) { var url='delete.php'; var id = $F($('id')); var myAjax = new Ajax.Updater(myDiv, url, {method: 'get', parameters: 'id='+id}); } </script>
и добавьте значение id к вашему вводу:
<body> <form action="delete.php" method="get"> <input type="text" id="id" name="id" placeholder="ID" /> <input type="submit" value="Delete" onclick="updateDIV(targetDiv)" /> <div id="targetDiv"></div> </form> </body>
$ F – это функция прототипа, которая получает значение элемента. Затем в вашем php-коде вы можете получить идентификатор с $ _GET ['id'].
Вот полный исходный код для удаления записи без обновления страницы.
Следуйте шагам:
Шаг 1:
DBConnect.php
class DBConnect { function DBConnect() { $link= mysql_connect("localhost","root","")or die("Local Host Error".mysql_error()); mysql_select_db("test"); } function viewData() { $query = "SELECT * FROM test_mysql"; $resultset = mysql_query($query); return $resultset; } function DeleteData($userID) { $query = "DELETE FROM test_mysql WHERE id=".$userID; $resultset=mysql_query($query) ; } }
Шаг 2:
delete.php
include_once'DBConnect.php'; if(isset($_REQUEST['userid']) && $_REQUEST['userid']) { $delObj= new DBConnect(); $delObj->DeleteData($_REQUEST['userid']); }
Шаг 3:
index.php
<html> <head> <title></title> <script type="text/javascript"> function deletedata(id) { var xmlhttp; if (id=="") { document.getElementById("Display").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { window.location.reload() } } xmlhttp.open("GET","delete.php?userid="+id,true); xmlhttp.send(); } </script> </head> <body> <?php include 'DBConnect.php'; $ViewObj= new DBConnect(); $ResultSet=$ViewObj->viewData(); ?> <span id ="Display"> <table align="center" border="1" width="50%" cellpadding="4" cellspacing="4"> <tr> <th>ID</th> <th>Name</th> <th>operation</th> <th align="center">Action</th> </tr> <?php while($row= mysql_fetch_array($ResultSet)) { ?> <tr> <td><?php echo $row[0];?></td> <td><input type="text" name="txt"></td> <td><?php echo $row[1];?></td> <td align="center"><a href="#" onClick="deletedata('<?php echo $row[0];?>')" style="color:#00F"><b>Delete</b></a></td> </tr> <?php } ?> </table> </span> </body> </html>
если вы чувствуете какую-либо проблему, тогда, пожалуйста, дайте мне знать. Надеюсь, это поможет вам. Спасибо.