Question

我有一个选择菜单，无需重新加载页面即可提交，如下所示：

<select id="option" name="option">
<option value="15">15/option>
<option value"30">30</option>
<option value"90">90</option>
</select>

它将按如下方式提交到当前页面，而无需重新加载页面

<script type="text/javascript">
    $('#option').change(function(){
        var option_val = $(this).val();
        $.ajax({
        type: 'post',
        url: "$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];",
        data: "option="+option_val,
       success: function(data)
        {
           window.alert(data)
        }
        });
    });
</script>

选项菜单中的更改结果是一个弹出窗口，其中回显了页面的所有代码。

我想在页面上做的是使用提交的$ _POST ['选项']并重新计算价格，例如

<body>
//some code and div's
<?php
if (isset($_POST['option'])) {
    $option = $_POST['option'];
$price= $row_product['price'] + $option;
echo $price;
} ?>
</body>

我想在几个地方使用提交的选项值

欢迎任何帮助对不起，如果非常明显

Answer 1

唯一的方法是制作一个进行计算的PHP页面

<强> HTML / page1.php中

<select id="option" name="option">
    <option value="15">15</option>
    <option value="30">30</option>
    <option value="90">90</option>
</select>
<div id="dynamic">
    <p>DEFAULT CONTENT</p>
</div>

<强> HTML /使page2.php

$option = 0;
if(isset($_GET["option"])){
    $option = $_GET["option"];
}
//do calculations
echo "<my-html-stuff>lorem ipsum</my-html-stuff>";

<强> JS

var dynamic = $("#dynamic");
$('#select').on("change", function() {
   var selected = $(this).val();
   dynamic.load("page2.php?option=" + selected, function() {
       dynamic.html("<p>CONTENT OPTION "+selected+"</p>");
   });
});

小提琴==＆gt; https://jsfiddle.net/tonysamperi/4dbwwn3g/

WITH JSON

<强>使page2.php

header('Content-Type: application/json');

$option = 0;
if(isset($_GET["option"])){
     $option = $_GET["option"];
}
$response = ["result" => $option];
echo json_encode($response);

<强> JS

$('#select').on("change", function() {
   var selected = $(this).val();
   $.get("page2.php?option=" + selected, function(response) {
       //do stuff with data
       console.debug("RESPONSE", response);
   });
});

在ajax重新运行php之后

1 个答案: