具有多个选择框条件的 Ajax 请求

Question

首先让我说，作为一种爱好，我刚刚开始学习 Web 开发的基础知识：html、css、javascript 和 php。

我正在尝试实现一个带有数据库查询的网页，但遇到了一些困难：

如果有人能告诉我如何进行，将不胜感激。

我不想让你为我编写整个代码，但可以给我一些提示和线索。

我有一个包含 Id、项目、价格 1、价格 2 和价格 3 的表。

经过大量搜索后，我设法将所有项目动态加载到选择列表中，并根据使用 ajax 调用选择的项目在带有 on change 事件的 div 上显示 (price1)。

现在我需要根据另外两个选择列表更新此价格 div：一个具有 3 个值（a、b、c），另一个具有（是或否）。

如果选择列表 2 是 (a)，选择列表 3 是 (yes)，则要显示的价格是 (price2)；如果选择列表 2 是 (b) 并且选择列表 3 是 (yes)，则要显示的价格是 (price3)，如果选择列表 3 选项是 (no)，那么加载的价格必须加倍。全部使用 ajax，无论选择顺序如何。

希望我说清楚了。 如果需要，我可以加载我的代码。

提前致谢。 瓦斯科

这是我目前所拥有的：

Ajax.php

<?php
db connection variables


if(!isset($_GET['id'])){
    echo json_encode(array('success' => false, 'price_1' => '', 'message' => 'no id given'));
    exit;
}

try {
    $conn = new PDO("mysql:host=$servername;dbname=test", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    trigger_error("Connection failed: " . $e->getMessage());
    echo json_encode(array('success' => false, 'price_1' => '', 'message' => 'shit happened' . $e->getMessage()));
    exit;
}

$stmt = $conn->prepare("SELECT price_1 FROM table WHERE id = ?");
$stmt->execute(array($_GET['id']));
$result = $stmt->fetch(PDO::FETCH_ASSOC);

if($result === false){
    trigger_error('Query failed: ' . $conn->errorInfo());
    echo json_encode(array('success' => false, 'price_1' => '', 'message' => 'shit happened'));
    exit;
} else {
    echo json_encode(array('success' => true, 'price_1' => $result['price_1'], 'message' => ''));
    exit;
}

index.php

<?php
Connection Variables
try {
    $conn = new PDO("mysql:host=$servername;dbname=test;charset=UTF8", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    trigger_error("Connection failed: " . $e->getMessage());
}
$query = "SELECT `id`, `items`, `price_1` FROM `table`";
$rows = $conn->query($query)->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
    <head>

       <script>
            function getPrice(id){
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        var jsonObj = JSON.parse(xmlhttp.responseText);
                        if(jsonObj.success === true){
                            document.getElementById("price_1").value = jsonObj.price_1;
                        }else{
                            document.getElementById("price_1").innerHTML = jsonObj.message;
                        }
                    }
                };
                xmlhttp.open("GET", "ajax.php?id=" + id, true);
                xmlhttp.send();
            }
        </script>
    </head>
<body>



<div>

<h3>GET A QUOTE</h3>



    Item:
    <br>
    <select name="price" id="priceSelect" onchange="getPrice(this.value)">
        <option>Please select:</option>
    <?php foreach ($rows as $row): ?>
        <option value="<?= $row['id'] ?>"><?= $row['items'] ?></option>
    <?php endforeach; ?>
    </select>
    <br>

    size:
    <br>
<select name="price" id="sizeselectSelect" onchange="sizePrice(this.value)">
        <option>Please select:</option>
        <option value="1">size1</option>
        <option value="2">size2</option>
        <option value="3">size3</option>
    </select>

<br>
        double:
        <br>
        <select name="bouble" id="doubleprice" onchange="lastprice(this.value)">
        <option>Please select:</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>
<br>
<br>
Total price:

    <input type="text" name="price_1[]" value="" id="price_1">&euro; 
    <p id="error"></p>


</body>
</html>

Answer 1

我会使用 jQuery 来简化 AJAX。

如果数据不是那么大，我会在页面加载时执行 ajax 请求（以防止大量用户等待时间子 ajax 调用）并将结果存储到 javascript 全局/对象中。

如果页面根本不打算刷新，并且数据是“实时”的，那么等待时间可能会屈服，但是当用户选择一个选项时，您只需触发一个 ajax 调用。

您可以使用类似的结构：

//bind event of select changing to a funciton that fires off the ajax
//the below avoids having to attach/unattach evenmt handlers on any dynamic elements
var body = jQuery("body");
body.on("change","#selectID",updatePriceFunction);

function updatePriceFunction() {
    loader.show();//unhide the loading animation 
    var optionChosen = jQuery("#selectID").find("option:selected").val();//this assumes the options have values that are identifies for that option to be sent to the ajaxEndpoint
      var payload = {selectedOption: optionChosen, otherData: otherValueNeeded}; //makes a javascript object with values to be sent to fetch the price
      jQuery.ajax({
          type: "POST",
          url: urlToAjaxEndpoint,//string
          data: payload,
          dataType: "json",
          traditional: true,
          success: getDataSuccess,
          error: ajaxErrorHandling,
          complete: function() {loader.hide();}//always hide the loading animation, even if ajax fails
      });

      //methods seperated (not inline in the above ajax call) as to allow for reuse

      function getDataSuccess(data){//data is the response form the server, parsed using jQuery JSON if the ajaxEndpoint server said the response type was JSON
        if(data.result == true) {
            //find the table area you wnat to update, and use the new value
            //data.result .....
        } else {
            //server returned value indicating operation was successful, such as if the combo was invalid or not, etc
            //data.message ....
        }
      }

      function ajaxErrorHandling(jqXHR, textStatus, errorThrown){//jqXHR is the jquery xml html request object
            //ajax error connecting to endpoint / exception on response parsing
            var details = JSON.stringify(jqXHR, null, 4);
            console.error("Exception: "+errorThrown+" - Status: "+textStatus + " - XMLHTTPRequest:" + details);
            showAlertMessage("An error occurred");
      }
}

//this assumes the server returns a json object of the form:
//[
//  error: true/false,
//  message: "",
//  result: object
//]

//whatever the endpoint uses, you'll likely need to parse the payload object, and then create a json response
//be careful of special characters on the endpoint, as they can be "escaped" in the raw json and will throw a parse exception

这应该足以让您走上正确的道路。 PS：jQuery 不是必需的，但它让它变得更容易。