4.$.getJSON()方法

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>jQuery中的ajax基础方法</title>

	</head>

	<script type="text/javascript" src="js/jquery-1.11.3.js"></script>

	<script type="text/javascript">

		$(document).ready(function() {

			$("#country").change(function() {

				// 拿到当前country中的值！

				var country = $(this).val();

				// 如果country 取到了值，并且不为空的时候。

				if (country != undefined && country != null) {

					// 根据国家获取该国的城市列表，并设置到城市下拉框中

					/*

						$.getJSON(url, [data], [callback])

						通过远程 HTTP GET 请求载入json信息；

						这是$.ajax的一个高级实现。

					*/

					$.getJSON(

						// url

						"cityServlet", // 需要访问的url

						// data

						{"country":country}, // 传递给后台的数据

						// 回调函数

						function(data) {

							// 在确定data为未定义，或者为空的时候，就不继续往下执行了。

							if (data == undefined || data == null) {

								// 不知道可不可以这样使用return。

								return;

							}

							// 获取从服务器传过来的数据内容：其中的cities是服务器上规定的json的名字

							var cities = data.cities; // 直接的json对象

							// 清空原来的城市列表

							var $citySelect = $("#city"); // 约定jQuery的对象，命令都用$开头

						    $citySelect.empty();

							// 遍历cities，并且将其中的内容append到select中去

							$.each(cities, function(i, obj) {

								$citySelect.append("<option>"+obj.city+"</option>");

							});

						}

					);

				} else {

					// 未选择国家

					alert("请选择国家！");

				}

			});

		});

	</script>

	<body>

		<div style="width:100%;text-align: center;margin-top: 30px;">

	    	国家：<select id="country" style="width:160px;">

		    		<option>请选择</option>

		    		<option value="中国">中国</option>

		    		<option value="美国">美国</option>

	    		</select>

	    	&nbsp;&nbsp;---&nbsp;&nbsp;

	    	城市：<select id="city"></select>

    	</div>

	</body>

</html>

后台servlet：

package com.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/cityServlet")

public class CityServlet extends HttpServlet {

	private static final long serialVersionUID = -1046035703953361573L;

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		request.setCharacterEncoding("utf-8");

		response.setContentType("text/html;charset=utf-8");

		String country = request.getParameter("country");

		String dataType = request.getParameter("dataType");

		/*

		String sendType = request.getParameter("sendType");

		if (!"post".equals(sendType)) { // 为get方式的时候，因为Tomcat7.0之前才有这个问题，忽略！

			country = new String(request.getParameter("country").getBytes("ISO-8859-1"), "utf-8");

		}

		*/

		StringBuffer sb = new StringBuffer("");

		if (!"xml".equals(dataType)) {

			sb.append("{");

			sb.append("\"cities\":[");

			if ("中国".equals(country)) {

				sb.append("{\"city\":\"北京\"},{\"city\":\"上海\"},{\"city\":\"广州\"},{\"city\":\"深圳\"}");

			} else if ("美国".equals(country)) {

				sb.append("{\"city\":\"华盛顿特区\"},{\"city\":\"纽约\"},{\"city\":\"洛杉矶\"},{\"city\":\"芝加哥\"}");

			}

			sb.append("]}");

			response.setContentType("text/html;charset=utf-8"); // 纯文本格式

		} else {

			sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?><root>");

			if ("中国".equals(country)) {

				sb.append("<city>北京</city>").append("<city>上海</city>").append("<city>广州</city>").append("<city>深圳</city>");

			} else if ("美国".equals(country)) {

				sb.append("<city>华盛顿特区</city>").append("<city>纽约</city>").append("<city>洛杉矶</city>").append("<city>芝加哥</city>");

			}

			sb.append("</root>");

			response.setContentType("text/xml;charset=utf-8"); // xml格式

		}

		PrintWriter out = response.getWriter();

		out.println(sb.toString());

		out.flush();

		out.close();

	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		doGet(request, response);

	}

}

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

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

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

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

    2.$.get()方法 <!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. Scrapy 爬虫框架学习笔记(未完，持续更新)

    Scrapy 爬虫框架 Scrapy 是一个用 Python 写的 Crawler Framework .它使用 Twisted 这个异步网络库来处理网络通信. Scrapy 框架的主要架构 根据它官 ...

  2. 你有没有乱用“leader”，担当是个好东西

    PS:此文为个人认知,不足处请多多批评. 近期在一线leader(经理)身上发现了几个case,然后又回想起前几年自己做的一些傻事,可能都属于明面上leader不会说什么,但私下会有情绪的类型: Ca ...

  3. python 实现自动部署测试环境

    预设条件 产品运行在Linux CentOS6 X64上 python3,Djanggo,Cherrypy安装好手动安装过程 登录服务器 检查是否有以前的版本的产品在运行,有,停掉 如果有原来的代码包 ...

  4. Deepin 20.1打造软件开发环境

    支持国产操作系统,替代Windows势在必行,不能让美国卡"脖子"是广大计算机爱好者的共同心愿,下面列举一下Deepin V20.1下如何安装常用软件 ============== ...

  5. Python将字符串转化为对应类名的两种方法

    way first: 1 from django.utils.module_loading import import_string 2 ValidationError = import_string ...

  6. jvm源码解读--08 创建oop对象,将static静态变量放置在oop的96 offset处

    之前分析的已经加载的.Class文件中都没有Static 静态变量,所以也就没这部分的解析,自己也是不懂hotspot 将静态变量放哪里去了,追踪源码之后,看清楚了整个套路,总体上来说,可以举例来说对 ...

  7. Unity3D学习笔记3——Unity Shader的初步使用

    目录 1. 概述 2. 详论 2.1. 创建材质 2.2. 着色器 2.2.1. 名称 2.2.2. 属性 2.2.3. SubShader 2.2.3.1. 标签(Tags) 2.2.3.2. 渲染 ...

  8. vue日记之可展开的消息气泡

    项目小需求之聊天气泡可展开内容 因为某些信息内容太长或者某种原因必须分行输出,这就导致了有时候一个气泡占据了一整个聊天区域 所以我打算实现一个在该气泡加载的时候判断其气泡长度,并在长度过长的情况下进行 ...

  9. OpenFaaS实战之八：自制模板(maven+jdk8)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  10. PWN——ret2dl_resolve

    PWN--ret2dl_resolve ret2dl_resolve是栈溢出中,底层且高级的一种利用手段,这里特此做一篇笔记学习一下. 个人认为,要掌握这种方法,自己去写demo来多次调试分析是不二法 ...