javascript - Ajax 从 mysql 查询填充表单

标签 javascript php jquery mysql ajax

我正在尝试使用 Ajax 填充表单。

为了实现这一目标，我遵循 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 表格。

请帮我解决这个问题。

最佳答案

我已经成功解决了这个问题，让我解释一下出了什么问题。

我的 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>

现在让我向您展示屏幕截图，请注意“输入您的 Assets 条形码以从库存系统中提取数据。它当前为空/空白。

enter image description here

现在让我输入一个条形码，看看它是否会自动填充表单。

enter image description here

关于javascript - Ajax 从 mysql 查询填充表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26159032/

上一篇：php - 无法使用 codeigniter 将数据插入数据库

下一篇：mysql - 额外的列显示 mdn 表中的位置、使用临时、使用文件排序。在哪里应用适当的索引

相关文章：

javascript - 长方程与覆盖变量

跳过 if 直接进入 else 语句的 PHP 代码

php - php.ini 中的 max_input_vars 更改后未更新

php - 如果它在行中，如何在不选择两次的情况下在 MYSQL 中选择某些内容

javascript - 鼠标滚轮移动时调用函数

javascript - 内联 javascript Uncaught ReferenceError

javascript - 从文件的完整路径到只显示文件名

php - 为什么它不能只突出显示新数据？

javascript - 为什么我的 collection.upsert() 查询没有为集合设置多个参数？

javascript - jQuery - 获取元素的类

©2024 IT工具网  联系我们