Ajax：ajax发送Post请求、ajax案例

已于 2022-07-21 22:55:40 修改
阅读量1.5w 收藏 97
点赞数 14
分类专栏： # Ajax总结 文章标签： ajax javascript servlet
于 2022-07-21 22:53:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengfengling999/article/details/125917297
版权
本文档介绍了如何使用Ajax发送POST请求，包括模拟表单提交、验证用户名可用性和动态展示学生列表。通过创建XMLHttpRequest对象，设置请求头，打开连接并发送数据，实现了前后端交互。示例代码展示了Servlet处理这些请求的方式，以及如何从数据库获取和验证用户数据。
摘要由CSDN通过智能技术生成

目录：

（1）ajax发送Post请求

（2）ajax发送post请求模拟提交表单数据

（3）ajax案例验证用户名是否可用

（4）发送ajax请求动态展示学生列表案例

 

（1）ajax发送Post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax post请求</title>
</head>
<body>

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("mybtn").onclick = function () {
            // 发送AJAX POST请求
            // 1. 创建AJAX核心对象
            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", "/ajax/ajaxrequest3", true)

            // 4. 发送请求
            xhr.send()
        }
    }
</script>

<button id="mybtn">发送AJAX POST请求</button>

<div id="mydiv"></div>

</body>
</html>

AjaxRequest3Servlet：out返回的数据回被浏览器：XMLHttpRequest对象获取

package com.bjpowernode.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("/ajaxrequest3")
public class AjaxRequest3Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print("<font color='red'>用户名已存在！！！</font>");

       
    }
}

 （2）ajax发送post请求模拟提交表单数据

ajaxPost.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax post请求</title>
</head>
<body>

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("mybtn").onclick = function () {
            // 发送AJAX POST请求
            // 1. 创建AJAX核心对象
            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", "/ajax/ajaxrequest3", true)

            // 4. 发送请求
            // 怎么模拟AJAX提交form表单呢？设置请求头的内容类型(这行代码非常关键，是模拟form表单提交的关键代码。)
            // 设置请求头的内容类型时，必须在open之后。
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

            // 放到send()这个函数的小括号当中的数据，会自动在请求体当中提交数据。
            // 使用JS代码获取用户填写的用户名和密码
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            //xhr.send("注意格式：放在这里的数据就是在请求体当中提交的，格式不能随便来，还是需要遵循HTTP的协议：name=value&name=value&name=value")
            xhr.send("username="+username+"&password="+password)
        }
    }
</script>

用户名<input type="text" id="username"><br>
密码<input type="password" id="password"><br>

<button id="mybtn">发送AJAX POST请求</button>

<div id="mydiv"></div>

</body>
</html>

AjaxRequest3Servlet：

package com.bjpowernode.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("/ajaxrequest3")
public class AjaxRequest3Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        //out.print("<font color='red'>用户名已存在！！！</font>");

        // 获取提交数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        out.print("用户名是：" + username + "，密码是：" + password);
    }
}

 （3）ajax案例验证用户名是否可用

 ajax5.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX POST请求验证用户名是否可用</title>
</head>
<body>

<script type="text/javascript">
    window.onload = function(){

        //获得焦点，span标签清空
        document.getElementById("username").onfocus = function (){
            document.getElementById("tipMsg").innerHTML = ""
        }

        //失去焦点，触发ajax请求
        document.getElementById("username").onblur = function (){
            //console.log("正在发送AJAX POST请求验证用户名")
            // 发送AJAX POST请求
            // 1.
            var xhr = new XMLHttpRequest()
            // 2.
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("tipMsg").innerHTML = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            // 3.开启通道
            xhr.open("POST", "/ajax/ajaxrequest4", true)
            // 4.设置表单请求头
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            // 获取表单数据
            var username = document.getElementById("username").value
            xhr.send("uname=" + username)
        }
    }
</script>

用户名：<input type="text" id="username">

<span id="tipMsg"></span>

</body>
</html>

AjaxRequest4Servlet:

package com.bjpowernode.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;
import java.sql.*;


@WebServlet("/ajaxrequest4")
public class AjaxRequest4Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 获取用户名
        String uname = request.getParameter("uname");
        // 打布尔标记（一种编程模型）
        boolean flag = false; // 默认是用户名不存在。
        // 连接数据库验证用户名是否存在
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            // 1.注册驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
            // 2.获取连接
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC", "root", "123456");
            // 3.获取预编译的数据库操作对象
            String sql = "select id,name from t_user where name = ?";
            ps = conn.prepareStatement(sql);
            ps.setString(1, uname);
            // 4.执行SQL语句
            rs = ps.executeQuery();
            // 5.处理结果集
            if (rs.next()) {
                // 用户名已存在。
                flag = true;
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // 6.释放资源
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (ps != null) {
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }

        // 响应结果到浏览器
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        if (flag) {
            // 用户名已存在，不可用
            out.print("<font color='red'>对不起，用户名已存在</font>");
        }else{
            // 用户名不存在，可以使用
            out.print("<font color='green'>用户名可以使用</font>");
        }
    }
}

 数据库表中的数据：

 （4）发送ajax请求动态展示学生列表案例

 

ajax6.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送AJAX请求，显示学生列表</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("stutbody").innerHTML = this.responseText

                    } else {
                        alert(this.status)
                    }
                }
            }
            // 3.开启通道
            xhr.open("GET", "/ajax/ajaxrequest5?t=" + new Date().getTime(), true)
            // 4.发送请求
            xhr.send()
        }
    }
</script>

<input type="button" value="显示学员列表" id="btn">

<table width="50%" border="1px">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>住址</th>
    </tr>
    </thead>
    <tbody id="stutbody">
    <!--<tr>
        <td>1</td>
        <td>张三</td>
        <td>20</td>
        <td>北京大兴区</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>22</td>
        <td>北京海淀区</td>
    </tr>-->
    </tbody>
</table>

</body>
</html>

AjaxRequest5Servlet:

package com.bjpowernode.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;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;


@WebServlet("/ajaxrequest5")
public class AjaxRequest5Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 连接数据库，查询学员信息，拼接HTML代码，响应HTML代码到浏览器（这里就不再连接数据库了，写死了。）
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        // 不连接数据库，拼接HTML代码
        StringBuilder html = new StringBuilder();

        html.append("<tr>");
        html.append("<td>1</td>");
        html.append("<td>王五</td>");
        html.append("<td>20</td>");
        html.append("<td>北京大兴区</td>");
        html.append("</tr>");
        html.append("<tr>");
        html.append("<td>2</td>");
        html.append("<td>李四</td>");
        html.append("<td>22</td>");
        html.append("<td>北京海淀区</td>");
        html.append("</tr>");

        out.print(html);


      
    }
}

点击按钮：

 上面项目，目前存在的缺点：在后端的java代码中又开始拼接HTML代码了。显然这是在后端java中写前端的HTML代码。不好维护。一般后端不会这样写拼html串返回，只会在后端查数据，把数据返回交给前端

能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就行，然后页面展示的功能交给WEB前端来处理。

我们后端的java代码能不能只返回数据？？？？可以。（返回数据可以采用JSON的格式，也可以采用XML的格式）

一般采用JSON，因为json体积小，xml体积大，解析起来有一定难度。

喵俺第一专栏
关注
专栏目录
Ajax 发送 post请求案例
qq_42524153的博客
11-04 604
需求 :鼠标放在div上的时候 向服务端发post请求 把响应结果在div中呈现 html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ajax post</titl
【ajax】4.POST：AJAX发送POST请求+POST设置请求体
weixin_43210113的博客
12-07 2008
〇、前情提要 在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。 参考： 我的笔记： 【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记 https://blog.csdn.net/weixin_43210113/article/details/110628389 b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版
jquery ajax POST 例子详解
C# 编程
04-08 147
    function test(){   $.ajax({            //提交数据的类型 POST GET            type:"POST",            //提交的网址            url:"testLogin.aspx",            //提交的数据            data:{Name:"sanmao",Password:"sa...
AJAX请求（GET、POST、响应JSON）_ajax post json(1)
最新发布
2401_86963496的博客
09-11 1387
上面主要简单的介绍了使用AJAX向服务端发起HTTP请求，大致让大家可以了解到请求的过程是怎样的。请求是否有主体成功的响应是否有主体安全（safe）幂等（idempotent）可缓存（Cacheable）HTML 表单是否支持GET否是是是是是POST是是否否是PUT是否否是否否DELETE可以有可以有否是否否CONNECT否是否否否否HEAD否否是是是否OPTIONS否是是是否否PATCH是否。
ajax----------3、GET请求示例
android_zyf的博客
07-13 426
一,建立一个Servlet很简单的通过response输出一个响应体. @WebServlet(name = "AServlet",urlPatterns = "/servlet/as") public class AServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpS
jQuery Ajax： $.post请求实例
乐杨俊浅谈LAMP
06-22 2481
jQuery Ajax： $.post请求实例
AJAX小案例-发送get请求
qq_45346547的博客
04-29 566
需要一个html文档 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&.
Ajax Post请求实例
weixin_30535843的博客
05-06 226
前台JS function OnSaveBarCodeTitle() { if (document.getElementByIdx_x("Path1").value != "") { var mPDF417Text = PDF417Text.value; var mTitle ...
Ajax提交post请求案例分析
12-10
前言：博主之前有篇文章是快速入门Ajax ，主要是利用Ajax做简单的get请求，今天给大家分享一篇利用Ajax提交post请求，以及使用post时需要注意的地方，还是以案例的方式告诉大家。 案例： 注册表单 文件结构图： 06-...
django ajax发送post请求的两种方法
09-18
在使用Django框架进行Web开发时，经常需要通过AJAX发送POST请求以实现异步数据交互。本文将详细介绍在Django中如何通过AJAX发送POST请求的两种方法，这两种方法分别涉及到表单中的CSRF Token的使用以及在AJAX请求中...
原声ajax发送post请求,原生JS实现ajax 发送post请求
weixin_42099755的博客
08-05 2613
1. [代码]原生JS实现ajax 发送post请求var oStr = '';var postData = {};var oAjax = null;//post提交的数据postData = {"name1":"value1","name2":"value2"};//这里需要将json数据转成post能够进行提交的字符串 name1=value1&name2=value2格式postD...
Ajax的Post请求
12-12
最近做项目遇到一个需求，需要通过Ajax的post请求下载文件，把实现代码分享给大家。
jQuery Ajax： $.post请求示例
weixin_34314962的博客
11-22 339
jQuery Ajax：$.post请求示例 leyangjun.html页面 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src...
Ajax学习：Ajax发送POST请求
weixin_47295886的博客
11-28 1562
当鼠标移动到div区域的时候，发送post请求给服务端 把响应体内容在div中呈现。
Ajax发送Post请求
weixin_34309435的博客
03-04 78
Ajax发送post请求与发送get请求大致类似。以下看详细实例。首先看JSP显示页面： &lt;form action="servlet/LoginServlet" method="post"&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;用户账号：&lt;/td&gt; &lt;td&a
Ajax发送post请求
weixin_42070672的博客
07-19 126
console.error("请求失败: " + error);// 处理请求失败的情况。// 处理成功的响应。
Ajax——发送POST请求
weixin_53052268的博客
08-13 1418
1.需求：鼠标移过div方框会将请求服务器返回的结果打印在div内。3.POST设置请求参数。
Ajax 发送post请求
weixin_50736511的博客
10-26 213
基本上和get请求一样 上代码 首先把open 参数1的GET改成POST(这里注意大写) app后面应该的get改成post（这里注意是小写） 我在这里换了一个端口，不用原来的8000端口在这里要把listen后面的8000改成8001 注意在网站里寻找你的js文件时要写成127.0.0.1：8001 /sever不要写成127.0.0.1：8000 /sever /sever不要忘 加油，奥里给！ ...
理解Ajax：XMLHttpRequest对象与异步请求
"使用AJAX发送异步请求" 在网页开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛用于实现页面的无刷新更新，提高用户体验。通过使用AJAX，开发者可以创建交互性强、响应迅速的Web应用程序，无需每次交互...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵俺第一专栏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值