Jquery Ajax 请求和 Jsp 响应答案

【问题标题】：Jquery Ajax request and Jsp responseJquery Ajax 请求和 Jsp 响应
【发布时间】：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”，看看它显示了什么。
替换整个页面看起来不太好（您应该只替换第二个选择节点的内容）。但是，如果您确实希望替换整个页面，请查看 stackoverflow.com/questions/1236360/…
我尝试了，但没有任何改变...可能是jsp响应的问题？
您可以尝试使用 Chrome 开发者工具调试您的 JavaScript 代码，在 $(document).html(result) 行之前放置一个断点，或插入一个带有单个单词“debugger”的行.如果响应有问题，您会看到的。

标签： jquery html ajax jsp web-applications

【解决方案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>

【讨论】：