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

目录：

（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 {@Overrideprotected 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 {@Overrideprotected 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").valuexhr.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 {@Overrideprotected 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 {@Overrideprotected 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：ajax发送Post请求、ajax案例相关推荐

原生php ajax post_使用原生ajax发送post请求完整案例
搜索热词使用ajax发送数据实现前后台的交互,我想是web开发最基础的技能了.近来dz开发因为不兼容jquery,所以只能使用原生js发送数据,不想还遇到很多问题.在这里分析总结一下.先来一个使用a ...
JS发送Http请求——AJAX
1.AJAX的引入 JS 缺乏主动发起 Http请求的能力,因此需要代码片段让JS发起Http请求,我们称这样的代码片段为--AJAX(Asynchronous JAvaScript by Xml ...
使用ajax发送数组请求,Ajax请求传递数组参数
var ids = []; var rows=$("#tt").datagrid("getSelections"); for(var i=0; i ids.pu ...
ajax js 轮询请求,ajax的轮询和长轮询
概念: 轮询环行进端处触码通法果泉位可近境其行框理发(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭览页些求时是过解些这确如目前例总站回广随能4 ...
ajax https带证书请求,ajax 请求https 证书
ajax 请求https 证书内容精选换一换通过配置加速域名的HTTPS证书,并将其部署在全网CDN节点,实现HTTPS安全加速.此项配置非必选配置,如果您需要使用HTTPS访问则为必选配置.C ...
ajax可以发送文件,通过Ajax上传img时如何发送文件信息
我正在尝试拆分上传到ajax方法的图像文件.所有的html和JS都在一个文件中,然后我组成了一个包含所有PHP的PHP文件. 我正在努力的是,我不确定如何将图像文件信息发送到php文件,然后如何使其余 ...
ajax ashx调试,asp.net——Ajax与ashx异步请求的简单案例
Ajax与ashx异步请求的简单案例: 前台页面(aspx): function gettext() { var intxt = $("#intxt").val(); $.ajax ...
ajax发送异步请求与ajax发送同步请求
async (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. ajax发 ...
什么是Ajax?Ajax如何发送请求（详）
本篇来讲关于Ajax的内容,当然还有小伙伴可能不知道该怎么读 "Ajax",它读 "阿贾克斯" ,当然了读法可能因人而异,下面来进入正题,先来了解一下什么是Aj ...
ajax php计数,jQuery+PHP+Ajax动态数字统计展示实例
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: 当前在线: - ...

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

Ajax：ajax发送Post请求、ajax案例相关推荐

最新文章

热门文章