jQuery 中的特殊事件 -- 加载 DOM
在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload方法, 在 jQuery中使用$(document).ready() 方法.
1、ready()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
</head>
<body>
<script type="text/javascript">
/*window.onload=function(){
alert("传统方式加载");
}*/
/*$(document).ready(function(){
alert("jQuery方式");
});*/
/*$(function(){
alert("最简形式");
});*/
</script>
</body>
</html>
2、change()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
</head>
<body>
<select>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<script type="text/javascript">
$("select").first().change(function(){
alert($("option:selected").val());
});
</script>
</body>
</html>
3、unload()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
alert("页面加载时触发");
});
$(window).unload(function(){
alert("页面卸载时触发");
});
</script>
</body>
</html>
4、submit()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ready.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
</head>
<body>
<form action="submit.html" method="post">
<select>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<input type="submit" value="表单提交"/>
</form>
<script type="text/javascript">
$("form").first().submit(function(){
alert("哈哈");
return true;
});
</script>
</body>
</html>
jQuery 中的 Ajax
JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()
load() 方法
load()方法是 jQuery中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是: load(url[, data][,callback])
程序员只需要使用 jQuery选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url做为参数传递给 load() 方法即可
如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的.通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)
传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象和 XMLHttpRequest 对象
方法的返回值是 jQuery
1、load.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>load.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
</head>
<body>
<input type="button" value="基于jQuery的Ajax体验"/>
<hr/>
<span></span>
<script type="text/javascript">
$("input").first().click(function(){
//alert("click");
var url = "/myday33/AjaxServlet?time="+new Date().getTime();
//var sendData = null;这里为null，或者不写为GET()请求
var sendData = {username:'jack' , password:'123456'};//json格式要对，不要加双引号""
$("span").first().load(url,sendData,function(backData,textStatus,xhr){
//alert("load完毕");
alert(backData+" : "+textStatus+":"+xhr.readyState);
});
});
</script>
</body>
</html>
2、servlet
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException,IOException {
System.out.println("doGet");
}
public void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException,IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("用户名:" + username);
System.out.println("密码:" + password);
String tip = null;
if("jack".equals(username) && "123456".equals(password)){
tip = "成功";
}else{
tip = "失败";
}
response.setContentType("text/xml;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write("<root>");
pw.write("<res>");
pw.write(tip);
pw.write("</res>");
pw.write("</root>");
}
}
$.get() (或$.post()) 方法
$.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);
$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等;
textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
方法的返回值:XMLHttpRequest对象
$.get() 和 $.post() 方法是 jQuery 中的全局函数
1、get.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>load.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
</head>
<body>
<input type="button" value="基于jQuery的Ajax体验[get]"/>
<hr/>
<span></span>
<script type="text/javascript">
$("input").first().click(function(){
var url = "/myday33/AjaxServlet?time="+new Date().getTime();
var sendData = {username:"hacket",password:"123456"};
var xhr = $.get(url,sendData,function(backData,textStatus){
window.alert(backData+":"+textStatus);
//var msg = xhr.responseText;
//$("span").first().html("<b>"+msg+"</b>");
});
});
</script>
</body>
</html>
2、AjaxServlet.java
package cn.zengfansheng.jquery.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException,IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("用户名:" + username);
System.out.println("密码:" + password);
String tip = null;
if("hacket".equals(username) && "123456".equals(password)){
tip = "成功";
}else{
tip = "失败";
}
response.setContentType("text/xml;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write("<root>");
pw.write("<res>");
pw.write(tip);
pw.write("</res>");
pw.write("</root>");
}
public void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException,IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("用户名:" + username);
System.out.println("密码:" + password);
String tip = null;
if("hacket".equals(username) && "123456".equals(password)){
tip = "成功";
}else{
tip = "失败";
}
response.setContentType("text/xml;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write("<root>");
pw.write("<res>");
pw.write(tip);
pw.write("</res>");
pw.write("</root>");
}
}
序列化元素
jQuery为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize(). 该方法作用于一个 jQuery对象, 能将 DOM 元素内容序列化为字符串, 用于 Ajax 请求.
1 var xmlHpptReq=$.get("base01.jsp",{username:"aa",psw:“111"}); 2 var xmlHpptReq=$.get("base01.jsp",$("#form1").serialize());
使用 serialize() 方法可以自动完成对参数的 url编码
因为该方法作用于 jQuery对象, 所以不光只要表单能使用, 其它选择器选取的元素也能使用它.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>load.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.6.js"></script>
</head>
<body>
<form id="formID">
用户名：<input type="text" name="username"/><br/>
密码：<input type="password" name="password"/><br/>
</form>
<input type="button" value="基于jQuery的Ajax请求[post]"/>
<hr/>
<span></span>
<script type="text/javascript">
$("input").last().click(function(){
var url = "/day33/AjaxServlet?time="+new Date().getTime();
//var sendData = {username:$("#usernameID").val(),password:$("#passwordID").val()};
var sendData = $("#formID").serialize();
var xhr = $.post(url,sendData,function(){
var xmlDocument = xhr.responseXML;
$("span").first().html($(xmlDocument).find("res").text());
});
});
</script>
</body>
</html>
JQuery 加载并解析 XML
JQuery可以通过 $.get() 或 $.post() 方法来加载 xml.
JQuery解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历
1、html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>load.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.get("test.xml",function(xmlDocument){
alert($(xmlDocument).find("res").text());//ie和firefox不一致
});
});
</script>
</body>
</html>
2、xml
<?xml version="1.0" encoding="UTF-8"?> <root> <res> 成功 </res> </root>
总结：
1 *1 jQuery中常用事件 2 1)特殊事件，在面页加载时执行，无需等候所有的<html>元素加载完毕。 3 4 *2 基于jQuery的Ajax操作 5 1)load(url/sendData/回调函数) 6 如果没有发送参数到服务端，load()方法默认以GET方式发达， 7 如果有发送参数到服务端，load()方法默认以POST方式发达， 8 注意，发送的参数一定要符合json格式，标志是{},[{},{}] 9 2)回调函数有三个方法 10 backData：以HTML字符串的形式服务端返回的数据 11 textStatus：服务端返回的信息“success/error/notmodify/timeout” 12 *xhr：通过他，可以取得xhr.responseXML/xhr.responseText/xhr.readyState/... 13 返回值是jQuery对象 14 3)$.get(url,sendData,回调方法,回传的类型) 15 回调函数有二个方法 16 backData：以HTML字符串的形式服务端返回的数据 17 textStatus：服务端返回的信息“success/error/notmodify/timeout” 18 返回值是XMLHttpRequest对象 19 4)$.post(url,sendData,回调方法,回传的类型) 20 回调函数有二个方法 21 backData：以HTML字符串的形式服务端返回的数据 22 textStatus：服务端返回的信息“success/error/notmodify/timeout” 23 返回值是XMLHttpRequest对象 24 5)使用serialize()能将jQuery对象中的参数自动转成Json格式的字符串参数，注意要为表单元素取一个name属性 25 var sendData = $("#formID").serialize(); 26 27 6)使用jQuery的插件 28 a)将插包导入工程的WebRoot/WebContent目录下 29 b)写一个html或jsp页面，导入jquery核心包，导入插件相关的js和css文件 30 c)在页面加载时触发事件$(document).ready(function)({....}) 31