歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> 鋒利的jQuery讀書筆記---jQuery中Ajax--序列化元素、Ajax全局事件

鋒利的jQuery讀書筆記---jQuery中Ajax--序列化元素、Ajax全局事件

日期:2017/3/1 9:18:07   编辑:Linux編程

serialize()方法:
作用於一個jQuery對象,它能夠將DOM元素內容序列化為字符串,用於Ajax請求。

鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<title></title>
</head>
<body>

<form id="form1" action="#">
<p>評論:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>內容: <textarea name="content" id="content" rows="2" cols="20"></textarea> </p>
<p><input type="button" id="send" value="提交"></p>
</form>

<div class="comment">已有評論:</div>
<div id="resText"></div>

</body>

<script type="text/javascript">
$(function () {
$("#send").click(function () {

//這種方式在只有少量的字段的表單中,勉強還可以使用,但如果表單元素越來越復雜,使用這種方式在增大工作量的同時
//也使表單缺乏彈性。jQuery為這一常用操作提供了一個簡化的方法----serialize()
// $.get("get1.jsp", {
// username: encodeURI($("#username").val()),
// content: encodeURI($("#content").val())
// }, function (data, textStatus) {
// $("#resText").html(decodeURI(data));
// });

//serialize()方法作用於一個jQuery對象,它能夠將DOM元素內容序列化為字符串,用於Ajax請求。
$.get("get1.jsp", $("#form1").serialize(), function (data, textStatus) {
$("#resText").html(data);
})

});


/**
* 因為serialize()方法作用於jQuery對象,所以不光只有表單能使用它,其他選擇器選取的元素也都能使用它,如以下jQuery代碼:
* $(":checkbox,:radio").serialize();
* 把復選框和單選框的值序列化為字符串形式,只會將選中的值序列化
*
*
* serializeArray()方法
* 該方法不是返回字符串,而是將DOM元素序列化後,返回JSON格式的數據。
*
*
* $.param()方法。它是serialize()方法的核心,用來對一個數組或對象按照key/value進行序列化。
*
* 例如:
* var obj = {a:1, b:2, c:3};
* var k = $.param(obj);
* alert(k);//輸出a=1&b=2&c=3
*
* */


})

</script>

</html>

Ajax全局事件:

方法名稱 說明 ajaxComplete(callback) Ajax請求完成時執行的函數 ajaxError(callback) Ajax請求發生錯誤時執行的函數,捕捉到的錯誤可以作為最後一個參數傳遞 ajaxSend(callback) Ajax請求發送前執行的函數 ajaxSuccess(callback) Ajax請求成功時執行的函數

jQuery權威指南 PDF版中文+配套源代碼 http://www.linuxidc.com/Linux/2013-10/91059.htm

jQuery實戰 中文PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90631.htm

《jQuery即學即用(雙色)》 PDF+源代碼 http://www.linuxidc.com/Linux/2013-09/90383.htm

鋒利的jQuery(第2版) 完整版PDF+源碼 http://www.linuxidc.com/Linux/2013-10/91527.htm

jQuery完成帶復選框的表格行高亮顯示 http://www.linuxidc.com/Linux/2013-08/89406.htm

jQuery基礎教程(第4版) PDF 完整高清版+配套源碼 http://www.linuxidc.com/Linux/2014-03/98162.htm

--------------------------------------分割線 --------------------------------------

jQuery 的詳細介紹:請點這裡
jQuery 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved