jQuery中ajax请求的六种方法（三、一）：$.ajax()方法
1.基础的$.ajax()方法
<!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
var requestType = "post";
// 如果country 取到了值，并且不为空的时候。
if (country != undefined && country != null) {
// 根据国家获取该国的城市列表，并设置到城市下拉框中
$.ajax({
url: "cityServlet?dataType="+myDataType, // 需要访问的url
data: {"country":country}, // 传递给后台的数据
type: requestType, // 请求的类型：get/post
dataType: myDataType, // 数据格式：xml或者json
success: 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>");
});
}
}
// 还有error和async没有写，error省略；async默认都是异步请求，省略；
});
} 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请求的六种方法（三、一）：$.ajax()方法的更多相关文章
- js进阶 11-1 jquery中的页面内容操作的三个方法
jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...
- (三)在js(jquery)中获得文本框焦点和失去焦点的方法
在js(jquery)中获得文本框焦点和失去焦点的方法 文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...
- jQuery中设置form表单中action的值的方法
下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...
- Java过滤器处理Ajax请求，Java拦截器处理Ajax请求，拦截器Ajax请求
Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 >>>>>>>>>>>>>>&g ...
- Java过滤器处理Ajax请求，Java拦截器处理Ajax请求，java 判断请求是不是ajax请求
Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,java 判断请求是不是ajax请求 Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java ...
- AJAX 请求完成时执行函数。Ajax 事件。
ajaxComplete(callback) 概述 AJAX 请求完成时执行函数.Ajax 事件. XMLHttpRequest 对象和设置作为参数传递给回调函数.大理石直角尺 参数 callback ...
- 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请求的六种方法（三、二）：$.get()方法
2.$.get()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
随机推荐
- python+selenium+unittest发送Mail163邮件（PO）
一.如下为项目的目录分布: 二.数据驱动yaml 三.Mail163登录测试用例编写 四.163邮件配置 五.Mail163测试用例执行: 六.邮件执行情况如下:
- 微信小程序云开发-数据库-商品列表数据排序
一.wxml添加升序和降序 在商品列表的wxml文件中添加超链接a标签,分别用于升序和降序的点击.分别绑定升序和降序的点击事件. 二.js文件实现升序和降序 分别写对应的按价格升序函数sortByPr ...
- 【Mysql】InnoDB 中的聚簇索引、二级索引、联合索引
接上一篇内容. 一.聚簇索引 其实之前内容中介绍的 B+ 树就是聚簇索引. 这种索引不需要我们显示地使用 INDEX 语句去创建,InnoDB 引擎会自动创建.另外,在 InnoDB 引擎中,聚簇索引 ...
- 如何访问网络损伤仪WANsim的控制界面
一台全新的WANsim网络损伤仪的默认IP地址为192.168.1.199.网络损伤仪的控制界面部署在 8080 端口. 所以,我们在成功连接了WANsim之后,只需要在控制电脑上打开谷歌浏览器,访问 ...
- Vulnhub -- Jarbas靶机渗透
目标:拿到服务器的Shell 信息收集 配置好后用nmap扫描 kali's ip:192.168.241.131 nmap -sP 192.168.241.131/24 一个个扫描 发现192.16 ...
- Skywalking-03：Skywalking本地调试
live-demo 与 skywalking 源码联调 构建项目 找一个目录执行如下命令 git clone https://github.com/apache/skywalking.git # cl ...
- 《手把手教你》系列技巧篇（十一）-java+ selenium自动化测试-元素定位大法之By tag name（详细教程）
1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍By ClassName.看到ID,NAME这些方法的讲解,小伙伴们和童鞋们应该知道,要做好Web自动化测试,最好是需要了 ...
- 利用docker-compose快速部署测试用数据库服务器
起因 开发中经常需要快速部署一台随用随关的数据库服务器,如mysql,oracle,mongodb,elastic-search 尝试 一直觉得docker特别方便,加上docker-compose. ...
- Python -- raw_input函数
使用raw_input函数,它会把所有的输入当作原始数据(raw data),然后将其放入字符串中: >>> input("Enter a number: ") ...
- 利用 cgroup 的 cpuset 控制器限制进程的 CPU 使用
最近在做一些性能测试的事情,首要前提是控制住 CPU 的使用量.最直观的方法无疑是安装 Docker,在每个配置了参数的容器里运行基准程序. 对于计算密集型任务,在只限制 CPU 的需求下,直接用 L ...