Ajax响应问题
Ajax response issue
我有一个2个jsp文件，如下所示。
我有一个父jsp页面，其中的选择下拉框中有两个选项。
我还有另一个jsp，它在表中显示选择框。
如果用户在下拉选择框中选择了选项"one"，我希望dispTable.jsp的输出在parent.jsp页面中作为ajax响应。
我面临的问题是parent.jsp页面将parent.jsp中dispTable.jsp的内容显示为ajax响应，但">>"answers"<lt；'按钮不起作用。
但是，如果我试图通过直接在url中提供参数和值来执行dispTable.jsp，那么选择表和按钮就可以完美地工作。
为什么同样的输出对parent.jsp.无效
对于下面的url，输出运行良好。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='">>'" id='"add'" style='"width:40px;'"><BR><BR>";
buffer1=buffer1+"<INPUT TYPE='"button'" NAME='"left'" VALUE='"<<'" 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>
您在"parent"answers"dispTable"中都有相同的Javascript，您需要将其从其中一个中删除。
参见类似CCD_ 1和CCD_。
顺便说一句，你不需要使用"缓冲区"，你可以写这样的
。。。。请注意，我使用了"one".equals(name)而不是name.equals("one")，因为它也处理空情况。如果你还需要什么，我可能错过了，请告诉我。
这是我的工作代码（我在工作区中删除了if‘one’.equals条件，因为它不支持JSP）
父文件如下所示：
<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=">>" id="add" onclick="add()" style="width:40px;"><BR><BR>
<INPUT TYPE="button" NAME="left" VALUE="<<" 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>
EDIT：扩展响应以显示如何使用"GET"方法而不是"LOAD"发送ajax请求中选择框的"值"
function showEmp(str){
$.get("dispTable.jsp",{"count":str},function(result){$("#emp").html(result)})
}
相关文章：
- RubyonRails-Ajax响应的问题
- Http响应拆分安全问题的XMLHTTPRequest/Response用例的Filter实现
- 响应菜单问题-如何在移动环境中处理HREF和onclick事件
- node.js+MySQL;JSON结果-回调问题&没有响应客户端
- 响应出现JSON格式问题
- 位置问题:固定和响应/自适应布局
- 如何解决等待多个请求以javascript发送响应的问题
- 分析JSON响应时出现问题
- Javascript随机名称猜测者:无响应的脚本问题
- 响应式 d3 图形的问题
- 创建响应 html 表时出现的问题
- 绘制图表.js包含 ajax 数据和响应式.一些问题和疑问
- Vis图形库，Twitter引导的响应式设计问题
- 响应问题 JQzoom
- 有关在 $.get(） 中获取响应的问题
- Internet Explorer Ajax 调用，缓存响应问题
- 获得响应时出现问题
- 覆盖在“背景大小:包含”上的响应式 DIV - 解决警报触发的问题
- XMPP BOSH 响应问题
- 2个问题-响应式设计与Bootstrap &;固定了页面底部的箭头
