Question

我应该首先说我是服务器端编程的新手。我试图用AJAX来获得它的变化值。

我的AJAX代码（ajaxCode.php）

  $(document).ready(function() {
        $('select[name="selectBox"]').change(function(){
            var value = $(this).val();
            $.ajax({
                    type: 'POST',
                    url: 'calculator.php', 
                    data: {valueChange: value },
                    dataType: 'html'
            });
            alert(value );
        });
    });

我的HTML代码与选择框（calculator.php）

   <select name ="selectBox">   
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
    </select> 

<?php
$status = $_POST['changeStatus'];
echo $status;
?>

这似乎不起作用。状态将发出警报但不会回显。我究竟做错了什么？提前谢谢？

Answer 1

您可能希望通过ajax发送所选框的值，然后更改从ajax获取的状态。

服务器站点：calculator.php

客户方：

<script>
$(document).ready(function() {
    $('select[name="selectBox"]').change(function(){
        var value = $(this).val();
        $.ajax({
                type: 'POST',
                url: 'calculator.php', 
                data: {valueChange: value },
                dataType: 'html'
        }).done(function(response){
           $('.response-holder').html(response);
        });
    });
});
</script>

<select name ="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 
<div class="response-holder"></div>

Answer 2

这样可行：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">     
      $(document).ready(function() {
           $(document).on("change", ".selectBox", function(){
                var v = $(this).val();
                $.post( "ajax.php", { changeStatus: v , time: "123" }, function( data ) {   
                    alert("From file: " +data);             
                });                 
            });
        });
    </script>   
</head>
<body>
<select name ="selectBox" class="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 
</body>
</html>

和ajax.php

<?php
$status = $_POST['changeStatus'];
echo $status;
?>

Answer 3

接收ajax调用的代码应该在它自己的文件中，并且只回显你需要检索的内容，而不是你开始使用的整个内容。例如，只需回显状态。

假设这是您的HTML

<select name ="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 

<script>
$(document).ready(function() {
    $('select[name="selectBox"]').change(function(){
        var value = $(this).val();
        $.ajax({
                type: 'POST',
                url: 'calculator.php', 
                data: {valueChange: value },
                dataType: 'html'
        });
        alert(value );
    });
});
<script>

然后这个可以成为你的calculator.php

<?php
    $status = $_POST['changeStatus'];
    echo $status;
?>

然而，再一次，你正在进行一次ajax调用而不对其响应做任何事情。要接收到calculator.php正在回答的问题，你可以做到

<select name ="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 
<div id="response"></div>
<script>
$(document).ready(function() {
    $('select[name="selectBox"]').change(function(){
        var value = $(this).val();
        $.ajax({
                type: 'POST',
                url: 'calculator.php', 
                data: {valueChange: value },
                dataType: 'html'
        }).then(function(response) {
           jQuery('#response').html('Ajax answered: '+response);
        });
        alert(value );
    });
});
<script>

Answer 4

在您的calculator.php脚本中尝试此操作。

<?php
    $status = $_POST['valueChange'];
    echo $status;
?>

这能否为您提供所需的结果？

使用AJAX和POST方法在PHP中获取HTML值

4 个答案: