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>

	    	&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请求的六种方法（三、一）：$.ajax()方法的更多相关文章

  1. js进阶 11-1 jquery中的页面内容操作的三个方法

    jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...

  2. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

  3. jQuery中设置form表单中action的值的方法

    下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...

  4. Java过滤器处理Ajax请求，Java拦截器处理Ajax请求，拦截器Ajax请求

    Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 >>>>>>>>>>>>>>&g ...

  5. Java过滤器处理Ajax请求，Java拦截器处理Ajax请求，java 判断请求是不是ajax请求

    Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,java 判断请求是不是ajax请求   Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java ...

  6. AJAX 请求完成时执行函数。Ajax 事件。

    ajaxComplete(callback) 概述 AJAX 请求完成时执行函数.Ajax 事件. XMLHttpRequest 对象和设置作为参数传递给回调函数.大理石直角尺 参数 callback ...

  7. jQuery中ajax请求的六种方法（三、四）：$.getJSON()方法

    4.$.getJSON()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

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

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

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

    2.$.get()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

随机推荐

  1. 龙芯 loongnix20 rc2 初体验

    2021-07-24 v0.0.1 版权声明:原创文章,未经博主允许不得转载 3A5000 昨天发布啦,历史上的昨天是中共一大的第一天. 3A5000 的团购还没开始(大概还是3999左右整机的样子) ...

  2. P2015

    二叉苹果树 1 #include<iostream> 2 #include<cstdio> 3 #include<algorithm> 4 #include< ...

  3. P5147-数学-随机数生成器

    P5147-数学-随机数生成器 (洛谷第一篇题解说这是高一数学题,新高二感觉到被吊打) 我们设work(x)的期望值为\(f_x\) 注意\(f_1\)是边界.不过对下列式子没有影响.原因参照必修的数 ...

  4. RHEL7通过Rsyslog搭建集中日志服务器

    说明:这里是Linux服务综合搭建文章的一部分,本文可以作为单独搭建rsyslog日志服务器的参考. 注意:这里所有的标题都是根据主要的文章(Linux基础服务搭建综合)的顺序来做的. 如果需要查看相 ...

  5. 数据结构与算法（python版）

    ADT抽象数据类型(ADT:Abstract Data Type):ADT是对数据进行处理的一种逻辑描述,并不涉及如何实现这些处理. 同一ADT可以采用不同的数据结构来实现:1.采用程序设计语言的控制 ...

  6. 爬取房价信息并制作成柱状图XPath，pyecharts

    以长沙楼盘为例,看一下它的房价情况如何url = https://cs.newhouse.fang.com/house/s/b91/ 一.页面 二.分析页面源代码 我们要获得的数据就是名字和价格,先来 ...

  7. jvm源码解读--15 oop对象详解

    (gdb) p obj $15 = (oopDesc *) 0xf3885d08 (gdb) p * obj $16 = { _mark = 0x70dea4e01, _metadata = { _k ...

  8. ffmpeg 任意文件读取漏洞/SSRF漏洞 （CVE-2016-1897/CVE-2016-1898）

    影响版本 在FFMpeg2.X poc http://192.168.49.2:8000/?name={%25%20for%20c%20in%20[].__class__.__base__.__sub ...

  9. 自学linux——5.网络设置

    网络设置 1.网卡配置文件位置:ls /etc/sysconfig/network-scripts/ 2.网卡配置文件命名:ifcfg-网卡名称 3.查看网卡配置文件:cat /etc/sysconf ...

  10. laod

    https://iiio.io/download/20170120/ https://laod.cn/hosts/2017-google-hosts.html Copyright (c) 老D博客:h ...