• 简单的ajax任务：get和post方式提交前端用户输入信息给服务器

    目录

    简单的ajax任务：

    用户输入用户名和密码，服务器接收后返回给浏览器展示用户名密码

    get请求的方式：

    package mypackage;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import  jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajaxrequest1")
public class AjaxRequestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        PrintWriter out = response.getWriter();
        out.print(""+username+","+password+"");
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>发送ajax get请求title>
head>
<body>
    <script type="text/javascript">
        window.onload = function (){
            document.getElementById("btn").onclick = function (){
                //1.创建核心对象
                var xhr = new XMLHttpRequest();
                //2.注册回调函数
                xhr.onreadystatechange = function () {
                    if(this.readyState == 4){
                        if(this.status == 200){
                            document.getElementById("mydiv").innerHTML = this.responseText;
                        }else{
                            alert(this.status);
                        }
                    }
                }
                //3.开启通道
                var username = document.getElementById("name").value;
                var password = document.getElementById("pass").value;
                xhr.open("get","/xmm/ajaxrequest1?username="+username+"&password="+password,true);
                //4.发送请求
                xhr.send();
            }

        }
    script>
    <input type="text" id="name" />
    <input type="password" id="pass"/>
    <button id="btn"> 发送ajax get请求button>
    <div id="mydiv">div>
body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    post请求的方式：

    package mypackage;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import  jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajaxrequest2")
public class AjaxRequestServlet02 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        PrintWriter out = response.getWriter();
        out.print(""+username+","+password+"");
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>发送ajax post请求title>
head>
<body>
    <script type="text/javascript">
        window.onload = function (){
            document.getElementById("btn").onclick = function (){
                //1.创建核心对象
                var xhr = new XMLHttpRequest();
                //2.注册回调函数
                xhr.onreadystatechange = function () {
                    if(this.readyState == 4){
                        if(this.status == 200){
                            document.getElementById("mydiv").innerHTML = this.responseText;
                        }else{
                            alert(this.status);
                        }
                    }
                }
                //3.开启通道
                xhr.open("post","/xmm/ajaxrequest2",true);
                //4.发送请求
                //ajax模拟表单提交，post方式必须加这一行，不然数据无法发送，且必须在open语句之后
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                var username = document.getElementById("name").value;
                var password = document.getElementById("pass").value;
                xhr.send("username="+username+"&password="+password);
            }

        }
    script>
<input type="text" id="name" />
<input type="password" id="pass"/>
<button id="btn"> 发送ajax post请求button>
<div id="mydiv">div>
body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
  • 相关阅读:
    应用在Wi-Fi音箱中的国产高性能DSP音频处理芯片
    8 STM32标准库函数 之 实时时钟（RTC）所有函数的介绍及使用
    Python球球大作战
    一个使用uniapp+vue3+ts+pinia+uview-plus开发小程序的基础模板
    shell实验
    重构项目 vue2 =＞ vue3 & nuxt2 =＞ nuxt3 遇到的问题
    我对移相器的理解(1)：单bit的移相结构
    一种方便快捷的服务注册方案
    程序公司商业合作保密协议书
    量子计算实现：量子算法的实现
  • 原文地址：https://blog.csdn.net/m0_53881899/article/details/126677510