JSP 페이지에 아약스 액션을 추가하는 방법은 무엇입니까?

날짜 필드에 아약스 액션을 추가해야합니다. 사용자가 적절한 날짜를 선택하면 테이블에 모든 무료 아파트가 표시되어야합니다.JSP 페이지에 아약스 액션을 추가하는 방법은 무엇입니까?

JSP 페이지에서이를 구현하는 방법. 저는 JavaEE에 새로 왔습니다. 여기

페이지의 내용이다 :

이 아약스 기술자는 일반적으로 JSP에서 작동 않는 방법

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %> 
<%@ page errorPage="error/errHandler.jsp" %> 

<jsp:include page="/WEB-INF/jspf/header.jspf" /> 

<html> 
<head> 
    <title>Reservation an apartment</title> 
    <h1 align="left">Reservation an apartment</h1> 
</head> 
<body> 
    <form method="post" action="${pageContext.request.contextPath}/bookRoom"> 
     <div class="reservation-group" align="left"> 
      <label class="places-label">Couch places at room</label> 
      <span class="selections"> 
       <select id="r_select"> 
        <option>select</option> 
        <option>1 person</option> 
        <option>2 persons</option> 
        <option>3 persons</option> 
        <option>4 persons</option> 
       </select> 
      </span> 
     </div> 
     <br/><br/> 
     <div class="reservation-group" align="left"> 
      <label>Star rating</label> 
      <select> 
       <option>select</option> 
       <option>2 stars</option> 
       <option>3 stars</option> 
       <option>4 stars</option> 
       <option>5 stars</option> 
      </select> 
     </div> 
     <br/><br/> 
     <div align="left"> 
      <label>Check-in date</label> 
      <input type="date" placeholder="yy/mm/dd"/> 
     </div> 
     <br/><br/> 
     <div align="left"> 
      <label>Check-out date</label> 
      <input type="date"/> 
     </div> 
     <br/><br/> 
     <div class="register-group" align="left"> 
      <div class="selections"> 
       <input type="reset" value="Reset" class="btn" /> 
       <input type="submit" value="Register" class="btn" /> 
      </div> 
     </div> 
    </form> 
</body> 
</html>

? 우리는 자바 스크립트 또는 jquery를 사용해야합니까? 그렇다면 정확히 어떻게 될 것입니다.

페이지의 상대 : 나는이 구현을 이해하려는

room register

. 어떤 제안이라도 감사합니다.

출처

2014-02-23 nazar_art

이를 온 클릭, 위해 onblur() 이벤트도

<script> 

function onDateChange(){ 

//Alert OnChange is Called 
alert("Date Changed"); 

//Send ajax call 


} 

</script>

출처

2014-02-24 07:22:56

선택 상자에 무엇을 추가해야하는지 오해하겠습니다. 모두 같다. –

선택 상자에 ID를 추가하면 자바 스크립트에서 참조 할 수 있습니다. 귀하의 웹 페이지에 제공 한 코드를 추가하고 JQuery JavaScript 파일을로드하십시오 : '' 서버에서받은 데이터로 목록을 채우기 위해 고유 한 코드를 추가해야합니다. –

onChange 이벤트를 사용하고 onChange 이벤트에서 ajax 호출을 보냅니다.

당신은,

<input type="date" placeholder="yy/mm/dd" onchange="sendAjax()" id="checkInDate" />

당신은 JQuery와 것,

<script type= "text/javascript"> 

    $(document).ready(function() { 


    }); 

    function sendAjax() { 
     var checkInDate= $("#checkInDate").val(); 
     //var checkOutDate= $("#checkOutDate").val(); 

     $.ajax({ 
      type: "POST", 
      url: "You URL path" 
      data: "checkInDate" + checkInDate, 
      dataType: "html", 
      success: function(response) { 

       //alert("Success : "+response); 
       if(response != null && response !="" && response !="null"){ 
        //do you stuff here 
       } 

      }, 
      error: function(e) { 
       alert('Error: ' + e.message); 
      }, 
     }); 
    } 


</script>

출처

2014-02-24 05:37:18 Charitha

사용 등의 onchange 이벤트를 사용할 수 있습니다 타이와 아무 상관이 없다. (당신의 경우 JSP에서) 사용하는 서버 측 뷰 렌더링 기술의 일부인 경우, 일부 JavaScript 코드가 날짜 선택 상자의 변경에 반응하고 주어진 사용 가능한 아파트를 반환하는 서버 함수에 대한 호출을 트리거하는 문제입니다 입력 한 날짜.

JQuery 은입니다. JavaScript는 일반적으로 사용되는 JavaScript 프레임 워크입니다. 그리고 네, 당신은이 작업에 아주 잘 사용할 수 있습니다. 그냥 ("checkindate"예를 들어) 날짜 선택 상자에 ID를 추가

<input id="checkindate" type="date" placeholder="yy/mm/dd"/>

후 선택한 날짜와 서버를 호출하는 변경 이벤트에 코드를 연결하는 JQuery와 사용

$(document).ready(function() { 
    $("#checkindate").change(function(event) { 
     var selectedDate = event.target.value; 

     $.get("/your/server/function?selectedDate=" + selectedDate, function(data) { 
      // populate list with data 
     }, "json"); 
    }); 
});

서버 기능은 쿼리 매개 변수 "selectedDate"를 읽고 해당 구성으로 사용 가능한 아파트 목록 (예 : JSON)을 클라이언트에 반환해야합니다.

출처

2014-02-24 06:40:03

JSP 페이지에 아약스 액션을 추가하는 방법은 무엇입니까?

답변

관련 문제