Jquery Ajax 请求和 Jsp 响应
Posted
技术标签:
【中文标题】Jquery Ajax 请求和 Jsp 响应【英文标题】：Jquery Ajax request and Jsp response 【发布时间】：2015-03-18 17:21:08 【问题描述】：我正在使用 Ajax、Jquery 和 Jsp 进行锻炼，但我有一个问题，我想显示嵌套选择，第二个取决于第一个，但是当我在第一个选择中进行选择时，我什么也看不到。 我希望你能帮助我，这里是代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/city.js"></script>
</head>
<body>
<div id="state"> State
<select id="state">
<option id="IT" value="italy" selected="selected">Italy</option>
<option id="FR" value="france">France</option>
<option id="SP" value="spain">Spain</option>
</select>
</div>
<div id="city"> City
<select id ="city"></select>
</div>
</body>
</html>
city.js
$(document).ready(function ()
$("#state").onchange(function ()
var state = $("select#state option:selected").val();
$.ajax(
type: "POST",
url: 'jspState.jsp',
data: stateName: state,
success: function (result)
$("#city").html(result);
,
error: function (e)
alert('Errore');
)
)
)
jspState.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% response.setContentType("text/html");
String state = request.getParameter("stateName");
String it = "italy";
String fr = "france";
String sp = "spain";%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/city.js"></script>
</head>
<body>
city
<select id ="city"> <% if (0==it.compareTo(state)) %>
<option value="palermo">Palermo</option>
<option value="roma">Roma</option>
<option value="milano">Milano</option>
<% if (0==fr.compareTo(state)) %>
<option value="paris">Paris</option>
<option value="marsille">Marsille</option>
<option value="nice">Nice</option>
<% if (0==sp.compareTo(state)) %>
<option value="madrid">Madrid</option>
<option value="barcelona">Barcelona</option>
<option value="sivilla">Sivilla</option>
<% %>
</select>
</body>
</html>
【问题讨论】：
$(document).html(result);?也许$('body').html(result);.
你能提醒错误“e”，看看它显示了什么。
替换整个页面看起来不太好（您应该只替换第二个选择节点的内容）。但是，如果您确实希望替换整个页面，请查看 ***.com/questions/1236360/…
我尝试了，但没有任何改变...可能是jsp响应的问题？
您可以尝试使用 Chrome 开发者工具调试您的 javascript 代码，在 $(document).html(result) 行之前放置一个断点，或插入一个带有单个单词“debugger”的行.如果响应有问题，您会看到的。
【参考方案1】：
我希望您现在自己想通了（并且熟悉了可以帮助您调试此类错误的工具，例如 Chrome 开发人员工具或类似工具）。
如果您没有：如果您在将页面 URL 放入 Chrome 地址栏中之前，打开 Chrome 开发者工具，您会在该行看到一条错误消息
$("#state").onchange(function ()
在 city.js 中。上网查了一下，$("#state").onchange( function(..的语法不正确，必须改写$("#state").on('change',function (..。
如果您将debugger; 放在$("#city").html(result); 之前，您会看到result 不仅包含字符串city <select>..，还包含不应被<div id="city"> 元素包围的<body><html>。
我现在附上更正的代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/city.js"></script>
</head>
<body>
<div id="state"> State
<select id="state">
<option id="IT" value="italy" selected="selected">Italy</option>
<option id="FR" value="france">France</option>
<option id="SP" value="spain">Spain</option>
</select>
</div>
<div id="city"> City
<select id ="city"></select>
</div>
</body>
</html>
city.js
$(document).ready(function (ev1)
//syntax corrected
$("#state").on('change',function (ev2)
var state = $("select#state option:selected").val();
$.ajax(
type: "POST",
url: 'jspState.jsp',
data: stateName: state,
success: function (result)
debugger;
$("#city").html(result);
,
error: function (e)
alert('Errore');
)
)
)
jspState.jsp（删除了所有<html><body>等标签）
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% response.setContentType("text/html");
String state = request.getParameter("stateName");
String it = "italy";
String fr = "france";
String sp = "spain";%>
City:
<select id ="city"> <% if (0==it.compareTo(state)) %>
<option value="palermo">Palermo</option>
<option value="roma">Roma</option>
<option value="milano">Milano</option>
<% if (0==fr.compareTo(state)) %>
<option value="paris">Paris</option>
<option value="marsille">Marsille</option>
<option value="nice">Nice</option>
<% if (0==sp.compareTo(state)) %>
<option value="madrid">Madrid</option>
<option value="barcelona">Barcelona</option>
<option value="sivilla">Sivilla</option>
<% %>
</select>
【讨论】：
以上是关于Jquery Ajax 请求和 Jsp 响应的主要内容，如果未能解决你的问题，请参考以下文章
jQuery：我可以在较长的 $.ajax 请求待处理时发送和接收 $.ajax 响应吗？
来自 Django 模板的 Ajax JQuery 请求和响应