• 简单的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
  • 相关阅读:
    随机用户名获取易语言代码
    数智随行 | 探想未来工厂数字化，强化智能设备管理
    Lit（五）：事件
    【算法】折半插入排序
    Hive存储格式之ORC File详解，什么是ORC File
    数据结构和算法——排序算法
    【基础计算】ESDF栅格距离图计算并行加速版 (附源码)
    【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效 的 解决方案
    看完就明白/dev/sda、/dev/hda是什么了
    java基础
  • 原文地址：https://blog.csdn.net/m0_53881899/article/details/126677510