如何通過 Ajax 將數據從 HTML 傳遞到 PHP 文件？

Question

我想知道，如何通過 ajax 將<select>元素從 html 傳遞到 PHP 文件。

這是我的index.php ：

<p>
<form action = "display.php" method="post" enctype="multipart/form-data">

Select: 

<select name="chosenOption" id="chosenOption"  style="width:100px"">
    <?php
    include 'dbConnection.php';
    $query = $db->query("SELECT id,name FROM products");
    while($row = $query->fetch_assoc())
    {
    echo'
    <option value="'.$row['id'].'">'.$row['name'].'
    </option>';
    }
    ?>
    </select>

Display : <input type="submit" name="display" value="Display">

</form>
</p>

我的display.php ，我有 ajax 方法：

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script>
function refresh_div() {
        var chosenOption= $('#chosenOption').val();
        jQuery.ajax({
        url: 'products.php',
        type:'POST',
        data:{chosenOption:chosenOption},
        success:function(results) {
        jQuery(".result").html(results);
        }
    });
}
t = setInterval(refresh_div,1000);
</script>


<div class="result"></div>

和products.php ，我想通過選擇< select >元素：

<?php
include 'dbConnection.php';
$chosenOption = $_POST["chosenOption"];

// Display section

$query = $db->query("SELECT cost,description FROM products_info WHERE products_id=$chosenOption);
if($query->num_rows > 0){
while($row = $query->fetch_assoc()){
echo "Actual cost and description: ".$row["cost"]. " ".$row["description"]. ; 
 }
 } else {
    echo "No data";
  }

?>

我希望從index.php中選擇的選項將通過 ajax 傳遞給 products.php 並顯示適當的消息。 當前代碼不起作用。 任何想法？

Answer 1

您不能在display.php中引用$("#chosenOption") ，因為該頁面已重新加載。 您需要使用$_POST['chosenOption'] ，因為它是由表單提交的。

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script>
function refresh_div() {
    var chosenOption= $('#chosenOption').val();
    jQuery.ajax({
        url: 'products.php',
        type:'POST',
        data:{chosenOption: <?php echo $_POST['chosenOption']; ?>},
        success:function(results) {
        jQuery(".result").html(results);
        }
    });
}
t = setInterval(refresh_div,1000);
</script>


<div class="result"></div>

Answer 2

使用var chosenOption= $(#chosenOption).value; 反而。