如何将参数传递给自定义函数时修复带有onchange()事件的未捕获引用错误?

Question

我正在尝试创建一个订单系统，一旦用户更新订单的状态，它也会在服务器中更新它，而无需每次刷新页面(因为这似乎很乏味(。

问题是，我在更改时生成了 JavaScript 错误：

未捕获的引用错误

以下是显示订单的函数：

function showOrders()
{
global $con;
$getOrders = "SELECT * FROM `Purchase_Order`";
$rungetOrders = mysqli_query($con, $getOrders);
$getOrder = "SELECT * FROM `Purchase_Order` WHERE status = 'pending' ORDER BY date ASC";
$rungetOrders = mysqli_query($con, $getOrder);
echo '<form action ="PurchaseOrders.php">
<table style="border :1px solid black; border-collapse: collapse; width: 1300px; margin-bottom: 50px; margin-top: 5px; font-size:20px "> 
<tr style="border :1px solid black; background-color: black; color: whitesmoke">
<th>ORDER #</th>
<th>PRODUCT ID</th>
<th>COLOR</th>
<th>SIZE</th>
<th>QTY</th>
<th>DATE ORDERED</th>
<th>STATUS</th>
</tr>';  
$counter = 0;
while($row = mysqli_fetch_array($rungetOrders))
{
$ordernum = $row['OrderNum'];
$product_id = $row['product_id'];
$product_color = $row['product_color'];
$product_size = $row['product_size'];
$product_quantity = $row['product_quantity'];
$date = $row['date'];
$status = $row['status'];
if($counter% 2 == 0)
{
$bg = 'rgba(50,205,50, 0.2);';   
} else {
$bg = ''; 
}
if ($status === "shipped")
{
$newstat = "pending";
} else {
$newstat = "shipped";
}
echo '<tr style="background-color:'.$bg.'">
<td>'.$ordernum.'</td>
<td>'.$product_id.'</td>
<td>'.$product_size.'</td>
<td>'.$product_color.'</td>
<td>'.$product_quantity.'</td>
<td>'.$date.'</td>
<td><select name="status" onchange="ship('.$ordernum.','.$product_id.')"><option>'.$status.'</option><option>'.$newstat.'</option</td>
</tr>';
$counter++;
}
}

这是我放在执行函数的页面上的 ajax：

<script type="text/javascript">
function ship(order,id) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
alert('triggered');
};
xhttp.open("GET", "updateStatus.php?update=false&order="+order+"&id="+id, true);
xhttp.send();
}
</script>

这是我在更新状态.php文件中的内容：

if(isset($_GET['update']))
{
$update = $_GET['update'];
$id = $_GET['id'];
$order = $_GET['order'];
$make = "UPDATE `Purchase_Order` SET `status`='shipped' WHERE `OrderNum` = $order AND `product_id` = $id";
$runmake = mysqli_query($con, $make);
if($runmake)
{
echo "go";
} else {
echo "stop";
}
}

我对 AJAX 很陌生。请帮助我了解我做错了什么。

Answer 1

在这一行：

<select name="status" onchange="ship('.$ordernum.','.$product_id.')"><option>'.$status.'</option><option>'.$newstat.'</option</td>

有几个问题。

• 您尚未关闭</option>结束标记。
• 您尚未编写结束</select>标记。
• 如果您的$ordernum或product_id值是字符串，则需要将它们括起来，否则您将生成一个Uncaught ReferenceError：

未捕获的引用错误：[值] 未在 HTMLSelectElement.onchange 中定义

以下是我的一些脚本和建议以及我的评论中的支持链接：

表单 PHP：https://3v4l.org/D7TY9

JSFiddle： https://jsfiddle.net/v0Lzatqh/11/

使用 CSS 替代表格行颜色？

以下是我从评论中得到的建议(以便我可以删除我的评论(：

如果你不需要$update(我认为你不需要(，不要声明它。 如果要在查询中使用用户提供的数据，则需要 采取安全措施。对于您的情况，我相信$id和$order是 整数，所以只需在之前强制转换它们(使用 (int($id 和 (int($order( 构建查询。如果不是，则应将预准备语句与占位符一起使用。声明新变量以保存结果集数据是 无用($ordernum = $row['OrderNum'](;省去你的代码一些臃肿和 仅通过回显$row变量来显示潜在的故障点。哪里 您的脚本是否失败？

许多开发人员不会声明全局变量，而是会敦促您 简单地将$con变量作为 参数如下：function showOrders($con) {

你有$con(实时连接(@updateStatus.php吗？你应该是 在脚本中执行错误检查或至少检查 在此处发布问题之前，您的错误会记录下来。这些细节是 需要作为完整问题的一部分，它们使它变得容易得多 让我们为您提供帮助。if($runmake)只会检查"无语法 错误"在查询中。尝试确定数据库是否 已受到影响，您需要在 查询被视为无错误。

您应该注释掉或删除$getOrders = "SELECT * FROM Purchase_Order"; $rungetOrders = mysqli_query($con, $getOrders);因为这些行被覆盖/未使用。除非你有 迫切需要区分数据库表结构， 我会从您的列中删除product_前缀以制作您的代码 更简洁。

如果仅对表格数据执行 ajax 操作，则不需要<form>标记。