将参数传递给自定义函数时，如何使用 onchange() 事件修复 Uncaught ReferenceError？

Question

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

问题是，我在更改时生成 javascript 个错误：

Uncaught ReferenceError

这是显示订单的函数：

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>

这是我在 updateStatus.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:

Uncaught ReferenceError: [thevalue] is not defined at HTMLSelectElement.onchange

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

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

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

Alternate table row color using CSS?

以下是我从评论中得到的建议（这样我就可以删除我的评论）：

If you don't need $update (and I don't think you do), don't declare it. If you are going to use user-supplied data in a query, you need to take security measures. For your case, I believe $id and $order are integers, so just cast them (using (int)$id and (int)$order) before building your query. If they are not, you should use prepared statements with placeholders. Declaring new variables to hold resultset data is useless ($ordernum = $row['OrderNum']); spare your code some bloat and potential points of failure by just echoing the $row variables. Where is your script failing?

Rather than declaring a global variable, many developers will urge you to simply pass the $con variable into the function scope as a parameter like this: function showOrders($con) {

Do you have a $con (live connection) @ updateStatus.php? You should be performing error checks in your script or at the very least checking your error logs before posting a question here. These details are required as part of a complete question and they make it much easier for us to help you. if($runmake) will only check for "no syntax errors" in the query. When trying to determine whether the database has been affected, you will need to count the affected rows after the query is deemed to be error-free.

You should comment out or delete $getOrders = "SELECT * FROM Purchase_Order"; $rungetOrders = mysqli_query($con, $getOrders); because those lines are overwritten/not used. Unless you have a compelling need for the distinction in your database table structure, I would remove the product_ prefix from your columns to make your code more concise.

You won't need <form> tags if you are only performing ajax operations on the tabular data.

将参数传递给自定义函数时，如何使用 onchange() 事件修复 Uncaught ReferenceError？

How to fix Uncaught ReferenceError with onchange() event when passing parameters to custom function?

javascript

php

onchange

function-call

function-parameter