我正在尝试使用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表格。
请帮我解决这个问题。
答案 0 :(得分:0)
我设法解决了这个问题,让我解释一下是什么问题。
我的getdata.php不对,我试图访问&#34; param&#34;未正确定义的变量。所以我定义为一个变量。
$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) + "&rand=" + myRandom, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 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>
现在让我向您展示它的外观截图,注意&#34;输入您的资产条形码以从库存系统中提取数据。它目前为空/空白。
现在让我输入一个条形码,看看它是否自动填充表格。