Question

我在ajax中创建一个简单的2页页面加载器。在index.jsp中我有<form>文本字段和提交按钮当我点击submit按钮时，它将转到servlet，它只会休眠3秒钟，然后重定向到second.jsp
在那3秒钟的睡眠中，我想展示一个页面加载器我试图从onclick调用ajax函数，但没有任何工作以下是代码：
index.jsp：

<html>
<head><title>first</title>
<link href="mycss.css" rel="stylesheet">
<script type="text/javascript" src="jquery1.10.2.js" />
<script type="text/javascript">
function callAjax()
{
    $.ajax({
        type: 'POST',
        url: '/toSecond',
        data: {
            //name: $('#name').val()
        },
        beforeSend:function(){
            document.getElementById('loader').show();
        },
        success:function(data){
            alert('completed');           
        },
        error:function(){
            // failed request; give feedback to user
        }
    });
}
</script>
</head>
<body>
<form>
    Name: <input type="text" id="name" name="name"/>
    <input type="submit" id="submitBtn" value="submit" onclick="callAjax();"/>
</form>

<div class="modal" id="loader"></div> <!--a page-loader GIF defined in the css -->

</body>
</html>

CSS：

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

Servlet：

public class TempServlet extends HttpServlet
{
    public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException
    {
        String name = (String)req.getParameter("name");
        try{
            Thread.sleep(3000);
        } catch(Exception e){
            e.printStackTrace();
        }

        RequestDispatcher dispatcher  = req.getRequestDispatcher("second.jsp");
        dispatcher.forward(req, res);

    }

}

second.jsp：

<html>
<head><title>first</title>
</head>
<body>
second page
</body>
</html>

web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
    <display-name>TEMP</display-name>

    <servlet>
        <servlet-name>toSecond</servlet-name>
        <servlet-class>TempServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>toSecond</servlet-name>
        <url-pattern>/toSecond</url-pattern>
    </servlet-mapping>


</web-app>

我哪里错了？我没有从html表单中进行正确的Ajax调用吗？

无法从JSP表单

0 个答案: