Question

我正在尝试加载由php代码创建的html表。该表应由依赖于单选输入选择器中变量的sql查询生成，但是以某种方式我无法通过jQuery.post（）传递该变量。我制作了一个具有相同问题的简单版本，因此希望有人可以帮助我解决这个问题：

test.php：

<html>
<head>
    <script type="text/javascript"  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<script type="text/javascript">
    $(document).ready(function(){

        $("input[name$='selectOP']").on("change", function() {
            var op = $(this).val();
            $.post('ajax.php', {varphp: op});   
            $("#div1").load('ajax.php', function(){             
            });
        });

    });
</script>
<body>
    <label class="radio-inline"><input type="radio" value="110" name="selectOP" id="selectOP">110  </label>
    <label class="radio-inline"><input type="radio" value="115" name="selectOP" id="selectOP">115  </label>
    <div id="div1">
    </div>
</body>
</html>

ajax.php：

<?php
    $var= "Something";
    echo $var;
    //$varphp = $_POST['varphp'];
    //echo $varphp;
?>

因此，对ajax.php的最后两行进行了注释，代码成功运行，并且var $ var加载到div1中。但是，如果我取消注释这些行，则显然代码停止了，并且div1上未加载任何内容。我在做什么错了？

Answer 1

$.post('ajax.php', {varphp: op});   
$("#div1").load('ajax.php', function(){             
$});

这两行实际上是在发出两个单独的ajax请求，这意味着服务器将分别接收它们。只有第一个具有POST参数，只有第二个才设置DOM对象的内容。

尝试这样的事情：

$("#div1").load('ajax.php', {
  varphp: op
});

Answer 2

您正在调用$ .post，您在其中传递参数，然后调用不带参数的load。当然，当您调用“ load”时，您不会获得$ _POST ['varphp']，因为您没有传递此变量。

您必须使用其中之一。您可以这样做：

$.post('ajax.php', {varphp: op}, function(data){ $("#div1").html(data); }, 'html' );

或

$("#div1").load('ajax.php', {varphp: op});

但不是两者

因此，您的代码可以是

$（document）.ready（function（）{

    $("input[name$='selectOP']").on("change", function() {
        var op = $(this).val();
        $.post('ajax.php', {varphp: op}, function(data){ $("#div1").html(data); }, 'html' ); 
    });

});

或

$（document）.ready（function（）{

    $("input[name$='selectOP']").on("change", function() {
        var op = $(this).val();
        $("#div1").load('ajax.php', {varphp: op}); 
    });

});

Answer 3

我喜欢的一个好习惯是使用带有延期承诺的AJAX。您可以尝试将代码转换为以下内容：

$.ajax({
  type: 'post', // you can switch to GET, POST, etc.
  url: 'ajax.php',
  data: {varphp: op},
})
.done(function(data) {
  $('#div1').html(data);
})
.fail(function(data) {
  // if your code fails, you can see the errors here in the console
  console.log(data);
})
.always(function(data) {
  // do something every time
});

根据done，fail或always回调函数中的代码将运行，具体取决于AJAX调用是成功，失败还是都不成功。这样一来，您也可以轻松地对代码进行故障排除，尤其是当AJAX调用错误消失时（请查看fail函数内部）。

试图通过jQuery.post（）将变量从输入无线电传递到PHP

3 个答案: