Ajax向Servlet传值小实例

最新推荐文章于 2022-08-29 11:22:43 发布

会飞的马

最新推荐文章于 2022-08-29 11:22:43 发布

阅读量2.1w

点赞数 6

分类专栏： Web前端文章标签： servlet ajax json

本文链接：https://blog.csdn.net/u010371710/article/details/52582764

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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();
    }

}

输出

这里写图片描述

会飞的马

关注

6
点赞
踩
21

收藏

觉得还不错? 一键收藏
3
评论
Ajax向Servlet传值小实例

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

扫一扫

专栏目录