2.$.get()方法

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>jQuery中的ajax基础方法</title>
  6. 	</head>
  7. 	<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
  8. 	<script type="text/javascript">
  9. 		$(document).ready(function() {
  10. 			$("#country").change(function() {
  11. 				// 拿到当前country中的值！
  12. 				var country = $(this).val();
  13. 				// 告诉服务器，我请求想要获得的数据格式是什么样的
  14. 				var myDataType = "json"; // xml / json
  15. 				// 如果country 取到了值，并且不为空的时候。
  16. 				if (country != undefined && country != null) {
  17. 					// 根据国家获取该国的城市列表，并设置到城市下拉框中
  18. 					/*
  19. 						在使用get方式的时候，发现其中的参数是四个[最开始使用基础$.ajax({})方法的是{}，是一个对象]
  20. 						$.get(url, [data], [callback], [type])	
  22. 						这里的get四个参数：url、data、callback、type其中，url是必须的，其他用中括号括起来的，
  23. 						表示可以省略。
  25. 						注意：相比于ajax，get方式没有了ajax的{}表示对象！！！
  26. 						不然就直接报错了！这个是我遇到的jQuery能抛出的第一个错，很开心！
  27. 						Uncaught SyntaxError: Unexpected token +
  28. 					*/
  29. 					$.get(
  30. 						// url
  31. 						"cityServlet?dataType="+myDataType, // 需要访问的url
  32. 						// data
  33. 						{"country":country}, // 传递给后台的数据
  34. 						// 回调函数
  35. 						function(data) {
  36. 							// 在确定data为未定义，或者为空的时候，就不继续往下执行了。
  37. 							if (data == undefined || data == null) {
  38. 								// 不知道可不可以这样使用return。
  39. 								return;
  40. 							}
  41. 							// 这里使用的type并不是外部传入的，是我自定义的，告诉服务器我需要什么类型那里
  42. 							if ("json" == myDataType) {
  43. 								// 获取从服务器传过来的数据内容：其中的cities是服务器上规定的json的名字
  44. 								var cities = data.cities; // 直接的json对象
  45. 								// 清空原来的城市列表
  46. 								var $citySelect = $("#city"); // 约定jQuery的对象，命令都用$开头
  47. 							    $citySelect.empty();
  49. 								// 遍历cities，并且将其中的内容append到select中去
  50. 								$.each(cities, function(i, obj) {
  51. 									$citySelect.append("<option>"+obj.city+"</option>");
  52. 								});
  53. 							}
  54. 							if ("xml" == myDataType) {
  55. 								/*
  56. 								首先将data转成一个jQuery对象，因为xml不像json能够直接操作;
  57. 								必须先转化成jQuery对象，通过jQuery中提供的解析xml的方法进行操作！
  58. 								*/
  59. 								var $xmlDocument = $(data);
  60. 								var $cities = $xmlDocument.find("city");
  62. 								// 清空原来的城市列表
  63. 								var $citySelect = $("#city"); // 约定jQuery的对象，命令都用$开头
  64. 							    $citySelect.empty();
  66. 							 	// 遍历cities，并且将其中的内容append到select中去
  67. 								$.each($cities, function(i, obj) {
  68. 									/*
  69. 									上面的json，直接通过data.cities，然后遍历cities的时候，通过foreach的obj
  70. 									直接obj.city就取出值了。
  71. 									但是xml的操作就相对麻烦了，xml要先转jQuery对象
  72. 									通过find查节点，然后组成一个数组，使用的时候，foreach出来，还需要把DOM转jQuery对象
  73. 									通过jQuery对象去取其中的text，层层剥离。
  74. 									可以看出在jQuery中，xml的处理方式和html的处理方式完全相同
  75. 									*/
  76. 									$citySelect.append("<option>"+$(obj).text()+"</option>");
  77. 								});
  78. 							}
  79. 						},
  80. 						// 返回值的类型，json? xml?
  81. 						myDataType
  82. 					);
  83. 				} else {
  84. 					// 未选择国家
  85. 					alert("请选择国家！");
  86. 				}
  87. 			});
  88. 		});
  89. 	</script>
  90. 	<body>
  91. 		<div style="width:100%;text-align: center;margin-top: 30px;">
  92. 	    	国家：<select id="country" style="width:160px;">
  93. 		    		<option>请选择</option>
  94. 		    		<option value="中国">中国</option>
  95. 		    		<option value="美国">美国</option>
  96. 	    		</select>
  97. 	    	&nbsp;&nbsp;---&nbsp;&nbsp;
  98. 	    	城市：<select id="city"></select>
  99.     	</div>
  100. 	</body>
  101. </html>

后台servlet：

  1. package com.servlet;
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  12. @WebServlet("/cityServlet")
  13. public class CityServlet extends HttpServlet {
  15. 	private static final long serialVersionUID = -1046035703953361573L;
  17. 	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  18. 		request.setCharacterEncoding("utf-8");
  19. 		response.setContentType("text/html;charset=utf-8");
  20. 		String country = request.getParameter("country");
  21. 		String dataType = request.getParameter("dataType");
  22. 		/*
  23. 		String sendType = request.getParameter("sendType");
  24. 		if (!"post".equals(sendType)) { // 为get方式的时候，因为Tomcat7.0之前才有这个问题，忽略！
  25. 			country = new String(request.getParameter("country").getBytes("ISO-8859-1"), "utf-8");
  26. 		}
  27. 		*/
  28. 		StringBuffer sb = new StringBuffer("");
  29. 		if (!"xml".equals(dataType)) {
  30. 			sb.append("{");
  31. 			sb.append("\"cities\":[");
  32. 			if ("中国".equals(country)) {
  33. 				sb.append("{\"city\":\"北京\"},{\"city\":\"上海\"},{\"city\":\"广州\"},{\"city\":\"深圳\"}");
  34. 			} else if ("美国".equals(country)) {
  35. 				sb.append("{\"city\":\"华盛顿特区\"},{\"city\":\"纽约\"},{\"city\":\"洛杉矶\"},{\"city\":\"芝加哥\"}");
  36. 			}
  37. 			sb.append("]}");
  38. 			response.setContentType("text/html;charset=utf-8"); // 纯文本格式
  39. 		} else {
  40. 			sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?><root>");
  41. 			if ("中国".equals(country)) {
  42. 				sb.append("<city>北京</city>").append("<city>上海</city>").append("<city>广州</city>").append("<city>深圳</city>");
  43. 			} else if ("美国".equals(country)) {
  44. 				sb.append("<city>华盛顿特区</city>").append("<city>纽约</city>").append("<city>洛杉矶</city>").append("<city>芝加哥</city>");
  45. 			}
  46. 			sb.append("</root>");
  47. 			response.setContentType("text/xml;charset=utf-8"); // xml格式
  48. 		}
  49. 		PrintWriter out = response.getWriter();
  50. 		out.println(sb.toString());
  51. 		out.flush();
  53. 		out.close();
  54. 	}
  56. 	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  57. 		doGet(request, response);
  58. 	}
  59. }

jQuery中ajax请求的六种方法（三、二）：$.get()方法的更多相关文章

  1. jQuery中ajax请求的六种方法（三、四）：$.getJSON()方法

    4.$.getJSON()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  2. jQuery中ajax请求的六种方法（三、三）：$.post()方法

    3.$.post()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. jQuery中ajax请求的六种方法（三、一）：$.ajax()方法

    1.基础的$.ajax()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  4. jQuery中ajax请求的六种方法（三、六）：load()方法

    6.load()方法 load的html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  5. jQuery中ajax请求的六种方法（三、五）：$.getScript()方法

    5.$.getScript()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  7. jQuery中ajax的使用与缓存问题的解决方法

    http://www.jb51.net/article/44620.htm —————————————————————————————————————————————————————————————— ...

  8. JQuery中ajax请求写法

    $.ajax({ type: "POST", url: "ygdwController.do?getonygdw", data : "id=" ...

  9. jquery中ajax使用error调试错误的方法

    JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息. jquery ...

随机推荐

  1. Python3中datetime时区转换介绍与踩坑

    最近的项目需要根据用户所属时区制定一些特定策略,学习.应用了若干python3的时区转换相关知识,这里整理一部分记录下来. 下面涉及的几个概念及知识点: GMT时间:Greenwich Mean Ti ...

  2. 破解加速乐-java

    记录一哈自己遇到的简单站点的破解 Talk is cheap,show you the code! import com.google.gson.Gson; import com.google.gso ...

  3. ICCV2021 | 重新思考视觉transformers的空间维度

    ​ 论文:Rethinking Spatial Dimensions of Vision Transformers 代码:https://github.com/naver-ai/pit 获取:在CV技 ...

  4. mock请求时出现中文乱码的解决

    请求返回的乱码如图: 原mock代码如下 [ { "description":"这是我们的第一个mock例子", "request":{ & ...

  5. HDFS中NameNode工作机制

    引言 NameNode: 存储元数据 管理整个HDFS集群 DataNode: 存储数据的block SecondaryNameNode: 辅助HDFS完成一些事情 NameNode和Secondar ...

  6. tkinter 基础教程

    目录 介绍 模块 导入方式 API 使用 主窗口 运行窗口 组件列表介绍 Label 标签 Button 按钮 Options 属性选项 文本框 Entry 单行文本框 Text 多行文本框 文本框属 ...

  7. 记一次mysql事务未提交导致锁未释放的问题

    记一次mysql事务未提交导致锁未释放的问题 ## 查看未提交的事务(3秒内未操作的事务) SELECT p.ID AS conn_id, P.USER AS login_user, P.HOST A ...

  8. Spring Cloud Alibaba - Feign

    Feign Feign简介 使用Feign实现消费者客户端 使用Feign+Ribbon实现客户端负载均衡 底层的负载均衡策略还是使用Ribbon通过Feign进行调用 Feign的相关配置 ribb ...

  9. 在Django中使用Channels功能

    前言:最近后台写游戏更新版本功能,简单就是前端发送更新请求,后端需要对很多台服务器进行更新和各种操作,本来想着实现不难,后来发现因为后端需要执行很长时间,前端返回报错,后端会执行完毕,但是前端先断开了 ...

  10. MySQL索引篇之索引存储模型

      本文重点介绍下索引的存储模型 二分查找   给定一个1~100的自然数,给你5次机会,你能猜中这个数字吗? 你会从多少开始猜?   为什么一定是50呢?这个就是二分查找的一种思想,也叫折半查找,每 ...