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. [刘阳Java]_JdbcTemplate用法_第11讲

    JdbcTemplate模板提供操作数据库的方法应用,下面我们来说一下它的用法(注意:建议大家结合Spring API文档学习效果更好,因为下面的代码只是"抱砖引玉") 1. 遵循 ...

  2. 详解API Gateway流控实现,揭开ROMA平台高性能秒级流控的技术细节

    摘要:ROMA平台的核心系统ROMA Connect源自华为流程IT的集成平台,在华为内部有超过15年的企业业务集成经验. 本文分享自华为云社区<ROMA集成关键技术(1)-API流控技术详解& ...

  3. C++11 左值引用和右值引用与引用折叠和完美转发

    1.左值与右值 最感性的认识. 当然,左值也是可以在右边的. 左值是可以被修改的,右值不能. 当然取地址也是. 生存周期一般左值会比右值的长,一般右值都计算时产生的无名临时对象,存在时间比较短. 下面 ...

  4. python之数据驱动ddt操作(方法一)

    下载ddt并安装 Pip install ddt 或者官网下载安装 http://ddt.readthedocs.io/en/latest/ https://github.com/txels/ddt ...

  5. Vue全局引入JS的方法

    两种情况: 1. js为ES5的写法时,如下(自定义的my.js): function fun(){ console.log('hello'); } Vue中的全局引入方式为,在index.html中 ...

  6. python调用接口方式

    python中调用API的几种方式: - urllib2- requests 一.调用别人的接口 案例1.urllib2 import urllib2, urllib github_url ='htt ...

  7. 第十三篇 -- QMainWindow与QAction(新建-打开-保存)

    效果图: 添加了三个Action,分别是新建,打开,和保存,没有具体写相应的功能,只是提供了一个接口,可以自己写相应的功能.这次不仅将这些Action放在了工具栏,还将其添加到了菜单栏.方法同样是直接 ...

  8. Spring Boot Mail通过QQ邮箱发送邮件

    本文将介绍如何在Spring Boot工程完成QQ邮箱配置,实现邮件发送功能. 一.在pom文件中添加依赖 <dependency> <groupId>org.springfr ...

  9. CAS 原理 应用

    原子CAS操作 原子操作指令里,有原子加,原子减,cas到底是什么呢? 首先看一段代码, bool compare_and_swap(int *accum, int *dest, int newval ...

  10. SpringBoot自动装配-Import

    1. 简介 @Import导入的类会被Spring加载到IOC容器中.而@Import提供4中用法: 导入Bean 导入配置类 导入 ImportSelector 实现类.一般用于加载配置文件中的类 ...