Question

我必须在日期字段中添加ajax动作。当用户选择合适的日期时，应该在表格中显示所有免费公寓。

如何在jsp页面实现此功能。我是JavaEE的新成员。

以下是页面内容：

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

这个ajax技术人员如何在jsp上工作？我们需要使用javascript或jquery吗？如果是，那究竟是对的。

查看页面：

room register

我想了解这个实现。任何建议都表示赞赏。

Answer 1

将onchange事件用作

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

Answer 2

使用onChange事件，并在onChange事件上发送ajax调用。

您也可以使用onClick，onblur（）事件

<script>

function onDateChange(){

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

//Send ajax call


}

</script>

Answer 3

这与您正在使用的服务器端视图呈现技术的类型无关（在您的案例中为JSP），这是一个问题，即让一些JavaScript代码对日期选择框中的更改作出反应，然后触发调用到服务器功能，返回给定输入日期的可用公寓。

JQuery 是 JavaScript，它是一种常用的JavaScript框架。是的，您可以很好地将它用于此任务。只需在日期选择框中添加一个ID（例如“checkindate”）：

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

然后使用JQuery将代码附加到使用所选日期调用服务器的change事件：

$(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格式的可用公寓列表并将其返回给客户端。

如何在jsp页面中添加ajax动作？

3 个答案: