将下拉选项传递给 PHP 变量（不刷新页面）

Question

我正在尝试将下拉菜单的值传递给 PHP 变量 $anno，因此末尾的 print_r() 函数可以使用实际的 $coefficiente 变量（取决于 $anno）。

<select name="anno">
<option>1940</option>
<option>1941</option>
<option>1942</option>
</select>

<?php

$importo = "100";
$anno = $_POST["anno"];

if ( $anno == "1940" ) { $coefficiente = "10"; } ;
if ( $anno == "1941" ) { $coefficiente = "20"; } ;
if ( $anno == "1942" ) { $coefficiente = "30"; } ;

print_r(($importo*$coefficiente)/1936.27); echo '€';

?>

这可以“AJAXified”吗？

此时，当我选择下拉选项时，print_r 函数没有更新。我需要提交按钮吗？

Answer 1

如果你想在同一页面计算你的公式，不要使用 PHP 使用 Javascript

<select name="anno">
  <option>1940</option>
  <option>1941</option>
  <option>1942</option>
</select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {
    // We bind our AJAX handler to the onChange event of the select element
    $("select[name='anno']").on('change', function(e) {
      var importo = "100";
      var anno = $(this).val();
      var coef = "";
      if (anno == 1940) { coef = 10; }
      if (anno == 1941) { coef = 20; }
      if (anno == 1942) { coef = 30; }

      alert(importo*coef/1936.27 + "€");
    })
});

对于 PHP 处理，使用 AJAX（警告我无法测试！）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {
    // We bind our AJAX handler to the onChange event of the select element
    $("select[name='anno']").on('change', function(e) {
            $.ajax({
                type: "POST",
                url : "your_php_script.php",
                data: { anno: $(this).val() },
            })
              .done(function(data) {
                alert(data); 
              })
              .fail(function(jqXHR, textStatus, errorThrown) {
                alert("Something went wrong!\n" + errorThrown);
              });
    })
});