Question

我有一个2个jsp文件，如下所示。

我有一个父jsp页面，其中选择下拉框中有两个选项。

我还有另一个jsp，它在表格中显示选择框。

如果用户在下拉选择框中选择选项“one”，我希望将dispTable.jsp的输出作为页面parent.jsp中的ajax响应。

我面临的问题是parent.jsp页面将parent.jsp页面中的dispTable.jsp的内容显示为ajax响应，但是'＆gt;＆gt;'和'＆lt;＆lt;＆lt;按钮不起作用。

但是如果我尝试通过直接在url中提供参数和值来执行dispTable.jsp，那么select表和按钮就可以正常工作。

同样的输出如何不适用于parent.jsp。

对于以下网址，输出效果非常好。 http://student.details.com:8080/stud/dispTable.jsp?count=one

 **parent.jsp**
<html>
      <head>  
      <script language="javascript" type="text/javascript">  
      var xmlHttp  
      var xmlHttp
      function showEmp(str){
      if (typeof XMLHttpRequest != "undefined"){
      xmlHttp= new XMLHttpRequest();
      }
      else if (window.ActiveXObject){
      xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (xmlHttp==null){
      alert("Browser does not support XMLHTTP Request")
      return;
      } 
      var url="dispTable.jsp";
      url +="?count=" +str;
      xmlHttp.onreadystatechange = stateChange;
      xmlHttp.open("GET", url, true);
      xmlHttp.send(null);
      }

      function stateChange(){   
      if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
      document.getElementById("emp").innerHTML=xmlHttp.responseText   
      }   
      }
      </script>  
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
jQuery(function($) {

$('#add').click(function() {


                            return !($('#list1 option:selected').remove().appendTo('#list2') && ($('#list2:last-child').selected="selected"));

                });

                $('#remove').click(function() {

                                return !$('#list2 option:selected').remove().appendTo('#list1');


                });
});
var arrOldValues;
function FillListValues(CONTROL) 
{

    var intNewPos;
    var arrNewValues = GetSelectValues(CONTROL);
    for (var i = 0; i < arrNewValues.length; i++) {
        if (arrNewValues[i] == 1) {
            intNewPos = i;
        }
    }
    for (var i = 0; i < arrOldValues.length; i++) {
        if (arrOldValues[i] == 1 && i != intNewPos) {
            CONTROL.options[i].selected = true;
        } else if (arrOldValues[i] == 0 && i != intNewPos) {
            CONTROL.options[i].selected = false;
        }
        if (arrOldValues[intNewPos] == 1) {
            CONTROL.options[intNewPos].selected = false;
        } else {
            CONTROL.options[intNewPos].selected = true;
        }
    }
}

function GetSelectValues(CONTROL) 
{
    var strTemp = [];
    for (var i = 0; i < CONTROL.length; i++) {
        if (CONTROL.options[i].selected == true) {
            strTemp.push(1);
        } else {
            strTemp.push(0);
        }
    }
return strTemp;


}
function GetCurrentListValues(CONTROL) 
{
    arrOldValues = GetSelectValues(CONTROL);
}
</script>
      </head>  
      <body>  
<select name = "ratingsClient" style="width: 150px" id="ratingsClient" onchange="showEmp(this.value)">
<option value="aaa">aaa</option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<br>  
      <div id="emp">  
      <table name="emp" >  

      </table>  
      </div> 
</body>
</html>


**dispTable.jsp**
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
jQuery(function($) {

$('#add').click(function() {


                            return !($('#list1 option:selected').remove().appendTo('#list2') && ($('#list2:last-child').selected="selected"));

                });

                $('#remove').click(function() {

                                return !$('#list2 option:selected').remove().appendTo('#list1');


                });
});
var arrOldValues;
function FillListValues(CONTROL) 
{

    var intNewPos;
    var arrNewValues = GetSelectValues(CONTROL);
    for (var i = 0; i < arrNewValues.length; i++) {
        if (arrNewValues[i] == 1) {
            intNewPos = i;
        }
    }
    for (var i = 0; i < arrOldValues.length; i++) {
        if (arrOldValues[i] == 1 && i != intNewPos) {
            CONTROL.options[i].selected = true;
        } else if (arrOldValues[i] == 0 && i != intNewPos) {
            CONTROL.options[i].selected = false;
        }
        if (arrOldValues[intNewPos] == 1) {
            CONTROL.options[intNewPos].selected = false;
        } else {
            CONTROL.options[intNewPos].selected = true;
        }
    }
}

function GetSelectValues(CONTROL) 
{
    var strTemp = [];
    for (var i = 0; i < CONTROL.length; i++) {
        if (CONTROL.options[i].selected == true) {
            strTemp.push(1);
        } else {
            strTemp.push(0);
        }
    }
return strTemp;


}
function GetCurrentListValues(CONTROL) 
{
    arrOldValues = GetSelectValues(CONTROL);
}
</script>
<script type="text/javascript" src="select.js"></script> 
</head>
<body>
<%
String name=request.getParameter("count");
if(name.equals("one"))
{
String buffer1="<table>";
buffer1=buffer1+"<tr>";
buffer1=buffer1+"<td>";
buffer1=buffer1+"<SELECT class=\"select\" NAME=\"list1\" onMouseDown=\"GetCurrentListValues(this);\" id=\"list1\" MULTIPLE SIZE=10 style=\"width:150px;\" onClick=\"FillListValues(this)\">";

                                        buffer1=buffer1+"<option value=\"co_group\">Compnay Description</option>";
                                        buffer1=buffer1+"<option value=\"pe_rev_name\">Contact Name</option>";
                                        buffer1=buffer1+"<option value=\"co_tel_work\">Telephone</option>";
                    buffer1=buffer1+"<option value=\"action_flag\">Company Address</option>";
                                        buffer1=buffer1+"<option value=\"co_group\">Compnay Description</option>";
                                        buffer1=buffer1+"<option value=\"pe_rev_name\">Contact Name</option>";
                                        buffer1=buffer1+"<option value=\"co_tel_work\">Telephone</option>";
                                        buffer1=buffer1+"<option value=\"pe_position\">Contact Position</option>";
                                        buffer1=buffer1+"<option value=\"pe_tel_work\">Contact Telephone</option>";
                                        buffer1=buffer1+"<option value=\"ref_no\">ISBN</option>";
                                                                buffer1=buffer1+"</SELECT>";
                                                                buffer1=buffer1+"</td>";
                                                                buffer1=buffer1+"<td>";

          buffer1=buffer1+"<INPUT TYPE=\"button\" NAME=\"right\" VALUE=\"&gt;&gt;\" id=\"add\" style=\"width:40px;\"><BR><BR>";
          buffer1=buffer1+"<INPUT TYPE=\"button\" NAME=\"left\" VALUE=\"&lt;&lt;\" id=\"remove\" style=\"width:40px;\"><BR><BR>";


                                                                buffer1=buffer1+"</td>";
                                                                buffer1=buffer1+"<td>";

buffer1=buffer1+"<SELECT NAME=\"list2\" onMouseDown=\"GetCurrentListValues(this);\" id=\"list2\" MULTIPLE SIZE=10  style=\"width:150px;\" onClick=\"FillListValues(this)\">";

                                                                    buffer1=buffer1+"</SELECT></td></tr>";
                                    buffer1=buffer1+"</table>";
                                    response.getWriter().println(buffer1); 
}
%>

</body>
</html>

Answer 1

您在“父级”和“dispTable”中都拥有相同的Javascript - 您需要将其从其中一个中删除。

查看GetSelectValues(CONTROL)和FillListValues(CONTROL)等功能。

顺便说一下 - 你不需要使用“缓冲区”，你可以写这样的东西

....

请注意我使用了"one".equals(name)而不是name.equals("one")，因为它也处理了空案例。请告诉我，如果您有任何其他需要我可能错过的。

这是我的工作代码（因为它不支持JSP，我删除了工作区中的'one'.equals条件）

父文件如下所示：

<html>
      <head>
      <script language="javascript" type="text/javascript">
      function showEmp(str){
          $("#emp").load("dispTable.jsp");
      }
      </script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

      </head>
      <body>

      <script type="text/javascript">
          function add()
          {
               return !($('#list1 option:selected').remove().appendTo('#list2') && ($('#list2:last-child').selected="selected"));
          }
          function remove()
          {
               return !$('#list2 option:selected').remove().appendTo('#list1');
          }
</script>

<select name = "ratingsClient" style="width: 150px" id="ratingsClient" onchange="showEmp(this.value)">
<option value="aaa">aaa</option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<br>
      <div id="emp">
      <table name="emp" >

      </table>
      </div>
</body>
</html>

“dispTable”文件看起来像这样

<table>
<tr>
<td>
<SELECT class="select" NAME="list1" id="list1" MULTIPLE SIZE=10 style="width:150px;">;
    <option value="co_group">Compnay Description</option>
    <option value="pe_rev_name">Contact Name</option>
    <option value="co_tel_work">Telephone</option>
    <option value="action_flag">Company Address</option>
    <option value="co_group">Compnay Description</option>
    <option value="pe_rev_name">Contact Name</option>
    <option value="co_tel_work">Telephone</option>
    <option value="pe_position">Contact Position</option>
    <option value="pe_tel_work">Contact Telephone</option>
    <option value="ref_no">ISBN</option>
</SELECT>
</td>
    <td>
        <INPUT TYPE="button" NAME="right" VALUE="&gt;&gt;" id="add" onclick="add()" style="width:40px;"><BR><BR>
        <INPUT TYPE="button" NAME="left" VALUE="&lt;&lt;" id="remove" onclick="remove()" style="width:40px;"><BR><BR>
    </td>
    <td>
        <SELECT NAME="list2" id="list2" MULTIPLE SIZE=10 style="width:150px;">
        </SELECT>
    </td>
</tr>
</table>

编辑：扩展响应以显示如何使用“GET”方法而不是“LOAD”发送ajax请求中的选择框的“值”

function showEmp(str){
    $.get("dispTable.jsp",{"count":str},function(result){$("#emp").html(result)})
}

Ajax响应问题

1 个答案: