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

姓蔡小朋友

已于 2022-10-12 20:53:50 修改

阅读量548

点赞数

分类专栏： AJAX 文章标签： ajax 前端服务器

于 2022-09-03 14:49:55 首次发布

本文链接：https://blog.csdn.net/m0_53881899/article/details/126677510

版权

AJAX 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

简单的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("<font color='red'>"+username+","+password+"</font>");
    }
}

<%@ 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>

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("<font color='red'>"+username+","+password+"</font>");
    }
}

<%@ 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>