使用jquery Ajax和PHP进行单个Div刷新

好吧所以我的页面上有一个div，它有一些代码用于选择输入中的显示选项组。 然后在选择完成后在另一侧显示该组中的选项。 我的html / php代码如下：

 
 Select your product options   Select an Option Group  <option value="">    
 
 Group Options      
  

默认情况下，在原始页面加载时， $GroupOptions中不存在$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以显示上面查询的结果，并使设置为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的变量添加到success函数中，该函数将接收PHP脚本的输出。 另请注意，您的url不正确，您需要发布到实际的外部文件，例如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 = 'Group Options'; output += data; $("#groupOptions").html(output); } else {//nothing came back from the PHP script alert('no data received!'); } } }); 

问题＃4 – 在你的HTML上，不需要运行任何PHP。 简单地改变：

 
 Group Options       

至

希望这可以帮助

Answer 2

您必须在成功回调函数中获取响应并实际在您的oho函数中给出响应

$（ “＃productOptions”）。改变（函数（）{

  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 }