試圖通過jQuery.post（）將變量從輸入無線電傳遞到PHP

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});

但不是兩個

因此，您的代碼可以是

$（文件）。就緒（函數（）{

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

});

要么

$（文件）。就緒（函數（）{

    $("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 個解決方案

解決方案1
0 2018-10-18 19:02:02

解決方案2
0 已采納 2018-10-18 19:05:25

解決方案3
0 2018-10-18 19:40:57

試圖通過jQuery.post（）將變量從輸入無線電傳遞到PHP

問題描述

3 個解決方案

解決方案1 0 2018-10-18 19:02:02

解決方案2 0 已采納 2018-10-18 19:05:25

解決方案3 0 2018-10-18 19:40:57

解決方案1
0 2018-10-18 19:02:02

解決方案2
0 已采納 2018-10-18 19:05:25

解決方案3
0 2018-10-18 19:40:57