ajax实现异步数据请求后台
有两种实现方法
原生js实现
/*
要有事件触发
比如在html中写一个按钮点击触发之类的
*/
<script type="text/javascript">
var xhr;
function ajaxDemo(){
xhr = new XMLHttpRequest();
xhr.onreadystatechange = callback();
xhr.open("GET","${pageContext.request.contextPath}/category/queryCouponState.do");
xhr.send();
}
function callback() {
if(xhr.readyState==4){
if(xhr.status ==200){
document.getElementById("result").innerHTML=xhr.responseText;
}
}
}
</script>
后台接受请求
springmvc接受异步提交的数据得用@ResponseBody标签
返回的数据用了工具类进行了格式转换,转成成了json类型返回
@ResponseBody
@RequestMapping(value="queryCouponState.do",produces = "text/html;charset=utf-8",method = RequestMethod.GET)
public String queryCoupon(
Model model) throws Exception{
System.out.println("==============");
//根据状态查询出来的List数据
ArrayList<PbCategory> categoryList = categoryService.selectAll();
System.out.println("条数"+categoryList.size());
//System.err.println("状态"+state);
model.addAttribute("categoryList",categoryList);
JSONArray jsonArray = new JSONArray();
return jsonArray.listToJson(categoryList);
}
jquery方式
第一步先得有jquery文件,引入jquery文件
<script src = "${pageContext.request.contextPath}/static/jquery-3.3.1/jquery-3.3.1.min.js"></script>
ajax异步访问的代码
此方法是页面一加载就被触发的,返回数据类型是json
<script type="text/javascript">
$(document).ready(function(){
$.get("${pageContext.request.contextPath}/ProjectTech/techlist.do",
function (data) {
console.log(data);
alert("dd");
alert(data[0].pbProjecttechnoname);
},
"json")
})
</script>
springmvc 后台接受的代码
此方法是我项目中用的直接拷贝过来的,里面有一些打印测试代码和业务逻辑代码
@ResponseBody
@RequestMapping(value = "techlist.do",method = RequestMethod.GET)
public String techlist(){
System.out.println("=========ajax");
ArrayList<PbProjectTechno> pbprotelist = projectTechService.selectAll();
JSONArray jsonArray = new JSONArray();
System.out.println(jsonArray.listToJson(pbprotelist));
return jsonArray.listToJson(pbprotelist);
}