Ajax從MySQL查詢填充表格

要做到這一點，我從http://www.crackajax.net/popform.php

但是下面的指南，它似乎並沒有爲我工作。下面是代碼：

我form.html：

<tbody> 

<tr> 
    <td class="label"><label for="barcode">barcode</label></td> 
    <td class="value"> 
     <input id="barcode" name="product[barcode]" type="text" onKeyUp="getagentids();">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="traccategory">Array</label></td> 
    <td class="value"> 
     <input id="traccategory" name="product[traccategory]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_model">model</label></td> 
    <td class="value"> 
     <input id="trac_model" name="product[trac_model]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_serial">serial</label></td> 
    <td class="value"> 
     <input id="trac_serial" name="product[trac_serial]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_proctype">proctype</label></td> 
    <td class="value"> 
     <input id="trac_proctype" name="product[trac_proctype]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_hdd">trac_hdd</label></td> 
    <td class="value"> 
     <input id="trac_hdd" name="product[trac_hdd]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_type">trac_type</label></td> 
    <td class="value"> 
     <input id="trac_type" name="product[trac_type]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_cond">trac_cond</label></td> 
    <td class="value"> 
     <input id="trac_cond" name="product[trac_cond]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_drive">trac_drive</label></td> 
    <td class="value"> 
     <input id="trac_drive" name="product[trac_drive]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_os">trac_os</label></td> 
    <td class="value"> 
     <input id="trac_os" name="product[trac_os]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_cpu">trac_cpu</label></td> 
    <td class="value"> 
     <input id="trac_cpu" name="product[trac_cpu]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_ram">trac_ram</label></td> 
    <td class="value"> 
     <input id="trac_ram" name="product[trac_ram]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_manu">trac_manu</label></td> 
    <td class="value"> 
     <input id="trac_manu" name="product[trac_manu]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_testedby">trac_testedby</label></td> 
    <td class="value"> 
     <input id="trac_testedby" name="product[trac_testedby]" value="" class=" input-text" type="text">   </td> 
    </tr> 

      </tbody>

這裏是JavaScript：

<script language="javascript" type="text/javascript"> 
<!-- 
//Browser Support Code 
function ajaxFunction(){ 
var ajaxRequest; // The variable that makes Ajax possible! 
try{ 
// Opera 8.0+, Firefox, Safari 
ajaxRequest = new XMLHttpRequest(); 
} catch (e){ 
// Internet Explorer Browsers 
try{ 
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
} catch (e) { 
try{ 
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (e){ 
// Something went wrong 
alert("Your browser broke!"); 
return false; 
} 
} 
} 

var url = "getdata.php?param="; 
function getagentids() { 
var idValue = document.getElementById("barcode").value; 
var myRandom = parseInt(Math.random()*99999999); // cache buster 
http.open("GET", url + escape(idValue) + "&rand=" + myRandom, true); 
http.onreadystatechange = handleHttpResponse; 
http.send(null); 
function handleHttpResponse() { 
if (http.readyState == 4) { 
results = http.responseText.split(","); 

locument.getElementById('barcode').value = results[1]; 
document.getElementById('model').value = results[2]; 
document.getElementById('serial').value = results[3]; 
document.getElementById('proctype').value = results[4]; 

document.getElementById('trac_hdd').value = results[5]; 
document.getElementById('trac_type').value = results[6]; 
document.getElementById('trac_cond').value = results[7]; 
document.getElementById('trac_drive').value = results[8]; 
document.getElementById('trac_os').value = results[9]; 
document.getElementById('trac_cpu').value = results[10]; 
document.getElementById('trac_ram').value = results[11]; 
document.getElementById('trac_manu').value = results[12]; 
document.getElementById('trac_testedby').value = results[13]; 

} 
} 
var idValue = document.getElementById("barcode").value; 
var myRandom = parseInt(Math.random()*99999999); // cache buster 
ajaxDisplay.open("GET", "getdata.php" + escape(idValue) + "&rand=" + myRandom, true); 
ajaxRequest.send(null); 
} 
//--> 
</script>

最後我訪問getdata.php看起來是這樣的。

<?php 
    $con = mysql_connect("localhost", "root", "testest"); 
    if (!$con) { 
    die('Could not connect: ' . mysql_error()); 
    } 
    mysql_select_db("pos", $con); 
    if (strlen($param) > 0) { 
    $result = mysql_query("SELECT 
    category.short_description AS category, 
    asset.asset_code AS code, 
    asset_model_number.short_description AS model, 
    asset_custom_field_helper.cfv_1 AS mnfserial, 
    asset_custom_field_helper.cfv_6 AS proctype, 
    asset_custom_field_helper.cfv_7 AS hdd, 
    asset_custom_field_helper.cfv_8 AS type, 
    asset_custom_field_helper.cfv_9 AS cond, 
    asset_custom_field_helper.cfv_10 AS drive, 
    asset_custom_field_helper.cfv_12 AS os, 
    asset_custom_field_helper.cfv_13 AS cpu, 
    asset_custom_field_helper.cfv_14 AS ram, 
    manufacturer.short_description AS Manu, 
    user_account.username AS testedby, 
    COUNT(*) AS total 
FROM 
    asset_transaction 
LEFT JOIN asset 
    ON asset_transaction.asset_id = asset.asset_id 
LEFT JOIN asset_model 
    ON asset.asset_model_id = asset_model.asset_model_id 
LEFT JOIN asset_model_number 
    ON asset.asset_model_number_id = asset_model_number.asset_model_number_id 
LEFT JOIN asset_custom_field_helper 
    ON asset.asset_id = asset_custom_field_helper.asset_id 
LEFT JOIN user_account 
    ON asset.created_by = user_account.user_account_id 
LEFT JOIN category 
    ON asset_model.category_id = category.category_id 
LEFT JOIN manufacturer 
    ON asset_model.manufacturer_id = manufacturer.manufacturer_id 


WHERE asset.asset_code LIKE '$param%'"); 
    if (mysql_num_rows($result) == 1) { 
    while ($myrow = mysql_fetch_array($result)) { 
    $category = $myrow["category"]; 
    $code = $myrow["code"]; 
    $model = $myrow["model"]; 
    $mnfserial = $myrow["mnfserial"]; 
    $proctype = $myrow["proctype"]; 
    $hdd = $myrow["hdd"]; 
    $drive = $myrow["drive"]; 
    $os = $myrow["os"]; 
    $cpu = $myrow["cpu"]; 
    $ram = $myrow["ram"]; 
    $manu = $myrow["Manu"]; 
    $testedby = $myrow["testedby"]; 

    $textout .= $category . "," . $code . "," . $model . "," . $mnfserial . "," . $proctype . "," . $hdd . "," . $type . "," . $cond . "," . $drive . "," . $os . "," . $cpu . "," . $ram . "," . $manu . "," . $testedby; 
    } 
    } else { 
    $textout = " , , ," . $param; 
    } 
    } 
    echo $textout; 
    mysql_close($con); 
    ?>

現在的問題是，我沒有得到任何錯誤，但此代碼不起作用。我想在輸入第一個條形碼時填充上面的html表格。

請幫我解決這個問題。

來源

2014-10-02 user2107349

我首先推薦閱讀jQuery的嘖嘖orial得到一些時間來理解它比閱讀http://stackoverflow.com/questions/635565/walk-json-response-and-populate-form-fields-more-efficient-approach，閱讀有關在PHP中使用JSON，您的代碼將縮小80％，您將獲得更快的學習速度並使用更少的時間開發應用程序。還要更改PHP部分以使用較不復雜的SQL，以便您可以輕鬆掌握基本知識，而不是在遇到特定問題時提出具體問題。 – BojanT 2014-10-02 10:46:50

太老實了我不是開發人員，我只是想讓這件事情起作用，請你幫忙嗎？ – user2107349 2014-10-02 10:48:36

BojanT，請你幫我實現我上面解釋的嗎？ – user2107349 2014-10-02 11:26:52

我已經設法解決這個問題，讓我解釋什麼是錯的。

我的getdata.php不正確，我試圖訪問沒有正確定義的「param」變量。所以我將其定義爲一個變量。

$param = $_GET["param"];

所以這裏是我用來修復它的完整的getdata.php代碼。

<?php 
    $con = mysql_connect("localhost", "root", ""); 
      if (!$con) { 
      die('Could not connect: ' . mysql_error()); 
        } 
$param = $_GET["param"]; 

    mysql_select_db("pos", $con); 
      if (strlen($param) > 0) { 
       $result = mysql_query("SELECT 
       category.short_description AS category, 
       asset.asset_code AS code, 
       asset_model_number.short_description AS model, 
       asset_custom_field_helper.cfv_1 AS mnfserial, 
       asset_custom_field_helper.cfv_6 AS proctype, 
       asset_custom_field_helper.cfv_7 AS hdd, 
       asset_custom_field_helper.cfv_8 AS type, 
       asset_custom_field_helper.cfv_9 AS cond, 
       asset_custom_field_helper.cfv_10 AS drive, 
       asset_custom_field_helper.cfv_12 AS os, 
       asset_custom_field_helper.cfv_13 AS cpu, 
       asset_custom_field_helper.cfv_14 AS ram, 
       manufacturer.short_description AS Manu, 
       user_account.username AS testedby 
      FROM 
       asset_transaction 
       LEFT JOIN asset 
       ON asset_transaction.asset_id = asset.asset_id 
       LEFT JOIN asset_model 
       ON asset.asset_model_id = asset_model.asset_model_id 
       LEFT JOIN asset_model_number 
       ON asset.asset_model_number_id = 
       asset_model_number.asset_model_number_id 
       LEFT JOIN asset_custom_field_helper 
       ON asset.asset_id = asset_custom_field_helper.asset_id 
       LEFT JOIN user_account 
       ON asset.created_by = user_account.user_account_id 
       LEFT JOIN category 
       ON asset_model.category_id = category.category_id 
       LEFT JOIN manufacturer 
       ON asset_model.manufacturer_id = manufacturer.manufacturer_id 


WHERE asset.asset_code LIKE '$param%' limit 1"); 
    if (mysql_num_rows($result) == 1) { 
    while ($myrow = mysql_fetch_array($result)) { 
    $category = $myrow["category"]; 
    $code = $myrow["code"]; 
    $model = $myrow["model"]; 
    $mnfserial = $myrow["mnfserial"]; 
    $proctype = $myrow["proctype"]; 
    $hdd = $myrow["hdd"]; 
    $type = $myrow["type"]; 
    $cond = $myrow["cond"]; 
    $drive = $myrow["drive"]; 
    $os = $myrow["os"]; 
    $cpu = $myrow["cpu"]; 
    $ram = $myrow["ram"]; 
    $manu = $myrow["Manu"]; 
    $testedby = $myrow["testedby"]; 

    $textout .= $code . "," . $category . "," . $model . "," . $mnfserial . "," . $proctype . "," . $hdd . "," . $type . "," . $cond . "," . $drive . "," . $os . "," . $cpu . "," . $ram . "," . $manu . "," . $testedby; 
    } 
    } else { 
    $textout = ", , , , , , , , , , , , , " . $param; 
    } 
    } 
    echo $textout; 
    mysql_close($con); 
    ?>

這裏是處理AJAX數據的JavaScript。

<script> 
var url = "/getdata.php?param="; 
function handleHttpResponse() { 
     if (http.readyState == 4) { 
     results = http.responseText.split(","); 

document.getElementById('barcode').value = results[0]; 
document.getElementById('trac_model').value = results[2]; 
document.getElementById('trac_serial').value = results[3]; 
document.getElementById('trac_proctype').value = results[4]; 
document.getElementById('trac_hdd').value = results[5]; 
document.getElementById('trac_type').value = results[6]; 
document.getElementById('trac_cond').value = results[7]; 
document.getElementById('trac_drive').value = results[8]; 
document.getElementById('trac_os').value = results[9]; 
document.getElementById('trac_cpu').value = results[10]; 
document.getElementById('trac_ram').value = results[11]; 
document.getElementById('trac_manu').value = results[12]; 
document.getElementById('trac_testedby').value = results[13]; 
document.getElementById('traccategory').value = results[1]; 

document.getElementById('name').value = results[12] +" "+ results[1] +" "+ results[2] +", "+ results[11] + " RAM, " + results[10] + " Ghz , " + results[4] +" Processor, "+ results[5] +" HDD, Powerful Machine" ; 

} 
} 
function getagentids() { 
     var idValue = document.getElementById("coda").value; 
     var myRandom=parseInt(Math.random()*99999999); // cache buster 
     http.open("GET", url + escape(idValue) + "&amp;rand=" + myRandom, true); 
     http.onreadystatechange = handleHttpResponse; 
     http.send(null); 
     } 


function getHTTPObject() { 
     var xmlhttp; 
     /*@cc_on 
     @if (@_jscript_version &gt;= 5) 
      try { 
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
       } catch (e) { 
       try { 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (E) { 
        xmlhttp = false; 
        } 
       } 
     @else 
      xmlhttp = false; 
     @end @*/ 
     if (typeof XMLHttpRequest != 'undefined') { 
     try { 
      xmlhttp = new XMLHttpRequest(); 
      } catch (e) { 
      xmlhttp = false; 
      } 
      } 
      return xmlhttp; 
     } 


var http = getHTTPObject(); // We create the HTTP Object 

    </script>

然後在與上面的javascript相同的文件中，我有一個窗體，用於輸入條形碼從數據庫中提取數據。這是表格。

<form name="schform"> <table> 
<tr> 
    <td class="label"><label for="barcode">Enter your Asset Barcode to Pull the data from Inventory System</label></td> 
    <td class="value"> 
     <input id="coda" name="coda" type="text" onKeyUp="getagentids();">   </td> 
    </tr> 
</tr> </table> </form>

然後，我要填寫上述相同的文件中的窗體。

<tbody> 

<tr> 
    <td class="label"><label for="barcode">barcode</label></td> 
    <td class="value"> 
     <input id="barcode" name="product[barcode]" value="" class=" input-text" type="text"> 
    </tr> 

<tr> 
    <td class="label"><label for="traccategory">Array</label></td> 
    <td class="value"> 
     <input id="traccategory" name="product[traccategory]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_model">model</label></td> 
    <td class="value"> 
     <input id="trac_model" name="product[trac_model]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_serial">serial</label></td> 
    <td class="value"> 
     <input id="trac_serial" name="product[trac_serial]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_proctype">proctype</label></td> 
    <td class="value"> 
     <input id="trac_proctype" name="product[trac_proctype]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_hdd">trac_hdd</label></td> 
    <td class="value"> 
     <input id="trac_hdd" name="product[trac_hdd]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_type">trac_type</label></td> 
    <td class="value"> 
     <input id="trac_type" name="product[trac_type]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_cond">trac_cond</label></td> 
    <td class="value"> 
     <input id="trac_cond" name="product[trac_cond]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_drive">trac_drive</label></td> 
    <td class="value"> 
     <input id="trac_drive" name="product[trac_drive]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_os">trac_os</label></td> 
    <td class="value"> 
     <input id="trac_os" name="product[trac_os]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_cpu">trac_cpu</label></td> 
    <td class="value"> 
     <input id="trac_cpu" name="product[trac_cpu]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_ram">trac_ram</label></td> 
    <td class="value"> 
     <input id="trac_ram" name="product[trac_ram]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_manu">trac_manu</label></td> 
    <td class="value"> 
     <input id="trac_manu" name="product[trac_manu]" value="" class=" input-text" type="text">   </td> 
    </tr> 

<tr> 
    <td class="label"><label for="trac_testedby">trac_testedby</label></td> 
    <td class="value"> 
     <input id="trac_testedby" name="product[trac_testedby]" value="" class=" input-text" type="text">   </td> 
    </tr> 

      </tbody>

現在讓我告訴你它的外觀，注意到「輸入您的資產條碼，從庫存系統中提取數據，這是目前空/空。

enter image description here

現在截圖讓我把一個條形碼，看它是否自動填充表單。

enter image description here

來源

2014-10-03 08:44:35 user2107349

Ajax從MySQL查詢填充表格

回答

相關問題