Jquery Ajax 요청 및 Jsp 응답

저는 Ajax, Jquery 및 Jsp로 운동을하고 있지만 문제가 있습니다. 중첩 된 선택을 표시하고 싶습니다. 두 번째는 첫 번째 것에 달려 있지만, 내 것을 할 때는 아무것도 볼 수 없습니다. 첫 번째 선택에서 선택하십시오.Jquery Ajax 요청 및 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>

출처

2015-01-20 Juppy

'$ (document) .html (resu lt); 아마'$ ('body') .html (result);'. – Musa

은 'e'오류를 경고하고 그 내용을 볼 수 있습니다. – CodeHunter

전체 페이지를 바꾸는 것이 좋지 않습니다 (두 번째 선택 노드의 내용 만 바꾸면됩니다). 그러나 전체 페이지를 바꾸려면 http://stackoverflow.com/questions/1236360/how-do-replace-the-entire-html-node-using-jquery –

난 당신이 지금 자신이 그것을 생각 (그리고 당신은 크롬 개발자 도구 또는 이와 유사한 같은 오류를 디버깅하는 데 도움이되는 도구를 잘 알고있어) 희망 : 나는 당신이 날 도울 수 있기를 바랍니다, 여기에 코드입니다 .

경우

하지 않으 셨습니다 : 당신은, 크롬의 주소 표시 줄에 페이지의 URL을 놓기 전에, Chrome 개발자 도구를 열 경우, 당신은 city.js의 라인

$("#state").onchange(function() {

에 오류 메시지가 표시 될 것입니다 . 인터넷을 검색하면 $("#state").onchange(function(..의 구문이 올바르지 않으며 대신 $("#state").on('change',function (..을 작성해야한다고 제안합니다. 당신이 $("#city").html(result); 전에 debugger;을 넣으면

, 당신은 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

<%@ 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>

(제거 모든 <html><body> 등 태그) :

은 이제 수정 된 코드를 첨부

출처

2015-01-28 15:29:49

Jquery Ajax 요청 및 Jsp 응답

답변

관련 문제