springboot项目前端ajax 05 post方法

前面的4篇是说的get方法。
现在开始讲post方法。
01.现在在controller类中去写两个方法，一个是跳转到相关html文件的函数，一个返回值是json的函数（这个函数用来向前端写代码）。

@RequestMapping(“doActivityEditUI”)
public String doActivityEditUI() {
return “activity_edit”;
}

@RequestMapping(“doSaveActivity”)
@ResponseBody
private String doSaveActivity(Activity activity) {
activityService.saveActivity(activity);
return “save Ok”;
}

02.修改前端界面，实现ajax的post
ajax是用来可以写html标签的。
ajax的post方法是这样做：固定的

function doAjaxPost(url,params,callback){
//1.创建ajax异步请求（这也是ajac技术应用的入口）
var xhr=new XMLHttpRequest();
//2.设置请求，响应过程的状态监听(通过回调函数处理状态变化)
xhr.onreadystatechange=function(){
if(xhr.readyState4&&xhr.status200){
callback(xhr.responseText);
}
}
//3.创建与服务端的连接
xhr.open(“POST”,url,true);//true表示异步
//post请求必须设置请求头，可以从属性获取
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
//4.发送请求
//post请求将参数写到send方法
xhr.send(params);
//5.对响应结果进行处理(在回调函数中处理)。
}

03.修改html文件
`

   

      
标题
      

      
类型
      

      
开始时间
      

      
结束时间
      

      
备注
      

      

   
   

04.完成点击事件（用ajax事件）

function $(id){
return document.getElementById(id);
}

	/* function doSaveActivity(){
		//1.定义参数请求
		var title=document.getElementById("titleId").value;
		var category=document.getElementById("categoryId").value;
		var startTime=document.getElementById("startTimeId").value;
		var endTime=document.getElementById("endTimeId").value;
		var remark=document.getElementById("remarkId").value;
	} */ 	
	function doSaveActivity(){
		debugger
		//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
		var url="doSaveActivity";
		//3.发送异步请求更新数据
		doAjaxPost(url,params,function(result){
			alert(result);
			location.href="doActivityUI";//这里的重定向回到开始界面
		})
	}

`