AJAX（2）——使用jQuery实现Ajax

最新推荐文章于 2025-03-17 13:55:58 发布

原创最新推荐文章于 2025-03-17 13:55:58 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JSP #Servlet #AJAX #jQuery

AJAX 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了使用Ajax与Servlet进行前后端数据交互的过程，包括如何通过Ajax发送POST请求到Servlet，以及Servlet如何接收并处理这些请求，最后将处理结果以字符串形式返回给前端。

效果展示

项目结构

源码

java

AjaxServlet.java

package servlet;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        // 设置请求的编码
        req.setCharacterEncoding("utf-8");
        // 设置响应的编码
        resp.setContentType("text/html;charset=utf-8");
        // 获取用户名并进行解码
        String username = URLDecoder.decode(req.getParameter("username"), "utf-8");
        // 获取密码并进行解码
        String password = URLDecoder.decode(req.getParameter("password"), "utf-8");
        // 输出
        String str = username + "的密码是 " + password;
        // 控制台输出
        System.out.println(str);
        // 前台响应输出
        PrintWriter out = resp.getWriter();
        out.print(str);
        out.close();
    }
}

web

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         version="2.5">
    <!--欢迎页面-->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
    <!--AjaxServlet-->
    <servlet>
        <servlet-name>AjaxServlet</servlet-name>
        <servlet-class>servlet.AjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AjaxServlet</servlet-name>
        <url-pattern>/ajaxServlet</url-pattern>
    </servlet-mapping>
</web-app>

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<form ction="">
    用户名： <input name="username" type="text" id="username"/><br>
    密码： <input name="password" type="password" id="password"/><br>
    <input type="button" value="提交" onclick="ajaxSubmit();">
</form>
<script type="text/javascript" charset="UTF-8">
    function ajaxSubmit() {
        var username = $("#username").val();
        var password = $("#password").val();
        // 将数据以JSON的方式传到后端
        var jsonData = {"username": username, "password": password};
        // "ajaxServlet"指的是后端处理Servlet，jsonData指的是传过去的JSON数据，function(data)指的是返回的数据
        $.post("ajaxServlet", {"username": username, "password": password}, function (data) {
            // data为返回的数据
            alert(data);
        });
    }
</script>
</body>
</html>