Question

我有一个select，我希望它在onchange上执行查询。

（我希望得到产品的特定价格，具体取决于所选尺寸）

问题是我是Ajax的新手，我不知道如何发送多个数据。第一个变量是select的值，第二个var是某人正在访问的页面中的ID。

我需要发送给＆＃34; getprice.php＆＃34;页面变量$ i，即$ _GET [＆＃34; hidden_id_product＆＃34;]和$ q，这是来自onchange select的值。

我被困在这里，这是我的第一篇文章，我无法找到答案，希望有人可以帮助我。

选择代码：（product.php）

<select name="size" id="size" class="form-control" onchange="sizeSelected(this.value)">
<?php 
    $size_query = "SELECT * FROM sizes WHERE id_product=".$_GET["hidden_id_product"];
    $size_result= mysqli_query($connection, $size_query);
    if($fetch = mysqli_fetch_array($size_result)){
       echo "<option selected value='0' disabled> - SELECT A SIZE - </option>";
       if($fetch["seven"] > 0){
            echo "<option value='7' > 7us </option>";
       }else{
            // do nothing                               
       }
       if($fetch["sevenhalf"] > 0){
            echo "<option value='7.5'> 7.5us </option>";
       }else{
            // do nothing                               
       }
       // and so on... 
    }else{
        echo "<option value='0'>SOLD OUT</option>";
    }
?>
</select>

使用的脚本：（product.php）

<script>
    function sizeSelected(str) {
    var div = document.getElementById("id_product");
    var str2 = div.textContent;
    if (str == "") {
        document.getElementById("price").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("price").innerHTML = this.responseText;
            }
        };

        xmlhttp.open("GET","getprice.php?q="+str+"&i="+str2,true);
        xmlhttp.send();
    }
}
</script>

获取价格代码：（getprice.php）

<?php
include("connection.php");

$q = intval($_GET['q']);
$i = $_GET['i'];

if($q = 7){
    $qt = "seven";
}elseif($q = 7.5){
    $qt = "sevenhalf";
}elseif($q = 8){
    $qt = "eight";
}elseif($q = 8.5){
    $qt = "eighthalf";
}elseif($q = 9){
    $qt = "nine";
}elseif($q = 9.5){
    $qt = "ninehalf";
}elseif($q = 10){
    $qt = "ten";
}elseif($q = 10.5){
    $qt = "tenhalf";
}elseif($q = 11){
    $qt = "eleven";
}elseif($q = 11.5){
    $qt = "elevenhalf";
}elseif($q = 12){
    $qt = "twelve";
}elseif($q = 13){
    $qt = "thirteen";
}

$sql="SELECT ".$qt." FROM prices WHERE id_product = ".$i;
$result = mysqli_query($connection,$sql);

while($row = mysqli_fetch_array($result)) {
    echo $row[$qt];
}
?>

整页：

<div>
    <span><h2><?php echo $row["name"];?></h2></span>
    <hr>
    <span><h3>"<?php echo $row["nickname"];?>"</h3></span>
    <hr>
    <span>
        <div id="id_product" style="display: none;">
            <?php 
            $id = $_GET["hidden_id_product"];
            echo htmlspecialchars($id);
            ?>
        </div> 
        <h4>
            <?php echo $row["id_product"]; ?>
            | <?php echo $row["brand"]; ?> 
            | <?php echo $row["year"] ?>    
        </h4>
    </span><br>
    <span>
        <select name="size" id="size" class="form-control" onchange="sizeSelected(this.value)">
        <?php 
            $size_query = "SELECT * FROM sizes WHERE id_product=".$_GET["hidden_id_product"];
            $size_result= mysqli_query($connection, $size_query);
            if($fetch = mysqli_fetch_array($size_result)){
                echo "<option selected value='0' disabled> - Seleccione una talla - </option>";

                if($fetch["seven"] > 0){
                    echo "<option value='7' > 7us </option>";
                }else{

                }
                if($fetch["sevenhalf"] > 0){
                    echo "<option value='7.5'> 7.5us </option>";
                }else{

                }
            }else{
                echo "<option value='0'>SOLD OUT</option>";
            }
        ?>
        </select><br>
    </span>
    <div id="price"></div>

</div>

Answer 1

«我真的不知道如何将PHP var传递给JS，这是主要问题。»

我没有看到任何将PHP值直接传递给JS的尝试但它理论上是这样的：

<?php
$myPHPvariable = 34;
?>
<script>
var myJSvariable = <?php echo myPHPvariable; ?>;
console.log(myJSvariable);
</script>

好的，我现在假设您正确构建了select元素......并且您需要传递选定的option值和文字以获得商品价格。

所以说你制作的HTML看起来像这样：

<select name="size" id="size" class="form-control">
  <option selected value='0' disabled> - SELECT A SIZE - </option>
  <option value='7' > 7us </option>
  <option value='7.5'> 7.5us </option>
  <option value='0'>SOLD OUT</option>
</select>

您使用jQuery标记了您的问题......
由于我比jQuery Ajax更习惯XMLHttpRequest，所以我会按照以下方式发送所选值和选定的选项文字：

首先，从onchange="sizeSelected(this.value)"中删除内联事件处理程序select 并使用jQuery事件处理程序。

// Change handler
$("#size").on("change",function(){

  var SelectedValue = parseFloat($(this).val());
  var SelectedText = $(this).find("option").eq( $(this)[0].selectedIndex ).text();
  console.log(SelectedValue+" - "+SelectedText);

  // Prepare the data to send.
  var data = {
    q:SelectedValue,
    i:SelectedText
  };

    $.ajax({
      url:"getprice.php",
      method:"post",
      data:data,
      cache:false,
      success:function(result){
        $("#price").html(result);  // Display the price in the "price" div.
      },
      error:function(request,status,error){
        console.log(error);  // Ajax error, if any, will be shown in console.
      }
    })
});

我建议您使用post方法...因此，在您的PHP中，将$_GET更改为$_POST。

此处，q或SelectedValue是一个整数，i或SelectedText是一个字符串。

因此，您应该在请求后的<div id="price"></div>中获得价格如果出现PHP错误（不是ajax请求错误，将在控制台中显示），它也会在那里显示。

同时添加此项，以防getprice.php之后$result = mysqli_query($connection,$sql);中出现SQL错误：

if (!$result) {
   printf("Errormessage: %s\n", $mysqli->error);
}

希望有所帮助。
;）

Onchange选择使用AJAX

1 个答案: