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 ...
随机推荐
- Appearance-Based Loop Closure Detection for Online Large-Scale and Long-Term Operation
Abstract: 本文提出一种用于大规模的长期回环检测,基于一种内存管理方法:限制用于回环检测的位置数目,以满足实时性要求. introduction: 大场景存在的最关键问题:随着场景增大,回环检 ...
- if函数+isna函数+vlookup函数实现不同列相同单元格内容排列在同一行
1,首先学习的网址:https://jingyan.baidu.com/album/22a299b5dd0f959e19376a22.html?picindex=1 2,excel 这也许是史上最好最 ...
- PO封装设计模式 -- Web页面端测试
一.已登录页面 -->新建PO封装的包 -- 以下源码适用于python3以上的版本 代码优化新增 Image -->对操作步骤进行截图 二.basepage 包基础类的封装如下: fro ...
- Flask db init 抛出KeyError: 'migrate’这个问题
问题 目录下执行flask db init 结果 抛出KeyError: 'migrate'这个问题 ## 原因 初始化Migrate对象时没有加db 解决: appfactory.py import ...
- 一个完整的socket recv()案例，包括解决粘包、服务器主动推数据的问题
前言: 本文是针对socket长连接(涉及到服务器主动推数据),每个包头的拼接算法和长度都不一样,具体的包头小伙伴们问自己公司的开发吧,本文只是提供思路.再啰嗦一句:recv到的包头中数字进行某种运算 ...
- SLF4J日志桥接的应用
最近在给公司的测试部门开发一套自动化测试框架,为了是框架产生的测试报告更易于分析,我考虑将每一个用例与运行过程中产生的日志相关联,为了实现这样的效果,首先就需要统一项目的日志输出,那么具体怎么做呢? ...
- argparse模块基本用法
argparse模块基本用法 在 python 编写的程序中,我们经常会看到的 argparse 相关代码,而它究竟怎么使用呢?接招! argparse 是一个命令行参数解析模块 现在提出需求,我需要 ...
- 共享内存 & Actor并发模型哪个更快？
HI,前几天被.NET圈纪检委@懒得勤快问到共享内存和Actor并发模型哪个速度更快. 前文传送门: 说实在,我内心10w头羊驼跑过...... 先说结论 首先两者对于并发的风格模型不一样. 共享内存 ...
- Supervisord 远程命令执行漏洞（CVE-2017-11610）
漏洞影响范围: Supervisor version 3.1.2至Supervisor version 3.3.2 poc 地址.https://github.com/vulhub/vulhub/tr ...
- Python的round()函数与数学的四舍五入的区别
print(round(0.5))>>0print(round(1.5))>>2print(round(2.5))>>2整数部分为偶 小数为0.5 向下取整 0也是 ...