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文件
`

   <ul><li>标题<li><input type="text" name="title" id="titleId"><li>类型<li><input type="text" name="category" id="categoryId"><li>开始时间<li><input type="text" name="startTime" id="startTimeId"><li>结束时间<li><input type="text" name="endTime" id="endTimeId"><li>备注<li><textarea rows="5" cols="30" name="remark" id="remarkId"></textarea><li><input type="button" value="save" onclick="doSaveActivity()"></ul></form>

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.定义请求urlvar url="doSaveActivity";//3.发送异步请求更新数据doAjaxPost(url,params,function(result){alert(result);location.href="doActivityUI";//这里的重定向回到开始界面})}

`