携带信息的Ajax GET请求

最新推荐文章于 2024-04-28 04:05:42 发布

heliuerya

最新推荐文章于 2024-04-28 04:05:42 发布

阅读量510

点赞数

分类专栏： ajax 学习笔记文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/heliuerya/article/details/130518837

版权

学习笔记同时被 2 个专栏收录

277 篇文章 5 订阅

订阅专栏

ajax

8 篇文章 0 订阅

订阅专栏

前端页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax get请求</title>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                //获取页面中用户动态输入的信息
                var userName = document.getElementById("userName").value;
                var pwd = document.getElementById("pwd").value;

                //发送ajax get请求
                //1.创建XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                //2.注册回调函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {  //也可以写成:this.readyState == 4
                        if (xhr.status == 200) {    //还可以写成：this.status == 200
                            document.getElementById("myDiv").innerHTML = xhr.responseText;
                        }else {
                            alert(xhr.status);
                        }
                    }
                };
                //3.打开通道
                //get请求提交数据是在“请求行”上提交,写在url中
                xhr.open("GET","/ajax/request2?userName="+ userName +"&pwd="+ pwd,true);
                //4.发送请求
                xhr.send();
            }
        }
    </script>
</head>
<body bgcolor="#fff8dc">
    用户名：<input type="text" id="userName"/><br/>
    密码：<input type="password" id="pwd"/><br/>
    <button id="btn">发送ajax get请求</button>
    <div id="myDiv"></div>
</body>
</html>

服务端代码：

package com.yjg.ajax.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/request2")
public class AjaxRequest2Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //获取前端信息
        String userName = request.getParameter("userName");
        String pwd = request.getParameter("pwd");
        //设置响应内容的类型和字符集
        response.setContentType("text/html;charset=UTF-8");
        //获取输出流
        PrintWriter out = response.getWriter();
        //输出响应内容
        out.print("<font color = 'red'>用户名:"+ userName +"；密码："+ pwd +" </font>");
    }
}

程序运行之后浏览器页面显示：