jQuery中ajax请求的六种方法（三、四）：$.getJSON()方法
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>
---
城市：<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()方法的更多相关文章
- jQuery中ajax请求的六种方法（三、三）：$.post()方法
3.$.post()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- jQuery中ajax请求的六种方法（三、二）：$.get()方法
2.$.get()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- jQuery中ajax请求的六种方法（三、一）：$.ajax()方法
1.基础的$.ajax()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- jQuery中ajax请求的六种方法（三、六）：load()方法
6.load()方法 load的html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- jQuery中ajax请求的六种方法（三、五）：$.getScript()方法
5.$.getScript()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- jQuery中ajax的使用与缓存问题的解决方法
http://www.jb51.net/article/44620.htm —————————————————————————————————————————————————————————————— ...
- JQuery中ajax请求写法
$.ajax({ type: "POST", url: "ygdwController.do?getonygdw", data : "id=" ...
- jquery中ajax使用error调试错误的方法
JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息. jquery ...
随机推荐
- 北京大公司二面：了解Redis持久化机制吗？
今日总结 Redis持久化机制:RDB和AOF RDB持久化:定时任务,BGSAVE命令 fork一个子进程生成RDB文件(二进制) AOF持久化:根据配置将写命令存储至日志文件中,顺序写&& ...
- Python+Requests+Xpath实现动态参数获取实战
1.古诗文网直接登录时,用浏览器F12抓取登录接口的入参,我们可以看到框起来的key对应的value是动态参数生成的,需获取到: 2.登录接口入参的值一般是登录接口返回的原数据值,若刷新后接口与对应源 ...
- etcd学习(3)-grpc使用etcd做服务发现
grpc通过etcd实现服务发现 前言 服务注册 服务发现 负载均衡 集中式LB(Proxy Model) 进程内LB(Balancing-aware Client) 独立 LB 进程(Externa ...
- 【spring源码系列】之【Bean的循环依赖】
希望之光永远向着目标清晰的人敞开. 1. 循环依赖概述 循环依赖通俗讲就是循环引用,指两个或两个以上对象的bean相互引用对方,A依赖于B,B依赖于A,最终形成一个闭环. Spring循环依赖的场景有 ...
- py3射击小游戏
关于py3面向对象的小Demo,欢迎 交流. class Person(object):#声明人类 def __init__(self,name): self.name = name self.gun ...
- 使用javah 给.class类编译jni_helloworld.h文件头
第一步,在idea中,编写java文件,并且编译 package jni; public class HelloWorld { static { System.loadLibrary("He ...
- springboot 中 inputStream 神秘消失之谜
序言 最近小明接手了前同事的代码,意料之外.情理之中的遇到了坑. 为了避免掉入同一个坑两次,小明决定把这个坑记下来,并在坑前立一个大牌子,避免其他小伙伴掉进去. HTTPClient 模拟调用 为了把 ...
- 从零开始学习JAVA（入门基础）
目录 博主从零开始学习JAVA(入门基础) 1.搭建JAVA开发环境 卸载JDK(未安装的请忽略) 安装JDK 2.编程语言中,何为编译型与解释型 编译型 解释型 3.第一个JAVA应用程序 4.JA ...
- 对象转换工具 MapStruct 介绍
前言 在我们日常开发的分层结构的应用程序中,为了各层之间互相解耦,一般都会定义不同的对象用来在不同层之间传递数据,因此,就有了各种 XXXDTO.XXXVO.XXXBO 等基于数据库对象派生出来的对象 ...
- vivo 全球商城：优惠券系统架构设计与实践
一.业务背景 优惠券是电商常见的营销手段,具有灵活的特点,既可以作为促销活动的载体,也是重要的引流入口.优惠券系统是vivo商城营销模块中一个重要组成部分,早在15年vivo商城还是单体应用时,优惠券 ...