Question

首先让我说我刚刚开始学习Web开发的基础知识：html，css，javascript和php。

我尝试使用数据库查询实现网页并遇到了一些困难：

如果有人可以通过哪种方式启发我，我将不胜感激。

我不希望你为我编写完整的代码，但是，请给我一些提示和线索。

我有一张包含Id，items，price1，price2和price3的表。

经过大量搜索后，我设法在选择列表上动态加载所有项目，并在div上显示（price1），并根据使用ajax调用选择的项目显示更改事件。

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

如果选择列表2是（a）并且选择列表3是（是），则要显示的价格是（price2）;如果选择列表2是（b）并且选择列表3是（是）则要显示的价格是（price3）并且如果选择列表3选项是（否），则必须加载价格。全部使用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 a sit简化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不是必需的，但它使它变得更容易。

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

1 个答案: