使用jQuery Ajax和PHP進行單Div刷新

Question

好的，所以我的頁面上有一個div，其中包含一些用於選擇輸入中顯示選項組的代碼。 做出選擇后，在另一側顯示該組中的選項。 我的html / php代碼如下：

<div class="row">
    <div class="col-lg-6">
        <label class="control-label" for="productOptions">Select your
        product options</label> <select class="form-control" id=
        "productOptions">
            <option>
                Select an Option Group
            </option><?php foreach($DefaultOptions as $option): ?>

            <option value="<?php echo $option['GroupID']; ?>">
                <?php echo $option['GroupName']; ?>
            </option><?php endforeach; ?>
        </select>
    </div>

    <div class="col-lg-6" id="groupOptions">
        <label class="control-label">Group Options</label>
        <?php if($GroupOptions): ?>
        <?php foreach ($GroupOptions as $optionValue): ?>
        <?php echo $optionValue['optionName']; ?> <?php endforeach; ?>
        <?php endif; ?>
    </div>
</div>

默認情況下，在原始頁面加載中， $GroupOptions不存在於表單中，因為它是在用戶選擇希望從中選擇的組之后設置的。 我通過使用Ajax來調用php腳本以avoid page reload

$("#productOptions").change(function(){

    var GroupID = $(this).val();
    var dataString = 'GroupID=' + GroupID;
    //alert (dataString);return false;
    $.ajax({
      type: "POST",
      url: "#",
      data: dataString,
      success: function() {
        $("#groupOptions").html(dataString);
      }
    });
    return false;
});

然后，ajax轉到php調用，該調用獲取與數據庫中的組ID匹配的選項。

if(isset($_POST['GroupID']))
{
    $GroupID = $_POST['GroupID'];
    $sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID";

    $GroupOptions = $db->query($sql);
}

現在，我想refresh div #GroupOptions以顯示上面查詢的結果，並將<?php if($GroupOptions): ?>設置為true。

我設法用$("#groupOptions").html(dataString);刷新了div $("#groupOptions").html(dataString); 在ajax調用的成功函數中。 但這只會很好地返回dataString。 （明顯）。 有沒有一種方法可以真正刷新div。 還是一種將信息從php調用傳遞到成功函數的方法？

Answer 1

更新：

您當前的代碼中有4個問題：

問題1和問題2-在單獨的PHP腳本中，您沒有將任何內容回顯到Ajax。 您回顯的任何內容都將作為success函數的變量返回。 只需根據您想要的格式添加echo語句即可。 第二個問題是您試圖在HTML部分中回顯它，甚至$GroupOptions都不存在（Ajax只是從PHP腳本返回輸出，它不是include語句，因此您的變量不在同一范圍內） 。

if(isset($_POST['GroupID']))
{
    $GroupID = $_POST['GroupID'];
    $sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID";

    $GroupOptions = $db->query($sql);

    //this is where you want to iterate through the result and echo it (will be sent as it to the success function as a variable)
    if($GroupOptions): 
      foreach ($GroupOptions as $optionValue): 
        echo $optionValue['optionName'];
      endforeach; 
    endif; 
}

在您的Ajax中，向成功函數添加一個名為data的變量，該變量將接收PHP腳本的輸出。 另請注意，您的網址不正確，您需要發布到實際的外部文件，例如my_custom_script.php ：

$.ajax({
      type: "POST",
      url: "your_external_script.php",
      data: dataString,
      success: function(data) {
       if (data && data !== '') {
         //data will equal anything that you echo in the PHP script
         //we're adding the label to the html so you don't override it with the new output
         var output = '<label class="control-label">Group Options</label>';
         output += data;
         $("#groupOptions").html(output);
       } else {//nothing came back from the PHP script
         alert('no data received!');
       }
      }
    });

問題4-在您的HTML上，無需運行任何PHP。 只需更改：

<div class="col-lg-6" id="groupOptions">
        <label class="control-label">Group Options</label>
        <?php if($GroupOptions): ?>
        <?php foreach ($GroupOptions as $optionValue): ?>
        <?php echo $optionValue['optionName']; ?> <?php endforeach; ?>
        <?php endif; ?>
    </div>

至

<div class="col-lg-6" id="groupOptions">

</div>

希望這可以幫助

Answer 2

您必須在成功回調函數中接受響應，並在oho函數中實際給出響應

$（“＃productOptions”）。change（function（）{

    var GroupID = $(this).val();
    var dataString = 'GroupID=' + GroupID;
    //alert (dataString);return false;
    $.ajax({
      type: "POST",
      url: "#",
      data: dataString,
      success: function(dataString) {        //take the response here
        // convert dataString to html...
        $("#groupOptions").html(newHtml);
      }
    });
    return false;
});

PHP：

if(isset($_POST['GroupID']))
{
    $GroupID = $_POST['GroupID'];
    $sql = "SELECT * from `KC_Options` WHERE GroupID=$GroupID";

    $GroupOptions = $db->query($sql);
    echo json_encode($GroupOptions );         //give a response here using json
}