php - 使用 Javascript 的 Ajax

Question

大家好 我在一个 PHP 项目中工作。我遇到了与 Ajax 相关的问题。

我有一个公司选择框，其选择部门使用 ajax 显示，在从部门选择框选择部门以及另一个用户组选择框时，我得到了用户列表。

现在更改用户组时，我使用 ajax 作为用户组 ID 和部门 ID 向服务器发送请求以获取相应的用户。但是，当我重新选择部门时，我无法获得新的用户列表，因为该部门列表是从 ajax 生成的，而 Ajax 不处理 Javascript。

我正在使用的代码:

select box to select company

 <select name="companyname" id="companyname" onchange="javascript:dochange(this.value);">
    <option value="-1">-----Select Company-----</option>
          <?php foreach($user_obj->getUserCompanyname() as $key => $value){
        $selected = '';
        if($value['company_id'] == $user_obj->user_company_id){
        $selected = 'selected="selected"';
        }
        ?>
         <option value="<?php echo $value['company_id'];?>"
<?php echo $selected;?>><?php echo $value['company_name'];?></option>
         <?php }?>

Javascript to execute ajax

<script>
//Inint_AJAX funnction is excluded as it has to do anything with requirement
function dochange(val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
 if (req.readyState==4) {
      if (req.status==200) {
            document.getElementById('selectdepartment').innerHTML="";
           document.getElementById('selectdepartment').innerHTML=req.responseText; //retuen value
      }
 }
};
req.open("GET", "company.php?val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
</script>

company.php

$val=$_GET['val'];

  echo "<select name='departmentname' id='departmentname'>\n";
  echo "<option value='-1'><b>Select Department</b></option>\n";
  foreach($user_obj->getUserDepartmentname($val) as $k=>$vals){
  echo "<option value='".$vals['department_id']."'>".$vals['department_name']."</option>";
   }                  
echo "</select>\n<br>";
echo " <span class='asterisk>NOTE:Please (Re)Select the User Group everytime you change department.</span>";

User Group Select Box

<select name="usergroupname" 
onchange="javascript:dochangereport(this.value,document.getElementById('departmentname').value);
    dochangeoverride(this.value,document.getElementById('departmentname').value);" id="usergroupname">
    <option value="-1">Select User Group</option>
     <?php 
    foreach($user_obj->getUserGroupName() as $gkey=>$gval){
     $gselect = '';
     if($gval['usergroup_id'] == $user_obj->user_group_id){
     $gselect = 'selected="selected"';
     }
    ?>
    <option value="<?php echo $gval['usergroup_id'];?>"
     <?php echo $gselect;?>><?php echo $gval['usergroup_name'];?>
    </option>
     <?php }?>
     </select>

function calling ajax call

<script>
function dochangereport(val,dep) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
 if (req.readyState==4) {
      if (req.status==200) {
            document.getElementById('selectreport').innerHTML="";
           document.getElementById('selectreport').innerHTML=req.responseText; //retuen value
      }
 }
};
req.open("GET", "reportto.php?val="+val+"&dep="+dep); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}
</script>

**reportto.php**

    $val=$_GET['val'];
    $dep=$_GET['dep'];
     echo "<select name='reportingto[]' multiple='multiple' size='3'>\n";
      echo "<option value='-1'><b>Select Supervisor(s)</b></option>\n";
      foreach($user_obj->getUserReportingto($val,$dep) as $rkey=>$rval){
echo "<option value='".$rval['user_id']."'>".$rval['user_fname']." ".$rval['user_fname']." </option>";
}echo "</select>\n";

有人可以帮我解决这个问题吗？

Answer 1

我在这里猜测:你可能正在使用类似的东西

$('select.department').change(function() { (...ajax...)});

相反，使用:

$('select.department').live('change', function() { (...ajax...)});

这还将匹配以后添加的所有元素并匹配您的 jQuery 选择器。另请参阅:http://api.jquery.com/live/。

编辑:

好吧，我猜错了。如果您不使用 jQuery，则必须使用事件冒泡( http://www.quirksmode.org/js/events_order.html )(编辑:显然， onchange 在 IE 中不会冒泡，请参阅 Does the onchange event propagate? )或每次更新时将事件处理程序添加到新创建的 <select> 中，使用

  if (req.status==200) {
      document.getElementById('selectreport').innerHTML="";
      document.getElementById('selectreport').innerHTML=req.responseText; //retuen value
      document.getElementById('reportingto').onchange = function() {
          var val = this.value,
              department = document.getElementById('departmentname').value;

          dochangereport(val, department);
          dochangeoverride(val, department);
      }
  }

然后将一个 id 添加到您的 ajaxed 选择框，如下所示:

(reportto.php)
echo "<select id='reportingto' name='reportingto[]' multiple='multiple' size='3'>\n";

祝你好运!