我要评论一、重点思想
重点思想看过来哇！！！
- 我个人认为做前后端分离的项目，无非就是前后端数据的相互传递，那么以这个思想为基础，学习收参和传参的方式就显得格外重要；
- 另外，我们是以json字符串的形式传递数据的，还需要学习json字符串的转换与解析！
1、从前端向后端传递数据：
1.将前端数据封装成一个对象：
2.将对象转化为json字符串：
3.后端获取对象或属性：
4.解析为java对象：
2、从后端向前端传递数据
- 将java对象转化为json字符串：
string s = json.tojsonstring(student); - 实例化一个printwrite对象，调用write方法向前端传递：
printwriter writer = res.getwriter(); - 前端接收到后端的数据：
let data = xmlhttprequest.responsetext; - 将json字符串解析为js对象：
et parse = json.parse(data);（拿到的是一个数组或者一个对象）
二、使用ajax发起请求的方式
这一部分可看可不看，我主要是自己梳理一下代码
1、使用get方式向前端请求数据
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script>
function ajax1(){
//以下是ajax请求流程
let xmlhttprequest = new xmlhttprequest();//1.创建xmlhttprequest对象
xmlhttprequest.open("get","/javawebstudy2025_war_exploded/ajax1",true)//2.初始化请求，添加请求参数
xmlhttprequest.onreadystatechange=function(){//3.设置状态监听回调
if (xmlhttprequest.readystate==4 && xmlhttprequest.status==200){
let data = xmlhttprequest.responsetext;
console.log(data);
document.queryselector("#res").innerhtml=data;
}
}
xmlhttprequest.send();//4.发送请求
}
</script>
</head>
<body>
<h1>ajax测试开始啦！</h1>
<div id="res" style="width: 300px;height: 200px;background: aliceblue;border:2px solid lightblue">
仅更换内容，不刷新页面
</div>
<button onclick="ajax1()">更换</button>
<h2>版权信息</h2>
</body>
</html>
小羊碎碎念：
- xmlhttprequest.open(“get”,“/javawebstudy2025_war_exploded/ajax1”,true)，该方法的三个参数分别是：请求方法类型，url，异步请求。（异步请求不写默认为true）
- 异步请求：
@webservlet("/ajax1")
public class testajax1 extends httpservlet {
@override
protected void doget(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
this.dopost(req, resp);
}
@override
protected void dopost(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
req.setcharacterencoding("utf-8");
resp.setcontenttype("text/html;charset=utf-8");
printwriter writer = resp.getwriter();
writer.write("我是来自后端的数据！");//后端向前端传递的数据
}
}小羊碎碎念：
- webservlet 注解：用于注册 servlet ，将 servlet 类与 web 容器（如 tomcat）建立关联，让容器能够识别、加载并正确调用 servlet 处理 http 请求。
- 创建 servlet 类的常见方式：
继承httpservlet类（重写doget、dopost方法或者直接实现service方法也可以）；
继承generricservlet类（重写service方法）；
实现servlet接口（实现所有抽象方法）。- 实现一个接口必须实现他的抽象方法，否则定义该类为抽象类。
2、使用get请求从前端向后端传递数据
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script>
function ajax2(){
let xmlhttprequest = new xmlhttprequest();
//获取dom对象，再获取它的值
let user = document.queryselector(".user").value;
let pwd = document.queryselector(".pwd").value;
xmlhttprequest.open('get','/javawebstudy2025_war_exploded/ajax2?name='+user+'&password='+pwd);
// 异步请求不写默认是true
xmlhttprequest.onreadystatechange=function(){
if (xmlhttprequest.readystate==4 && xmlhttprequest.status==200){
let data = xmlhttprequest.responsetext;
document.queryselector(".res").innerhtml=data;
}
}
xmlhttprequest.send();
}
</script>
</head>
<body>
<div class="res" style="width: 200px;height: 100px; border:lightskyblue 2px solid">
用户名和密码是什么？
</div>
用户名：<input type="text" class="user">
密码：<input type="text" class="pwd">
<button onclick="ajax2()">提交</button>
</body>
</html>
@webservlet("/ajax2")
public class testajax2 extends httpservlet {
@override
protected void doget(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
this.dopost(req, resp);
}
@override
protected void dopost(httpservletrequest req, httpservletresponse resp) throws servletexception, ioexception {
req.setcharacterencoding("utf-8");
resp.setcontenttype("text/html;charset=utf-8");
printwriter writer = resp.getwriter();
string name = req.getparameter("name");
string password = req.getparameter("password");
writer.write("用户名是"+name+",密码是"+password+"!");
}
}三、主要思想代码示例
首先，要明确是从前端向后端传数据还是从后端向前端传数据。
第二，数据在前后端之间以json字符串的形式进行传递。那就涉及到json字符串的转换与解析
1、获取dom对象、定义全局变量、初始化
let tabobj = document.getelementbyid("tab")
let sname = document.getelementbyid("sname");
let ssex = document.getelementbyid("ssex");
let sage = document.getelementbyid("sage");
let user = document.getelementbyid("user");
let pwd = document.getelementbyid("pwd");
let jsondata;
let indexc;
let id;
window.onload = function () {
ajaxgetdata();
}
function ajaxgetdata() {
let xmlhttprequest = new xmlhttprequest();
xmlhttprequest.open("get", "/javawebstudy2025_war_exploded/do?method=selectdo", true);
xmlhttprequest.onreadystatechange = function () {
if (xmlhttprequest.readystate == 4 && xmlhttprequest.status == 200) {
let data = xmlhttprequest.responsetext;
jsondata = json.parse(data);
let maxindex = jsondata[jsondata.length - 1].id + 1;
initdata("tab");
}
}
xmlhttprequest.send();
}
2、从前端向后端传数据
（1）校验管理员
/**
* 6、校验管理员、
* 关于传参选择普通键值对还是json字符串：
* 简单数据用普通键值对，直观简洁，在 url拼接或传统表单提交时很方便，后端解析也容易。
* 而像实体类这种包含多个属性、结构较复杂的数据，json 字符串能更好呈现其完整结构，方便前后端处理和交互
* 这里测试过了，两种方法都是可以的
*/
function isadmin() {
let xmlhttprequest = new xmlhttprequest();
let newdata={
"admin":user.value,
"password":pwd.value
}
let s = encodeuricomponent(json.stringify(newdata));
xmlhttprequest.open("get", "/javawebstudy2025_war_exploded/do?method=isadmindo&data="+s, true);
/*let admin=user.value
let password=pwd.value
xmlhttprequest.open("get", "/javawebstudy2025_war_exploded/do?method=isadmindo&admin="+admin+"&password="+password, true);*/
xmlhttprequest.onreadystatechange = function () {
if (xmlhttprequest.readystate == 4 && xmlhttprequest.status == 200) {
let data = xmlhttprequest.responsetext;
let parse = json.parse(data);
if(parse.msg=="success"){
//前端中==就可以比较两个字符串，而java中需要用equals比较两个对象是否相等，==比较两个对象是否是同一个对象
window.location.href="showlist copy 2.html" rel="external nofollow"
}else{
alert("用户名或密码错误，请重试")
}
}
}
xmlhttprequest.send();
}
/**
* 逻辑2：登录
*
* @param servletrequest
* @param servletresponse
* @throws servletexception
* @throws ioexception
*/
public void isadmindo(servletrequest servletrequest, servletresponse servletresponse) throws servletexception, ioexception {
string data = servletrequest.getparameter("data");
jsonobject jsonobject = jsonobject.parseobject(data);
string admin = jsonobject.getstring("admin");
string password = jsonobject.getstring("password");
/* string admin = servletrequest.getparameter("admin");
string password = servletrequest.getparameter("password");*/
studentimplservice studentimplservice = new studentimplservice();
boolean login = studentimplservice.isadminservice(admin, password);
// system.out.println("login = " + login);
printwriter writer = servletresponse.getwriter();
if(login!=null){
// httpservletresponse servletresponse1 = (httpservletresponse) servletresponse;
// servletresponse1.sendredirect("showlist copy 2.html");
// result result = new result(1,"success",null);
writer.write(json.tojsonstring(result.success()));
}else{
//return result.error("登陆失败");
writer.write(json.tojsonstring(result.error("登录失败")));
// writer.write(333);
}
}
（2）添加
/**
* 2、添加数据
* @returns
*/
function adddata() {
var maxindex = jsondata[jsondata.length - 1].id + 1
if (sname.value == "" || ssex.value == "" || sage.value == "") {
alert("数据不完整")
return false;
}
let newdata = {
"id": maxindex,
"sname": sname.value,
"ssex": ssex.value,
"sage": sage.value,
}
let jsonstr = encodeuricomponent(json.stringify(newdata));
// let jsonstr = json.stringify(newdata);
// alert(jsonstr)
let xmlhttprequest = new xmlhttprequest();
xmlhttprequest.open("get", "/javawebstudy2025_war_exploded/do?method=adddo&jsondata=" + jsonstr, true);
xmlhttprequest.onreadystatechange = function () {
if (xmlhttprequest.readystate == 4 && xmlhttprequest.status == 200) {
let data = xmlhttprequest.responsetext;
ajaxgetdata();
}
}
xmlhttprequest.send();
}
/**
* 逻辑4：添加
*
* @param servletrequest
* @param servletresponse
* @throws servletexception
* @throws ioexception
*/
public void adddo(servletrequest servletrequest, servletresponse servletresponse) throws servletexception, ioexception {
httpservletrequest req1 = (httpservletrequest) servletrequest;
httpsession session = req1.getsession(false);
printwriter writer = servletresponse.getwriter();
string newstu = servletrequest.getparameter("jsondata");
jsonobject jsonobject = jsonobject.parseobject(newstu);
/*这里收参方式有问题，在前面已经通过getparameter获取到了jsondata，后面在取键时应该.属性名
string sname = servletrequest.getparameter("sname");
string ssex = servletrequest.getparameter("ssex");
string sage = servletrequest.getparameter("sage");*/
string sname = jsonobject.getstring("sname");
string ssex = jsonobject.getstring("ssex");
string sage = jsonobject.getstring("sage");
student student = new student(null, sname, ssex, sage);
int add = studentimplservice.insertservice(student);
if (add > 0) {
// servletrequest.getrequestdispatcher("do?method=selectdo").forward(servletrequest, servletresponse);
httpservletresponse servletresponse1 = (httpservletresponse) servletresponse;
// servletresponse1.sendredirect("do?method=selectdo");
} else {
system.out.println("添加失败！");
}
}
（3）实现更新
* 5、更新数据:将表格里的新数据又赋给json对象各属性的值
* 这个不用闭包
*/
function updatedata1() {
let xmlhttprequest = new xmlhttprequest();
let newdata = {
"id": id,//这里我就使用的是全局变量，以后每次先点击更新按钮，id就会被重新赋值为当前学号
"sname": sname.value,
"ssex": ssex.value,
"sage": sage.value,
}
let s = encodeuricomponent(json.stringify(newdata));
xmlhttprequest.open("get", "/javawebstudy2025_war_exploded/do?method=updatedo&newstu=" + s, true);
xmlhttprequest.onreadystatechange = function () {
if (xmlhttprequest.readystate == 4 && xmlhttprequest.status == 200) {
ajaxgetdata();
}
}
xmlhttprequest.send();
}
/**
* 逻辑6：真正实现更新
* @param req
* @param res
* @throws servletexception
* @throws ioexception
*/
public void updatedo(servletrequest req, servletresponse res) throws servletexception, ioexception {
string newstu = req.getparameter("newstu");
jsonobject jsonobject = jsonobject.parseobject(newstu);
integer id = jsonobject.getinteger("id");
string sname = jsonobject.getstring("sname");
string ssex = jsonobject.getstring("ssex");
string sage = jsonobject.getstring("sage");
student student = new student(id, sname, ssex, sage);
int update = studentimplservice.updateservice(student);
if (update < 0) {
system.out.println("更新失败！");
}
}
}
3、从后端向前端传数据
（1）查询数据
/**
* 1、渲染json数据，并且动态生成表格
*/
function initdata(tab) {
// 清理原来的dom结构（不清理表头）
tabobj.innerhtml = "";
for (let index = 0; index < jsondata.length; index++) {
var trobj = document.createelement("tr")
if (index % 2 == 0) {
trobj.style.backgroundcolor = "lightblue"//偶数行是蓝色
}
for (let pos = 0; pos < object.keys(jsondata[0]).length + 2; pos++) {
var tdobj = document.createelement("td")
trobj.appendchild(tdobj)
}
let tdobjchildren = trobj.children;
let m = 0;
object.keys(jsondata[index]).foreach(key => {
tdobjchildren[m++].innerhtml = jsondata[index][key];
}
)
let btnobj = document.createelement("button")
btnobj.innerhtml = "删除";
btnobj.onclick = deldate(index);
// tdobjchildren[4].appendchild(btnobj)
tdobjchildren[object.keys(jsondata[0]).length].appendchild(btnobj)
let btnobj1 = document.createelement("button")
btnobj1.innerhtml = "更新";
btnobj1.onclick = updatedata(jsondata[index].id)
tdobjchildren[object.keys(jsondata[0]).length + 1].appendchild(btnobj1)
tabobj.appendchild(trobj)
}
}
/**
* 逻辑1：渲染数据
*
* @param req
* @param resp
* @throws servletexception
* @throws ioexception
*/
public void selectdo(servletrequest req, servletresponse resp) throws servletexception, ioexception {
httpservletrequest req1 = (httpservletrequest) req;
httpsession session = req1.getsession(false);
httpservletresponse resp1 = (httpservletresponse) resp;
list<student> alldata = studentimplservice.getallservice();
string s = json.tojsonstring(alldata);
printwriter writer = resp.getwriter();
writer.write(s);
// req1.setattribute("data", alldata);
// req1.getrequestdispatcher("showlist1.jsp").forward(req1, resp1);
}
（2）获取一条数据
/**
* 4、更新数据:将json数据放在表格里
*/
function updatedata(index) {
let index1 = index//闭包函数写法
return function () {
indexc = index1;//全局的indexc记录了要修改的数据的下标
let xmlhttprequest = new xmlhttprequest();
xmlhttprequest.open("get", "/javawebstudy2025_war_exploded/do?method=getonedo&id=" + indexc, true);
xmlhttprequest.onreadystatechange = function () {
if (xmlhttprequest.readystate == 4 && xmlhttprequest.status == 200) {
let data = xmlhttprequest.responsetext;
/* if(data.code==200 && data.msg=="success")
{
}*/
let parse = json.parse(data);
id = parse.id;//我将这里的id设置为全局变量，为了在真正实现更新时给“id”值
// console.log(id);
sname.value = parse.name//注意，这里返回了一条从数据库里面查出来的数据，你通过.属性名时这里的属性名是表中字段名
ssex.value = parse.sex
sage.value = parse.age
// console.log(parse);
ajaxgetdata();
}
}
xmlhttprequest.send();
}
}
/**
* 逻辑5：获取一条数据:服务器端渲染
* @param req
* @param res
* @throws servletexception
* @throws ioexception
*/
public void getonedo(servletrequest req, servletresponse res) throws servletexception, ioexception {
integer id = integer.valueof(req.getparameter("id"));
student student = studentimplservice.getoneservice(id);
string s = json.tojsonstring(student);
printwriter writer = res.getwriter();
writer.write(s);
}
（3）删除一条数据
/**
* 3、删除数据
* @param {*} index
* @returns
*/
//也可以在调用处传参jsondata[index].id，然后让他等于index1，在地址里面传参index1即可
function deldate(index) {
let index1 = index;
return function () {
if (confirm("确认删除吗？")) {
let xmlhttprequest = new xmlhttprequest();
xmlhttprequest.open("get", "/javawebstudy2025_war_exploded/do?method=deldo&id=" + jsondata[index1].id, true);
xmlhttprequest.onreadystatechange = function () {
if (xmlhttprequest.readystate == 4 && xmlhttprequest.status == 200) {
// let data = xmlhttprequest.responsetext;
ajaxgetdata();
}
}
xmlhttprequest.send();
}
}
}
/**
* 逻辑3；删除
*
* @param req
* @param res
* @throws servletexception
* @throws ioexception
*/
public void deldo(servletrequest req, servletresponse res) throws servletexception, ioexception {
// 获取删除的那条记录的主键id
string id = req.getparameter("id");
system.out.println("id = " + id);
// 数据访问层
integer idd = integer.valueof(id);
int i = studentimplservice.delservice(idd);
system.out.println("i = " + i);
if (i > 0) {
// req.getrequestdispatcher("/do?method=selectdo").forward(req, res);
httpservletresponse servletresponse1 = (httpservletresponse) res;
// servletresponse1.sendredirect("do?method=selectdo");
} else {
system.out.println("删除失败！");
}
}
4、数据访问层展示
我的这个项目实现了数据的增删查改与校验管理员（通过vscode中我那个纯前端的项目改造的），分别写了两个实体类：学生类和管理员类，我也为他们分别写了数据访层。我记得当时没有写管理员类，然后通过mybatis操作数据库失败了，所以定义管理员类是必要的。
package dao;
import moudle.student;
import org.apache.ibatis.annotations.*;
import java.util.list;
public interface studentdao {
// 渲染数据
@select("select * from student")
list<student> getalldao();
// 删除
@delete("delete from student where id=#{id}")
int deldao(integer id);
// 添加
@insert("insert into student values (null,#{name},#{sex},#{age})")
int insertdao(student student);
// 拿到一条数据
@select("select * from student where id=#{id}")
student getonedao(integer id);
// 更新
@update("update student set name=#{name},sex=#{sex},age=#{age} where id=#{id}")
int updatedao(student student);
// 分页查询
@select("select * from student limit #{start},#{pagesize}")
list<student> fenyedao(@param("start") integer start,@param("pagesize") integer pagesize);
}
package dao;
import org.apache.ibatis.annotations.param;
import org.apache.ibatis.annotations.select;
public interface managerdao {
@select("select * from manager where admin=#{admin} and password=#{password}")
boolean isadmindao(@param("admin") string admin,@param("password") string password);
}
5、分页查询前端代码备份
这是一个jsp文件
<%@ page import="moudle.student" %>
<%@ page import="java.util.list" %>
<%@ page import="service.impl.studentimplservice" %>
<%--
created by intellij idea.
user: 34806
date: 2025/5/7
time: 10:15
to change this template use file | settings | file templates.
--%>
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
<title>学生信息列表展示</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow" >
<script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<%
// list<student> data = (list<student>) request.getattribute("data");
/**
* 作用域问题：在 jsp 中，
* request.getattribute("data") 获取数据，
* request 作用域仅在一次请求 - 响应过程中有效。
* 点击下一页是新请求，之前 request 作用域里的数据不会自动带到新请求中。
* 若没有重新设置 data 到新 request 作用域，就获取不到。
*/
studentimplservice studentimplservice1 = new studentimplservice();
list<student> data = studentimplservice1.getallservice();
// 1.计算有多少条数据
int totalcount = data.size();
// 2.设置每一页有几条数据
int pagesize = 3;
// 3.计算有多少页
int pagecount = (int) (math.ceil(totalcount * 1.0 / pagesize));
// 4.获取当前页
int curpage = request.getparameter("curpage") == null ?
1 : integer.valueof(request.getparameter("curpage"));
// 计算偏移值
int offset = (curpage - 1) * 3;
// 5.获取当前页的数据
studentimplservice studentimplservice = new studentimplservice();
list<student> students = studentimplservice.fenyeservice(offset, pagesize);
%>
<%--你依然保持在线！--%>
<a href='/javawebstudy2025_war_exploded/logout'>退出</a>
<table class="table">
<thead class="thead-dark">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作1</th>
<th>操作2</th>
</tr>
</thead>
<tbody>
<%
for (int i = 0; i < students.size(); i++) {
%>
<tr>
<td>
<%=students.get(i).getid()%>
</td>
<td>
<%=students.get(i).getname()%>
</td>
<td>
<%=students.get(i).getsex()%>
</td>
<td>
<%=students.get(i).getage()%>
</td>
<td>
<a href="/javawebstudy2025_war_exploded/do?method=deldo&id=<%=students.get(i).getid()%>" rel="external nofollow"
onclick="if(confirm('确认删除吗？')) return true;return false;">删除</a>
</td>
<td>
<a href="/javawebstudy2025_war_exploded/do?method=getonedo&id=<%=students.get(i).getid()%>" rel="external nofollow" >更新</a>
</td>
</tr>
<%
}
%>
<%
if (curpage == 1) {
%>
<tr>
<td>首页</td>
<td>上一页</td>
<td><a href="showlist1.jsp?curpage=<%=curpage+1%>" rel="external nofollow" rel="external nofollow" >下一页</a></td>
<td><a href="showlist1.jsp?curpage=<%=pagecount%>" rel="external nofollow" rel="external nofollow" >尾页</a></td>
</tr>
<%
} else if (curpage == pagecount) {
%>
<tr>
<td><a href="showlist1.jsp?curpage=1" rel="external nofollow" rel="external nofollow" >首页</a></td>
<td><a href="showlist1.jsp?curpage=<%=curpage-1%>" rel="external nofollow" rel="external nofollow" >上一页</a></td>
<td>下一页</td>
<td>尾页</td>
</tr>
<%
} else {
%>
<tr>
<td><a href="showlist1.jsp?curpage=1" rel="external nofollow" rel="external nofollow" >首页</a></td>
<td><a href="showlist1.jsp?curpage=<%=curpage-1%>" rel="external nofollow" rel="external nofollow" >上一页</a></td>
<td><a href="showlist1.jsp?curpage=<%=curpage+1%>" rel="external nofollow" rel="external nofollow" >下一页</a></td>
<td><a href="showlist1.jsp?curpage=<%=pagecount%>" rel="external nofollow" rel="external nofollow" >尾页</a></td>
</tr>
<%
}
%>
</tbody>
</table>
<button style='padding: 10px 20px;display: block; margin: 0 auto;'>
<a href="/javawebstudy2025_war_exploded/add.html" rel="external nofollow" >添加</a>
</button>
</body>
</html>
总结
到此这篇关于使用ajax从前端向后端发起请求的文章就介绍到这了,更多相关ajax从前端向后端发起请求内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论