jQuery中ajax请求的六种方法（三、二）：$.get()方法
2.$.get()方法
<!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();
// 告诉服务器，我请求想要获得的数据格式是什么样的
var myDataType = "json"; // xml / json
// 如果country 取到了值，并且不为空的时候。
if (country != undefined && country != null) {
// 根据国家获取该国的城市列表，并设置到城市下拉框中
/*
在使用get方式的时候，发现其中的参数是四个[最开始使用基础$.ajax({})方法的是{}，是一个对象]
$.get(url, [data], [callback], [type])
这里的get四个参数：url、data、callback、type其中，url是必须的，其他用中括号括起来的，
表示可以省略。
注意：相比于ajax，get方式没有了ajax的{}表示对象！！！
不然就直接报错了！这个是我遇到的jQuery能抛出的第一个错，很开心！
Uncaught SyntaxError: Unexpected token +
*/
$.get(
// url
"cityServlet?dataType="+myDataType, // 需要访问的url
// data
{"country":country}, // 传递给后台的数据
// 回调函数
function(data) {
// 在确定data为未定义，或者为空的时候，就不继续往下执行了。
if (data == undefined || data == null) {
// 不知道可不可以这样使用return。
return;
}
// 这里使用的type并不是外部传入的，是我自定义的，告诉服务器我需要什么类型那里
if ("json" == myDataType) {
// 获取从服务器传过来的数据内容：其中的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>");
});
}
if ("xml" == myDataType) {
/*
首先将data转成一个jQuery对象，因为xml不像json能够直接操作;
必须先转化成jQuery对象，通过jQuery中提供的解析xml的方法进行操作！
*/
var $xmlDocument = $(data);
var $cities = $xmlDocument.find("city");
// 清空原来的城市列表
var $citySelect = $("#city"); // 约定jQuery的对象，命令都用$开头
$citySelect.empty();
// 遍历cities，并且将其中的内容append到select中去
$.each($cities, function(i, obj) {
/*
上面的json，直接通过data.cities，然后遍历cities的时候，通过foreach的obj
直接obj.city就取出值了。
但是xml的操作就相对麻烦了，xml要先转jQuery对象
通过find查节点，然后组成一个数组，使用的时候，foreach出来，还需要把DOM转jQuery对象
通过jQuery对象去取其中的text，层层剥离。
可以看出在jQuery中，xml的处理方式和html的处理方式完全相同
*/
$citySelect.append("<option>"+$(obj).text()+"</option>");
});
}
},
// 返回值的类型，json? xml?
myDataType
);
} 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请求的六种方法（三、二）：$.get()方法的更多相关文章
- jQuery中ajax请求的六种方法（三、四）：$.getJSON()方法
4.$.getJSON()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- jQuery中ajax请求的六种方法（三、三）：$.post()方法
3.$.post()方法 <!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 ...
随机推荐
- Python+js进行逆向编程加密MD5格式
一.安装nodejs 二.安装:pip install PyExecJs 三.js源文件Md5格式存放本地,如下 var n = {}function l(t, e) {var n = (65535 ...
- R在ubuntu16.04上环境搭建
1.R安装 sudo apt-get update sudo apt-get remove vim-common sudo apt-get install vimapt-cache show r-ba ...
- PHP获取当日或本月时间戳范围
在mysql数据库中使用int类型保存时间戳时,一般在程序中可能会用到统计当日,当月的一些数据.那么可以用如下的方式限定时间范围: //当日销售 $today_start = strtotime( ...
- php 对文件操作相关函数
1.fopen() :函数打开文件或者 URL.如果打开失败,本函数返回 FALSE. 2.fwrite() : 写入文件(可安全用于二进制文件);fwrite(file,string,length) ...
- HashMap的转化时机
HashMap的转化时机 /** * 使用红黑树(而不是链表)来存放元素.当向至少具有这么多节点的链表再添加元素时,链表就将转换为红黑树. * 该值必须大于2,并且应该至少为8,以便于删除红黑树时转回 ...
- [源码解析]机器学习参数服务器ps-lite(4) ----- 应用节点实现
[源码解析]机器学习参数服务器ps-lite(4) ----- 应用节点实现 目录 [源码解析]机器学习参数服务器ps-lite(4) ----- 应用节点实现 0x00 摘要 0x01 基础类 1. ...
- 卷向字节码-Java异常到底是怎么被处理的？
你好呀,我是why,你也可以叫我歪歪. 比如下面这位读者: 他是看了我<神了!异常信息突然就没了?>这篇文章后产生的疑问. 既然是看了我的文章带来的进一步思考,恰巧呢,我又刚好知道. 虽然 ...
- [GXYCTF2019]Ping Ping Ping(ping命令执行绕过Waf)
记一道ping注入的题.过滤了很多字符. 分析 简单的测了一下,很容易就拿到了flag.php和index.php. 但是存在waf无法直接查看.直接?ip=127.0.0.1|cat flag.ph ...
- 中高级Android大厂面试秘籍，为你保驾护航金三银四，直通大厂(上）
前言 当下,正面临着近几年来的最严重的互联网寒冬,听得最多的一句话便是:相见于江湖~.缩减HC.裁员不绝于耳,大家都是人心惶惶,年前如此,年后想必肯定又是一场更为惨烈的江湖厮杀.但博主始终相信,寒冬之 ...
- [SQL]修改和删除基本表
修改基本表 SQL语言用alter table语句修改基本表,其一般格式如下: alter table <表名> add <列名> <数据类型> [<列级完整 ...