使用jQuery Ajax和PHP进行单Div刷新 [英] Single Div refresh with jquery Ajax and PHP

问题描述

好的，所以我的页面上有一个div，其中包含一些用于在select输入中显示选项组的代码.做出选择后，在另一侧显示该组中的选项.我的html/php代码如下:

Okay So I have a div on my page that has some code for display option groups in a select input. And then on the other side displaying the options in that group after the selection is made. My html/php code for this is below:

<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

By default on the original page load, $GroupOptions does not exist in the form, because it is set after the user selects the Group they wish to choose from. I call the php script by using ajax to 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匹配的选项.

Then the ajax goes to a php call that gets the options that match the groups id in the database.

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.

Now I want to refresh the div #GroupOptions to display the results from the query above, and make <?php if($GroupOptions): ?> set to true.

我设法在ajax调用的成功函数中使用$("#groupOptions").html(dataString);刷新了div.但这只会很好地返回dataString. (明显地).有没有一种方法可以真正刷新div.还是一种将信息从php调用传递到成功函数的方法?

I managed to refresh the div with $("#groupOptions").html(dataString); in the success function of the ajax call. But that only returns well the dataString. (obviously). Is there a way to truly refresh just the div. Or a way to pass the info from the php call into the success function?

推荐答案

更新:

您当前的代码中有4个问题:

You have 4 problems in your current code:

问题1和问题2-在单独的PHP脚本中，您没有将任何内容回显到Ajax.您回显的任何内容都将作为success函数的变量返回.只需根据您想要的格式添加echo语句即可.第二个问题是您试图在HTML部分中回显它，而$GroupOptions甚至不存在(Ajax只是从PHP脚本返回输出，它不是include语句，因此您的变量不在相同的范围).

Problem #1 and Problem #2 - In your separate PHP script you are not echoing anything back to the Ajax. Anything you echo will go back as a variable to the success function. Simply the add echo statement(s) according to the format you want. Your 2nd problem is that you are trying to echo it in the HTML part, where $GroupOptions does not even exist (the Ajax simply returns an output from the PHP script, it's not an include statement so your variables are not in the same scope).

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.:

In your Ajax, add a variable named data to the success function, which will receive the output from the PHP script. Also notice that your url is incorrect, you need to post to an actual external file such as 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.只需更改:

Problem #4 - And on your HTML, no need to run any PHP. Simply change:

<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>

希望这会有所帮助

这篇关于使用jQuery Ajax和PHP进行单Div刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！