目标
掌握 jQuery 高级方法--遍历
掌握 jQuery 开发 Ajax 的方法
掌握 Ajax 开发中后台的数据传输格式--XML、JSON
掌握如何在项目中使用 JSON
1、掌握 jQuery 高级方法--遍历
由于 jQuery 的元素、类别选择器一次可能选中多个标签。
我们可以使用遍历方法循环这些标签。
表格隔行换色;
each(function(i){});
如果想得到其中指定索引位置的元素 $(xx).get(index)
索引从0 开始。
取得其中一个匹配的元素
这能够让你选择一个实际的 DOM 元素并且对他直接操作,
而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
get() 方法返回的是一个 DOM 对象,而不是 jQuery 对象
复选框全选功能;
2、掌握 jQuery 开发 Ajax 的方法
在 jQuery 框架中,提供了简化 Ajax 开发的一系列方法
最根本的方法
返回值:XMLHttpRequest jQuery.ajax([options])
//创建 XMLHttpRequest 对象,跨浏览器的对象
$.ajax();
//调用 open() onreadystatechange send();
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
//原始代码 ,处理乱码
var name = document.getElementById("userName").value;
var url = "ajaxservlet?name="+escape(name); //处理乱码
(1)xmlreq.open("POST","ajaxservlet",true);
//如果用 post 方式提交,定义表单提交
(2)xmlreq.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//提前处理响应内容
(3)xmlreq.onreadystatechange=function update(){
(4)if(xmlreq.readyState==4){
if(xmlreq.status==200){
var msg = xmlreq.responseText;
document.getElementById("message").innerHTML=msg;
}
}
}
//发送请求
(5)xmlreq.send("name="+escape(name));
//后台 Servlet 处理
//后台接受参数
String name = request.getParameter("name");
String changename = new String(name.getByte("ISO-8859-1"),"UTF-8");
//后台返回数据
(6)response.setContextType("text/html; charset=UTF-8");
response.setContextType("text/xml; charset=UTF-8");
response.setContextType("text/script; charset=UTF-8");
response.setContextType("application/json; charset=UTF-8");
contentType
对应代码(2),指请求时设置请求头信息 POST 请求时使用
String(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data
对应代码 (5),指用 POST 发送请求时,传递的参数
Object,String发送到服务器的数据。将自动转换为请求
字符串格式。
GET 请求中将附加在 URL 后。查看 processData 选项说明
以禁止此自动转换。
必须为 Key/Value 格式。
如果为数组,jQuery 将自动为不同值对应同一个名称。
如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
String[] foo = request.getParameters("foo");
dataType String
服务响应内容的类型
预期服务器返回的数据类型。如果不指定,jQuery 将自动
根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,
并作为回调函数参数传递,可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串
3、掌握 Ajax 开发中后台的数据传输格式--XML、JSON
XML 与 JSON 数据格式,一般用于从服务器返回大量数据的情况下。
返回的数据封装在 XML 或 JSON 中,可以在页面中通过对应
的 API 对数据进行解析,从而在页面上显示出这些数据
4、掌握如何在项目中使用 JSON
JSON 是一个字符串,该字符串按照规定 的格式,保存用户
需要的数据
id=1 name=中国 {"id":"1","name":"中国","":""}
"[{"id":"1","name":"中国"},{"id":"2","name":"美国"}]"
[{"id":"1","name":"北京"},{"id":"2","name":"重庆"},{"id":"3","name":"天津"},{"id":"4","name":"上海"},{"id":"5","name":"香港"},{"id":"6","name":"澳门"},{"id":"7","name":"河北"},{"id":"8","name":"山西"},{"id":"9","name":"辽宁"},{"id":"10","name":"吉林"},{"id":"11","name":"黑龙江"},{"id":"12","name":"江苏"},{"id":"13","name":"浙江"},{"id":"14","name":"安徽"},{"id":"15","name":"福建"},{"id":"16","name":"江西"},{"id":"17","name":"山东"},{"id":"18","name":"河南"},{"id":"19","name":"湖北"},{"id":"20","name":"湖南"},{"id":"21","name":"广东"},{"id":"22","name":"广西"},{"id":"23","name":"海南"},{"id":"24","name":"四川"},{"id":"25","name":"贵州"},{"id":"26","name":"云南"},{"id":"27","name":"西藏"},{"id":"28","name":"陕西"},{"id":"29","name":"甘肃"},{"id":"30","name":"青海"},{"id":"31","name":"内蒙古"},{"id":"32","name":"宁夏"},{"id":"33","name":"新疆"},{"id":"34","name":"台湾"},{"id":"35","name":"其它"}]
www.json.org
步骤:
(1)从数据库得到 List 数据
(2)新建 JSONArray 对象,
(3)循环 List ,封装属性到 JSONObject 对象中。
(4)把每个 JSONObject 对象封装在 JSOnArray 中
(5)把 JSONArray 对象转化为字符串对象返回到前台
5、任务
1、用 jQuery 完成用户输入验证:用户名、密码、确认密码、邮箱
2、熟悉 Ajax JSON 的例子、模仿完成对应的例子
jquery+json
最新推荐文章于 2024-10-15 23:56:38 发布