Ajax向Servlet传值小实例

来源：互联网发布：python爬虫有什么用编辑：程序博客网时间：2024/06/05 15:31

Ajax向Servlet传值小实例

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

JAR包下载
使用Ajax需要JQuery.js文件，下载：http://www.jq22.com/jquery-info122
生成和解析json格式需要使用Gson.jar包，下载：http://download.csdn.net/detail/u010637692/8348917
ajaxDemo.jsp
新建一个Web工程，导入JQuery.js文件和Gson.jar包，目录结构如下：
新建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">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->    <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();    }}

输出

这里写图片描述

0 0