使用AJAX将数据库记录加载到表中？

时间：2022-10-06 12:23:27

I have been given a code to modify for database records on a website using ajax.

我已经获得了一个代码,用于使用ajax修改网站上的数据库记录。

I have the function correctly querying data but the table displayed does not get any of the records displayed with in it. I have code of the functions and the html below.

我有正确查询数据的功能,但显示的表没有显示任何记录。我有函数代码和下面的html。

Please see this link of current version: http://www.eng.nene.ac.uk/~10406206/CSY2028/Ajax/Ajax.html

请查看当前版本的链接:http://www.eng.nene.ac.uk/~10406206/CSY2028/Ajax/Ajax.html

Function of loadrecords with a callback not sure why a callback is used

具有回调的loadrecords的功能不确定为什么使用回调

<script language="Javascript">

var xmlHttpReq = false;
var xmlHttpReq2 = false;
var xmlHttpReq3 = false;

function loadDatabaseRecordsCallback () 
{
    if (xmlHttpReq.readyState == 4) 
{            
   alert ("From Server (Load Records):List.php" + xmlHttpReq.responseText);

    var record = xmlHttpReq.responseXML.getElementsByTagName('record');
    var s = "";
    for (var i = 0; i < record.length; i ++)
    {
    var rec = record[i];

    var id = rec.getElementsByTagName("ID")[0].firstChild.data;
    var carname = rec.getElementsByTagName("CARNAME")[0].firstChild.data;
    var fueltype = rec.getElementsByTagName("FUELTYPE")[0].firstChild.data;
    var transmission = rec.getElementsByTagName("TRANSMISSION")[0].firstChild.data;
    var enginesize = rec.getElementsByTagName("ENGINESIZE")[0].firstChild.data;
    var doors = rec.getElementsByTagName("DOORS")[0].firstChild.data;
    var total = rec.getElementsByTagName("TOTAL")[0].firstChild.data;
    var available = rec.getElementsByTagName("AVAILABLE")[0].firstChild.data;
    appendRecord (id, carname, fueltype, transmission, enginesize, doors, total, available);
    }
}
}

function loadDatabaseRecords () 
{
    // Mozilla/Safari
    if (window.XMLHttpRequest) 
    {
        xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) 
    {
        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }

    alert ("To Server (Load Records): List.php");

    xmlHttpReq.open('GET', "List.php", true);
xmlHttpReq.onreadystatechange = loadDatabaseRecordsCallback; 
xmlHttpReq.send(null);
}

on the same page as the function is the table which is below

在同一页面上,函数是下面的表格

<body>
  <form name="f1">
    <input value="Load Database" type="button" onclick='JavaScript:loadDatabaseRecords()'></p>
  </form>
  <table id="DBTable"  border="2">
    <tr>
      <td width="20">ID</td>
      <td width="100">Car Name</td>
      <td width="100">Fuel Type</td>
      <td width="100">Transmission</td>
      <td width="80">Engine size</td>
      <td width="20">Doors</td>
      <td width="20">Total</td>
      <td width="20">Available</td>
     </tr>
     <form name="myform">
     <tr>
      <td><input type="text" name="id"></td>
      <td><input type="text" name="carname"></td>
      <td><input type="text" name="fueltype"></td>
      <td><input type="text" name="transmission"></td>
      <td><input type="text" name="enginesize"></td>
      <td><input type="text" name="doors"></td>
      <td><input type="text" name="total"></td>
      <td><input type="text" name="available"></td>
      <td colspan="2"><input type="button" value="add" onClick="JavaScript:addNewRecord()"></td>
<td colspan="2"><input type="checkbox" value="update" onClick="JavaScript:updateRecord()"></td>
<td colspan="2"><input type="checkbox" value="delete" onClick="JavaScript:deleteRecord()"></td>
     </tr>
     </form>
  </table>
</body>

The function calls the List.php which is coded as follows

该函数调用List.php,其编码如下

<?php
  $link = mysql_connect ("194.81.104.22", "********", "*****");
  mysql_select_db ("*******");

  $query = "SELECT * from XYZ";
  $result = mysql_query ($query);


 for ($i = 0; $i < mysql_num_rows ($result); $i ++)
  {        
    $row = mysql_fetch_object ($result);
    print "<b>Car Name:</b> <i>$row->CARNAME</i><br>";
    print "<b>Fuel Type:</b> <i>$row->FUELTYPE</i><br>";
    print "<b>Transmission:</b> <i>$row->TRANSMISSION</i><br>";
    print "<b>Total:</b> <i>$row->TOTAL</i><br>";
    print "<b>Available:</b> <i>$row->AVAILABLE</i><br><br>";
  }

  mysql_close ($link);
?>

So, if you have seen the website you will see that you press the load database button and a box appears with all the database entries. However, once you press enter the table on the page remains empty.

因此,如果您已经看过该网站,您将看到按下加载数据库按钮,会出现一个包含所有数据库条目的框。但是,一旦按下输入,页面上的表格仍为空。

My question is why? can you explain to me where the problem is?

我的问题是为什么?你能告诉我问题出在哪里吗?

New to Ajax and apologies if I broke rules on posts it's my first one.

Ajax的新手,如果我在帖子上违反规则,这是我的第一个道歉。

2 个解决方案

#1

0  

I am not clear with php, but I remember from my asp + ajax experiences:

我不清楚PHP,但我记得我的asp + ajax经验:

You bring data back to your browser, but you should "re-paint" the page - you can do this in javascript, or may-be PHP has some ready solutions for this.

您将数据带回浏览器,但您应该“重新绘制”页面 - 您可以在javascript中执行此操作,或者可能是PHP有一些现成的解决方案。

When you validated your method appendRecord receive valid values - find your table (DBTable) with javascript by id, and update the values of the row / columns by your record.

验证方法后,appendRecord会收到有效值 - 使用javascript by id查找表(DBTable),并按记录更新行/列的值。

I'd recommend you to take a look on http://www.w3schools.com/php/php_ajax_database.asp

我建议你看看http://www.w3schools.com/php/php_ajax_database.asp

#2

0  

You bring data back to your browser, but you should "re-paint" the page - you can do this in javascript, or may-be PHP has some ready solutions for this.

您将数据带回浏览器,但您应该“重新绘制”页面 - 您可以在javascript中执行此操作,或者可能是PHP有一些现成的解决方案。

When you validated your method appendRecord receive valid values - find your table (DBTable) with javascript by id, and update the values of the row / columns by your record.

验证方法后,appendRecord会收到有效值 - 使用javascript by id查找表(DBTable),并按记录更新行/列的值。

#1

0  

I am not clear with php, but I remember from my asp + ajax experiences:

我不清楚PHP,但我记得我的asp + ajax经验:

You bring data back to your browser, but you should "re-paint" the page - you can do this in javascript, or may-be PHP has some ready solutions for this.

您将数据带回浏览器,但您应该“重新绘制”页面 - 您可以在javascript中执行此操作,或者可能是PHP有一些现成的解决方案。

When you validated your method appendRecord receive valid values - find your table (DBTable) with javascript by id, and update the values of the row / columns by your record.

验证方法后,appendRecord会收到有效值 - 使用javascript by id查找表(DBTable),并按记录更新行/列的值。

I'd recommend you to take a look on http://www.w3schools.com/php/php_ajax_database.asp

我建议你看看http://www.w3schools.com/php/php_ajax_database.asp

#2

0  

You bring data back to your browser, but you should "re-paint" the page - you can do this in javascript, or may-be PHP has some ready solutions for this.

您将数据带回浏览器,但您应该“重新绘制”页面 - 您可以在javascript中执行此操作,或者可能是PHP有一些现成的解决方案。

When you validated your method appendRecord receive valid values - find your table (DBTable) with javascript by id, and update the values of the row / columns by your record.

验证方法后,appendRecord会收到有效值 - 使用javascript by id查找表(DBTable),并按记录更新行/列的值。

标签：

相关文章