当前位置：首页 > news >正文

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

news 来源：原创 2024/5/19 17:29:50

简单的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>