专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > jQuery

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

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
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教程(28)-jQuery插件开发之使用插件

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

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

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


友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

  • jQuery搜索框输入文字下拉揭示菜单

    jQuery搜索框输入文字下拉提示菜单 jQuery搜索框输入文字下拉提示菜单 原文地址: http://www.jq22.com/jquery-info6193 ...

  • 7个替开发者准备的有用的jQuery技巧

    7个为开发者准备的有用的jQuery技巧 一、在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: $(document).ready(fu...

  • jQuery获取呼应Input例子

    jQuery获取相应Input例子 页面上有许多input框,使用的是EasyUI样式,中间还参杂着各种其他无id的Input框,如下: <input class=...

  • webpack 引出jquery和第三方jquery插件

    webpack 引入jquery和第三方jquery插件 1、引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可。 index....

  • JQuery的开发与使用经验

    JQuery的开发与使用心得 关于jQuery的 入门使用jQuery可以很容易或具有挑战性的,这取决于你如何使用JavaScript,HTML,CSS进行开发和...

  • 深入学习jQuery卡通片控制

    深入学习jQuery动画控制 &times; 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话   jQuery动画可以使用fade、...

  • jquery操作table报表

    jquery操作table表格 一、数据准备 <table id="table1"> <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>...

  • html + css + jquery实现简略的进度条实例

    html + css + jquery实现简单的进度条实例 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq...

  • jquery中ajax方法的datatype的功用

    jquery中ajax方法的datatype的作用 今天在维护一个项目的时候遇见了一个小问题。但是这个问题我认为对于项目十分有帮助。...

  • jQuery菜单示范(全选,反选,取消)

    jQuery菜单示例(全选,反选,取消) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl...

热门推荐: