Ajax的各种方法实现

最新推荐文章于 2021-10-23 12:03:00 发布

卡布达的西瓜

最新推荐文章于 2021-10-23 12:03:00 发布

阅读量169

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_44900183/article/details/106679081

JavaWeb 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了前后端交互的基本原理，重点讲解了使用AJAX实现前后端数据交换的过程，包括POST和GET请求的区别，以及如何利用JSON格式进行数据传输。同时，探讨了服务器端如何响应前端请求，并返回相应的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

clien:

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript">
		
		 function register(){
			var $mobile = $("#mobile").val();
			var $no = $("#no").val();
			var $name = $("#name").val();
			var $age = $("#age").val() ;
			//post方式请求
			/* $.ajax({
				url:"MobilServlet",
				type:"post",
				data:"mobile="+$mobile,
				success:function(data){
						if(data == "true"){
							alert("改号码已存在！");
							}else{
							alert("注册成功");
								}
					},
				error:function(){
					alert("系统异常");
					}
				}); */
				
				//get方式请求
				/* $.ajax({
				url:"MobilServlet",
				type:"get",
				data:"mobile="+$mobile,
				success:function(data){
						if(data == "true"){
							alert("改号码已存在！");
							}else{
							alert("注册成功");
								}
					},
				}); */

				//Ajax的load() ：该方法将服务端的返回信息 在选择器$("#tip")所选择的元素中加载出来
				/*  $("#tip").load(
				"MobilServlet",
				"mobile="+$mobile,
				); */

				//getJSON()
				$.getJSON(
						"JsonServlet",
						{"mobile":$mobile,"no":$no,"name":$name,"age":$age},//Josn方式传值 k=v
						function(data){
								//js需要通过eval()函数  将返回值  转为一个js能够识别的json对象
								//var jsonStudent = eval(data.student);//返回单个Json对象可以直接拿
								//alert(jsonStudent.stu_name);
								var jsonStudents = eval(data);//返回多个Json需要遍历
								$.each(jsonStudents,function(i,element){
										alert(this.stu_name+","+this.stu_age);
									});
							}		
						);
			} 
		
	</script>

	<body>
	学号：<input id="no"><br>
	姓名：<input id="name"><br>
	年龄：<input id="age"><br>
	手机号：<input id="mobile"><br>
	<input type="submit" value="注册" onclick="register()">
	<span id="tip"></span>
</body>

server①:

request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		
		String mobile = request.getParameter("mobile");
		
		//回调函数
		PrintWriter out = response.getWriter();//该输出流  进行前端通信
		//模拟三层
		if("15664016056".equals(mobile)) {//"15664016056".equals(mobile)此种方法可以排空，优于mobile.equals("....")
			//return true ;
//			out.write("true");//servlet 以输出流的方式 将信息  返回给 客户端
			
			//如果客户端是getJOSN(), 则需要以Josn格式返回数据
				//返回Json字符串
			out.write("{\"msg\":\"true\"}");//  {\"msg\":\"false\"}   {"msg":"true"}
				
		}else {
			//return false ;
//			out.write("false");
			
			out.write("{\"msg\":\"false\"}");// {\"msg\":\"false\"}

		}

server②：主要是返回多个Json对象，需要在前端遍历

request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=UTF-8");
		
		String mobile = request.getParameter("mobile");
		int no = Integer.parseInt( request.getParameter("no") );
		String name = request.getParameter("name") ;
		int age = Integer.parseInt(request.getParameter("age"));
		
		Student student1 = new Student();
		student1.setMobile(mobile);
		student1.setStu_age(age);
		student1.setStu_name(name);
		student1.setStu_no(no);
		
		Student student2 = new Student();
		student2.setMobile("2141");
		student2.setStu_age(13);
		student2.setStu_name("ls");
		student2.setStu_no(121);
		
		Student student3 = new Student();
		student3.setMobile("11351");
		student3.setStu_age(23);
		student3.setStu_name("zs");
		student3.setStu_no(3);
		//回调函数
		PrintWriter out = response.getWriter();//该输出流  进行前端通信
		//模拟三层
//		if("15664016056".equals(mobile) || "zs".equals(name)) {//"15664016056".equals(mobile)此种方法可以排空，优于mobile.equals("....")
			//return true ;
//			out.write("true");//servlet 以输出流的方式 将信息  返回给 客户端
			
			//如果客户端是getJOSN(), 则需要以Josn格式返回数据
				//返回Json字符串
//			out.write("{\"msg\":\"true\"}");//  {\"msg\":\"false\"}   {"msg":"true"}
			
			
				//返回Json对象
			JSONObject json = new JSONObject();
			json.put("student1", student1); // 返回json对象  key="student" value=student 对象
			json.put("student2", student2); // 返回json对象  key="student" value=student 对象
			json.put("student3", student3); // 返回json对象  key="student" value=student 对象
			out.print(json);
			
//		}	
//		else {
//			//return false ;
////			out.write("false");
//			
//			out.write("{\"msg\":\"false\"}");// {\"msg\":\"false\"}
//			
//			
//			
//		}
	}