Ajax向Servlet传值小实例

桃扇骨 2022-09-26 03:02 53阅读 0赞

## Ajax向Servlet传值小实例 ##

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。下面是使用Ajax向后台Servlet传递JSON格式的数据的一个小实例。Ajax接收后台Servlet传过来的json数据请参考：[http://blog.csdn.net/u010371710/article/details/46006453][http_blog.csdn.net_u010371710_article_details_46006453]

*  **JAR包下载**
    
    使用Ajax需要JQuery.js文件，下载：[http://www.jq22.com/jquery-info122][http_www.jq22.com_jquery-info122]  
    生成和解析json格式需要使用Gson.jar包，下载：[http://download.csdn.net/detail/u010637692/8348917][http_download.csdn.net_detail_u010637692_8348917]
 *  **ajaxDemo.jsp**
    
    新建一个Web工程，导入JQuery.js文件和Gson.jar包，目录结构如下：  
    ![这里写图片描述][20160919092256948]
    
    新建ajaxDemo.jsp文件作为前端显示页面。ajaxDemo.jsp代码如下：

<%@ page language="java" pageEncoding="utf-8"%>
    
    <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
        <base href="<%=basePath%>">
    
        <title>My JSF 'ajaxDemo.jsp' starting page</title>
    
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        
        <script type="text/javascript" src="jquery-3.0.0.js"></script>
        <script type="text/javascript" src="ajaxFun.js"></script>
    </head>
    
    <body>
        <form id="form">
            UserName:<input type="text" name="username" id="username">
            PassWord:<input type="password" name="password" id="password">
            <button type="button" onclick="ajaxFun()">AJAX功能</button>
        </form>
    </body>
    </html>

*  **ajaxFun.js**
    
    新建一个JavaScript文件：ajaxFun.js，在jsp中引用外部js文件。

function ajaxFun(){ 
        $.ajax({
            type: "POST",
            url: "TestServlet",
            data: $('#form').serialize(),
            success: function(msg){ 
                    $.messager.alert('信息','模板保存成功');
            }
        })
    }

*  **User类**

新建一个User类用于保存前台传过来的用户名和密码，代码如下：

package com.entity;
    
    public class User {
        private String username;
        private String password;
    
        public String getUsername() {
            return username;
        }
        public void setUsername(String username) {
            this.username = username;
        }
        public String getPassword() {
            return password;
        }
        public void setPassword(String password) {
            this.password = password;
        }
    }

*  **TestServlet**

新建一个Servlet并在web.xml中对servlet进行配置：

<servlet>
        <servlet-name>TestServlet</servlet-name>
        <servlet-class>com.servlet.TestServlet</servlet-class>
      </servlet>
    
      <servlet-mapping>
        <servlet-name>TestServlet</servlet-name>
        <url-pattern>/TestServlet</url-pattern>
      </servlet-mapping>

TestServlet的代码如下：

package com.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.jws.soap.SOAPBinding.Use;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.entity.User;
    import com.google.gson.Gson;
    
    public class TestServlet extends HttpServlet {
    
        public TestServlet() {
            super();
        }
    
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
    
            doPost(request, response);
        }
    
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
    
            response.setContentType("text/html");
            PrintWriter out = response.getWriter();
            String username=request.getParameter("username");
            String password=request.getParameter("password");
    
            System.out.println("UserName:"+username+";"+"PassWord:"+password);
    
            Gson gson=new Gson();
            User user=new User();
            user.setUsername(username);
            user.setPassword(password);
    
            String info=gson.toJson(user);
            System.out.println(info);
    
            out.print("success");
            out.flush();
            out.close();
        }
    
    }

*  **输出**

![这里写图片描述][20160919091928819]

![这里写图片描述][20160919091946413]

[http_blog.csdn.net_u010371710_article_details_46006453]: http://blog.csdn.net/u010371710/article/details/46006453
[http_www.jq22.com_jquery-info122]: http://www.jq22.com/jquery-info122
[http_download.csdn.net_detail_u010637692_8348917]: http://download.csdn.net/detail/u010637692/8348917
[20160919092256948]: /images/20220717/867ca032206d4021a74441cbc3bf1898.png
[20160919091928819]: /images/20220717/f3049cfa60d441898f2c53264c9f0103.png
[20160919091946413]: /images/20220717/3b7159e8c84942a2986979c6c5598075.png