AJAX快速入门-POST、代码简化及实现活动删除业务(PROJECT02_DAY01_02)

浩浩邶

已于 2022-03-16 19:57:26 修改

阅读量893

点赞数

分类专栏：笔记文章标签： java spring ajax

于 2021-08-23 17:30:50 首次发布

本文链接：https://blog.csdn.net/weixin_47253919/article/details/119873268

版权

笔记专栏收录该内容

36 篇文章 24 订阅

订阅专栏

本文介绍了如何使用AJAX进行POST请求与后台交互，包括服务端控制器的关键代码和客户端JavaScript实现。通过创建XMLHttpRequest对象，设置请求头，发送POST请求，并在响应后处理结果。此外，还展示了如何将通用代码封装到独立JS文件中，以提高代码复用性。最后，演示了活动删除功能的实现，从DAO到Controller的完整流程，以及在前端页面上绑定删除事件。

摘要由CSDN通过智能技术生成

2.3.2 AJAX POST请求操作实现

课堂练习：基于时序图分析，进行代码设计和实现，如图-6所示：
在这里插入图片描述
图-6

图-6中涉及到的相关代码参考如下：
服务端控制层关键代码实现：在控制层的 doSaveActivity 方法中，通过业务层保存商品信息。

@RequestMapping("activity_edit") 
public String doActivityEditUI() { 
	return "activity_edit"; 
}
@RequestMapping("doSaveActivity") 
@ResponseBody 
public String doSaveActivity(Activity entity) { 
	activityService.saveActivity(entity); 
	return "save ok";
 }

基于 AJAX 中XMLHttpRequest对象，向服务端发起异步 POST 请求。对于 POST 请求在发送请求执行需要设置请求头。

function doAjaxPost(url,params,callback){
   //1.创建XmlHttpRequest对象
   var xhr=new XMLHttpRequest();
   //2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程.
   xhr.onreadystatechange=function(){//监听函数
      //基于xhr对象获取的通讯状态，对响应数据进行处理
      if(xhr.readyState==4&&xhr.status==200){
      	 //服务端响应的结果会传递给XHR对象，
     	 //我们可以借助xhr.responseText获取响应结果
         callback(xhr.responseText);
        }
    }
    //3.创建与服务端的连接
    xhr.open("POST",url,true);//true表示异步
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //4.发送请求
    xhr.send(params); //post请求将参数写到send方法
    //5.对响应结果进行处理(在回调函数中处理)。
}

客户端关键代码实现：在客户端页面中，通过 doSaveActivity 方法，基于 AJAX 技术异步提交商品信息到服务端，由服务端对象方法将数据写入到数据库。

<script type="text/javascript"> 
	function $(id){ 
		return document.getElementById(id);
	}
	function doSaveActivity(){ 
	//1.定义请求参数 
	var title=$("titleId").value; 
	var category=$("categoryId").value; 
	var startTime=$("startTimeId").value; 
	var endTime=$("endTimeId").value; 
	var remark=$("remarkId").value; 
	var params="title="+title+"&category="+category+"&startTime="+startTime+ "&endTime="+endTime+"&remark="+remark; 
	//2.定义请求的url 
	const url="doSaveActivity"; 
	//3.发送异步请求更新数据 
	doAjaxPost(url,params,function(result){ 
		alert(result); 
		location.href="activity_list"; 
		}) 
	} 
 </script>

因为有共性且可重复使用的代码,所以可以将共性代码提取出来,在 resources/static 目录下创建 js 目录,并在其中创建两个文件,如下图：
在这里插入图片描述
在 ajax.js 中只是简单的提取:

//定义ajax的Get请求函数
function doAjaxGet(url,params,callback){
	//1.创建ajax异步请求对象(这也是ajax技术应用的入口对象)
	var xhr=new XMLHttpRequest();
	//2.设置请求响应过程的状态监听(通过回调函数处理状态变化)
	xhr.onreadystatechange=function(){//监听函数
		//4:表示通讯结束
		//200:表示服务器响应OK
		if(xhr.readyState==4&&xhr.status==200){
			//console.log("xhr.responseText",xhr.responseText);
			//xhr.responseText用于获取服务端的相应结果
			callback(xhr.responseText);
		}
	}
	//3.创建或打开与服务端的连接(设置同步或异步)
	xhr.open("GET",url+"?"+params,true);//true表示异步
	//4.发送异步请求
	xhr.send(null);//GET请求send方法不传参数
}
function doAjaxPost(url,params,callback){
	//1.创建ajax异步请求对象(这也是ajax技术应用的入口对象)
	var xhr=new XMLHttpRequest();
	//2.设置请求响应过程的状态监听(通过回调函数处理状态变化)
	xhr.onreadystatechange=function(){//监听函数
		//4:表示通讯结束
		//200:表示服务器响应OK
		if(xhr.readyState==4&&xhr.status==200){
			//console.log("xhr.responseText",xhr.responseText);
			//xhr.responseText用于获取服务端的相应结果
			callback(xhr.responseText);
		}
	}
	//3.创建与服务器连接
	xhr.open("POST",url,true);
	//post请求必须要设置请求头
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//4.发送异步post请求，参数传递放入send方法中
	xhr.send(params);
}

想要使用的话需要引入此 js 文件。

在 ajaxframework.js 中提取并做更改:

(function(){
	var Ajax=function(){}
	//每个js函数内部都存在一个原型对象，这个对象会被所有的函数实例所共享
	Ajax.prototype={
			//定义ajax的Get请求函数
			doAjaxGet:function(url,params,callback){
				//1.创建ajax异步请求对象(这也是ajax技术应用的入口对象)
				var xhr=new XMLHttpRequest();
				//2.设置请求响应过程的状态监听(通过回调函数处理状态变化)
				xhr.onreadystatechange=function(){//监听函数
					//4:表示通讯结束
					//200:表示服务器响应OK
					if(xhr.readyState==4&&xhr.status==200){
						//console.log("xhr.responseText",xhr.responseText);
						//xhr.responseText用于获取服务端的相应结果
						callback(xhr.responseText);
					}
				}
				//3.创建或打开与服务端的连接(设置同步或异步)
				xhr.open("GET",url+"?"+params,true);//true表示异步
				//4.发送异步请求
				xhr.send(null);//GET请求send方法不传参数
			},
			doAjaxPost:function(url,params,callback){
				//1.创建ajax异步请求对象(这也是ajax技术应用的入口对象)
				var xhr=new XMLHttpRequest();
				//2.设置请求响应过程的状态监听(通过回调函数处理状态变化)
				xhr.onreadystatechange=function(){//监听函数
					//4:表示通讯结束
					//200:表示服务器响应OK
					if(xhr.readyState==4&&xhr.status==200){
						//console.log("xhr.responseText",xhr.responseText);
						//xhr.responseText用于获取服务端的相应结果
						callback(xhr.responseText);
					}
				}
				//3.创建与服务器连接
				xhr.open("POST",url,true);
				//post请求必须要设置请求头
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				//4.发送异步post请求，参数传递放入send方法中
				xhr.send(params);
			}
	}
	window.Ajax=new Ajax();
})()

如果想要使用的话,需要引入此 js 文件。

已经将代码封装到自写的框架中，如果想要调用此共性方法,需要如下写法:
在这里插入图片描述
关于作用域,因为可能会引入很多的 js 文件,所以要将作用域设置为尽量的小, 以下为两种设置作用域的方式:
第一种:let

第二种:const

代码修改如下:

function doHandleResponseResult(result) {//json string
			//1.将json格式字符串转化为json格式的对象
			const jsonObj = JSON.parse(result);
			console.log("jsonObj", jsonObj);
			//2.将json对象中的数据更新到页面上
			var trs = "";
			for (const row of result) {
				trs += "<tr>" + 
				"<td>" + row.id + "</td>" + 
				"<td>" + row.title + "</td>" + 
				"<td>" + row.category + "</td>" + 
				"<td>" + new Date(row.startTime).toLocaleString() + "</td>" + 
				"<td>" + new Date(row.endTime).toLocaleString() + "</td>" + 
				"<td>" + (row.state ? "进行中" : "已结束")+ "</td>" + 
				"<td><a οnclick=doDeleteById('"+row.id+"')>delete</a></td>" + 
				"</tr>"
			}
			//2.2将字符串以html的形式更新到tbody的位置上
			const tBody=document.getElementById("tbodyId"); 
			console.log("trs",trs); 
			tBody.innerHTML=trs;
		}
		(function(){ 
			doGetActivitys(); 
		})()

基于 AJAX 实现活动删除业务:

Dao 层:

@Delete("delete from tb_activity where id=#{id}") 
int deleteById(Long id);

Service 层:

void deleteById(Long id);

Impl 层:

@Override 
public void deleteById(Long id) { 
	log.info("start {}",System.currentTimeMillis()); 
	int rows=activityDao.deleteById(id); 
	if(rows==0) throw new NoSuchElementException("对象可能已经不存在"); 
	log.info("end {}",System.currentTimeMillis()); 
}

Controller 层:

@RequestMapping("doDeleteById") 
@ResponseBody 
public String doDeleteById(Long id) {
	activityService.deleteById(id); 
	return "delete ok";
}

Activity_list 页面:
修改删除按钮,设置点击事件

for (const row of jsonObj) {
				trs += "<tr>"+
						"<td>"+row.id+"</td>"+
						"<td>"+row.title+"</td>"+
						"<td>"+row.category+"</td>"+
						"<td>"+new Date(row.startTime).toLocaleString()+"</td>"+
						"<td>"+new Date(row.endTime).toLocaleString()+"</td>"+
						"<td>"+(row.state?"进行中":"已结束")+"</td>"+
						"<td><a οnclick=doDeleteById('"+row.id+"')>delete</a></td>"+
						"</tr>"
			}

完成点击事件绑定的函数

function doDeleteById(id){ 
	const params="id="+id; 
	const url="doDeleteById"; 
	Ajax.doAjaxGet(url,params,function(result){ 
		alert(result); 
		doGetActivitys(); 
	}) 
}