AJAX实现_JQuery实现方式get&post

$.get():发送get请求

语法：$.get(url,[data],[callback],[type])
- 参数：
  - url：请求路径
  - data：请求参数
  - callback：回调函数
  - type：响应结果的类型

ajaxServlet

package com.ailyt.servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(value = "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");

        System.out.println(username);

        response.getWriter().println(username);


    }
}

JQuery实现方式2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        //定义方法
        function fun() {
            $.get("/ajaxServlet", {username: "rose"}, function (data) {
                alert(data);
            },"text");
        }
    </script>

</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();"/>
<input>
</body>
</html>

JQuery实现方式3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        //定义方法
        function fun() {
            $.post("/ajaxServlet", {username: "pol"}, function (data) {
                alert(data);
            },"text");
        }
    </script>

</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();"/>
<input>
</body>
</html>