▶ajax的各种请求以及js方法的封装

最新推荐文章于 2022-04-07 16:01:17 发布

置顶 weixin_44761983

最新推荐文章于 2022-04-07 16:01:17 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/weixin_44761983/article/details/97754448

版权

<%@ page language=“java” contentType=“text/html; charset=utf-8” pageEncoding=“utf-8”%>
<%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c”%>

您好Springboot


## /*此处为使用$.getJSON方式异步调用了自定义的方法*/

      $.getJSON("ajaxUserList",function(result){
   		//alert("BB");
   		var trs=getTr(result);
   		$("#table1").append(trs);
   		
   });  
 

## /*此处为自定义方法*/

     function getTr(result){
   			var trs=null;
   		$.each(result,function(index,user){
   			//alert("BB");
   			var id = user.id;
   			var name=user.name;
   			var age=user.age;
   			var sex=user.sex;
   			trs+="<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
   			});
   		return trs;
   	  }

/此处为没有使用自定义方法前的$.ajax方式调用/

/*  $(function(){
	$.ajax({
		type: "get",
		url:  "ajaxUserList",
		dataType: "json",
		//result表示后台服务器返回的json数据    List<User>
		success: function(result){
			alert("aaaa");
			//1.循环变量返回值
			//参数1.表示需要遍历的数据
			//参数2.表示每次遍历的元素的处理方式
			$.each(result,function(index,user){
				var id = user.id;
				var name = user.name;
				var age = user.age;
				var sex = user.sex;
				//需要将数据封装到table中
				var tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
				$("#table1").append(tr);
			})
		}
	});
});  */
</script>
</head>
<body>

/此处为要显示的表头信息/

	<table id="table1" border="1px" width="65%" align="center">
		<tr>
			<td colspan="6" align="center"><h3>学生信息</h3></td>
		</tr>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th></th>
		</tr>
	</table>
</body>
</html>