3.$.post()方法

<!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) {

					// 根据国家获取该国的城市列表，并设置到城市下拉框中

					/*

						这里的post同之前的get，是同样的操作形式。参数都相同。所以一下我只改了名字

						在使用post方式的时候，发现其中的参数是四个[最开始使用基础$.ajax({})方法的是{}，是一个对象]

						$.post(url, [data], [callback], [type])	

						这里的post四个参数：url、data、callback、type其中，url是必须的，其他用中括号括起来的，

						表示可以省略。

						注意：相比于ajax，post方式没有了ajax的{}表示对象！！！

						不然就直接报错了！这个是我遇到的jQuery能抛出的第一个错，很开心！

						Uncaught SyntaxError: Unexpected token +

					*/

					$.post(

						// 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>

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

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

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

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

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

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

    1.基础的$.ajax()方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  4. jQuery中ajax请求的六种方法（三、六）：load()方法

    6.load()方法 load的html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  5. jQuery中ajax请求的六种方法（三、五）：$.getScript()方法

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

  6. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  7. jQuery中ajax的使用与缓存问题的解决方法

    http://www.jb51.net/article/44620.htm —————————————————————————————————————————————————————————————— ...

  8. JQuery中ajax请求写法

    $.ajax({ type: "POST", url: "ygdwController.do?getonygdw", data : "id=" ...

  9. jquery中ajax使用error调试错误的方法

    JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息. jquery ...

随机推荐

  1. Lambda 方法引用 构造器引用 数组引用

    一.方法引用 注意: 1.Lambda 体中调用方法的参数列表与返回值类型,要与函数式接口中的抽象方法的函数列表和返回值保持一致!2.若Lambda 参数列表中的第一个参数是实例方法的调用者,而第二个 ...

  2. [考试总结]noip模拟7

    为啥博客园 \(\LaTeX\) 老挂???! \(\huge{\text{菜}}\) 刚开始写 \(T1\) 的时候,在看到后缀前缀之后,直接想到 \(AC\) 自动机,在画了半个 \(trie\) ...

  3. 第八篇 -- 对数据库mysql进行连接并压测

    参考链接:https://blog.csdn.net/laofashi2015/article/details/81296929 工具:mysql-8.0.12-winx64,apache-jmete ...

  4. Win10离线安装.net3.5

    起因 工作原因需要安装vs2008,但是依赖.net3.5,寻找可以离线安装的版本 尝试 下载.net framework sp1完整包 dotnetfx35.exe 可选下载 语言包 dotnetf ...

  5. python序列化proto时对repeated修饰数据进行赋值(常用类型和其他类型)

    说一下对proto文件中数据使用时的书写方法,因为笔者也经常弄混淆 一.repeated修饰符,该列表是常用类型,比如int message C2GS_GoodsList { repeated int ...

  6. Django关闭html转义

    我们在views定义的html语句传递到html文件会按照原样式输出,并把我们定义的html标签页输出了,这是因为django模板默认帮我们开起了html转义功能 {{ lp}} <hr> ...

  7. jquery 中 live() 对于js的需求版本导致不可用解决办法

    $('body').on('click','.edit', function() {            var id = $(this).parent().attr('id');          ...

  8. React Hooks的理解

    一.是什么 Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook,官方给出的动机是解决长时间使 ...

  9. 记录21.07.24 —— Vue的组件与路由

    VUE组件 作用:复用性 创建组件的三种方式 第一种:使用extends搭配component方法 第二种:直接使用component方法 只有用vue声明且命名的才称之为创建组件 注意:templa ...

  10. 双非本科字节跳动Android面试题分享（已拿offer）

    基本情况 本人系非985非211普通本科生一枚,有实习有项目经历但成绩普通,在面试前刷了很多面经.面试题,这里也把自己的分享下,做个回报好了,顺便攒攒人品,一到这种时候人就迷信起来了. 面试是以视频面 ...