ajax简单用法

响应端写法

1.使用response

// ajax请求的反馈数据，不能转发，不能重定向，需要使用printwriter向客户端输入数据
PrintWriter out = response.getWriter();
out.println("返回了一个字符串"); // 响应返回了一个字符串
Ajax ajax = new Ajax("ajax", "21");
String msg = JSONObject.toJSONString(ajax);// 直接将实例对象转为json
out.println(msg); // 响应返回了一个对象
List<Ajax> list = new ArrayList<Ajax>();
Ajax ajax1 = new Ajax("ajax", "22");
Ajax ajax2 = new Ajax("ajax", "23");
list.add(ajax1);
list.add(ajax2);
String msg1 = JSONObject.toJSONString(list);
out.print(list); // 响应返回了一个集合

对象转换为json对象的字符串
注意：JSONObject的使用需要使用依赖包
所以我们使用ObjectMapper

SysArea area=new SysArea();
ObjectMapper om=new ObjectMapper();
String str = om.writeValueAsString(area);  //先转成一个json对象的字符串

这里我们可以使用：
List转为json的字符串

List<String> list=new ArrayList<String>();
ObjectMapper om=new ObjectMapper();
String str = om.writeValueAsString(list);

2.使用注解，然后直接return

//返回json的方法（ajax）
	@RequestMapping("/ajax")
	@ResponseBody        //这种方法 还是要使用ajax那边的编辑
	public List<ScenicSpots> jsontest(){
		List<ScenicSpots> list=service.selectSpots(null);
		return list;          
	}

jsp中ajax的代码

1.原生实现ajax

<script type="text/javascript">
		function getdata() {
			//1.创建ajax对象
			var ajax=new XMLHttpRequest();
			//2.调用open方法，设置请求对象
			ajax.open("GET","/YQXCMS/ajax",true);   //true,异步，false，不异步
			//3.发送请求
			ajax.send();
			//4.接收响应数据（在ajax对象的状态发生变更的时候进行）
			ajax.onreadystatechange = function () {
				/*0--未初始化，还没有调用open方法
				*1--已调用send方法，正在发送请求
				*2--载入完成，send方法执行完成，并且已经收到响应内容
				*3--正在解析，解析响应内容
				*4--完成，表示结果可以在客户端进行调用了
				*/
				if(ajax.readyState == 4){
					//http的响应状态，200为正常
					if(ajax.status == 200){
						var msg=ajax.responseText;
						//使用响应消息
						document.getElementById("msg").innerHTML = msg;
					}
				}
			}
		}
</script>

2.JQuery实现ajax请求

<script src="${pageContext.request.contextPath}/css/jquery-1.8.1.min.js"
	type="text/javascript"></script>   <!-- 要使用JQuery，要先导入 -->
<script type="text/javascript">
		<%--$()用于jauery，${}用于jsp的EL表示式--%> 
		<%--ajax请求放在了msg里面--%>
		function getdata1() {   //响应返回得到字符串
			$.ajax({
				type:"POST",
				url:"${pageContext.request.contextPath}/ajax2",
				data:"name=dc",  //发送到服务端的数据（携带数据）
				success: function (data) {   //data是返回得到的数据
					$("#msg").html(data);   
				}
			});
		}
		function getdata2() {  //响应返回得到json对象
			$.ajax({
				type:"POST",
				url:"${pageContext.request.contextPath}/ajax2",
				data:"name=dc",
				dataType:"json", 
				success: function (data) {  //data是返回得到的数据
					$("#msg").html(data.name+";"+data.age);
				}
			});
		}
		function getdata3() {   //响应返回得到数组
			$.ajax({
				type:"POST",
				url:"${pageContext.request.contextPath}/ajax2",
				data:"name=dc", //发送到服务端的数据（携带数据）
				success: function (data) {   //data是返回得到的数据
					eval(data);
					var len = data.length;
					if (len > 0) {
						for (var i = 0; i < len; i++) {
							$("#msg").html(data[i].name+";"+data[i].age);
						}					
					}				
				}
			});
		}
</script>