ajax数据交互

最新推荐文章于 2023-08-07 20:19:10 发布

原创最新推荐文章于 2023-08-07 20:19:10 发布 · 182 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #json

ajax 专栏收录该内容

2 篇文章

订阅专栏

ajax是在前台的js代码中写数据交互

例子：

//假如后台给的是对象集合的话是需要在前台进行遍历的
<script type="text/javascript">
		function chongMing() {
			//接收需要去数据判断的用户名
			var name = document.getElementById("name").value;
			//alert(name);
			//1.创建ajax对象
			var ajax = new XMLHttpRequest();
			//2.开启请求
			ajax.open("请求方式", "url地址（最好加上 new Data().getTime）", true)
			//加上 new Data().getTime的原因是为了防止浏览器走缓存
			//3.设置回调函数
			ajax.onreadystatechange=function(){
				//状态值4 响应值200 才是回调成功
				if(ajax.readyState==4 && ajax.status==200){
					var data = ajax.responseText;  //data是后台的数据（可以是字符串，也可以是对象 也可以是对象集合）
					//var objs =eval("("+data+")")  这样可以把后台传过来的对象或者对象集合在前台接收成对象或对象集合
					if("0" == data){
						//可用
						document.getElementById("loginnamesp").innerHTML="<font color='green'>可用</font>";
					}else{
						//不可用
						document.getElementById("loginnamesp").innerHTML="<font color='red'>不可用</font>";
					} 
				}
			};
			//4.发送
			ajax.send(null);
		}
	</script>

<body>
	<form action="" method="post">
		用户名：<input type="text" name="name" id="name" value="" onblur="chongMing()"> <span id="loginnamesp"></span>
		
		<br>
		密码：<input type="password" name="ps" id="ps" value=""> <br>
		年龄：<input type="text" name="age" id="age" value=""> <br>
		<input type="submit" value="提交">
	</form>	
</body>

后台创建响应输入流：

//这是响应的对象和对象集合
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		
		Gson json = new Gson();
		out.print(json.toJson(cList));// 字符串  
		// 关闭流
		out.close();
//这是字符串和int类型的响应方式
		int count=us.getChongMing(name);
		//String s = "ssssssssssss";
		//创建ajax响应输出流
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		//out.print(s);
		out.print(count); //输出字符串
		out.close(); //关闭流