jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法：

作用于一个jQuery对象，它能够将DOM元素内容序列化为字符串，用于Ajax请求。

<!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教程(29)-jQuery插件开发之为插件方法指定参数

jQuery教程(27)-jQueryajax操作之修改默认选项

jQuery教程(26)-ajax操作之使用JSONP加载远程数据

锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">&l

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../

锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法

load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.get()方法使用GET方式来进行异步请求.结构为:$.get(url [, data] [, callback] [, type]) $.get()方法参数解释如下: 参数名称类型说明 url String 请求的HTML页的URL地址 data(可选) Obj

锋利的jQuery读书笔记---jQuery中Ajax--load方法

第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="Ajax提交" onclick="Ajax();&qu

锋利的jQuery读书笔记---jQuery中操作DOM

一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点查找元素节点查找属性节点创建节点创建元素节点创建文本节点创建属性节点插入节点插入节点的方法方法描述示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码:$("p").append("<b>你好</b>"

锋利的jQuery读书笔记---jQuery中动画

jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">

jQuery中多个元素的Hover事件

1.需求简介 2.示例研究 3.解决方案 1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求. 不过,有些时候我们希望当鼠标进入两个或多个元素“组合的区域”时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件.例如两个元素紧挨着的HTML元素,如下图: 当鼠标进入二者的“组合区”域

jQuery学习笔记——jQuery基础核心

代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

jQuery学习笔记——jQuery常规选择器

一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

jQuery教程(29)-jQuery插件开发之为插件方法指定参数

jQuery教程(28)-jQuery插件开发之使用插件

jQuery教程(27)-jQueryajax操作之修改默认选项

jQuery教程(26)-ajax操作之使用JSONP加载远程数据

jQuery教程(25)-ajax操作之安全限制