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

矫情吗；* 2022-08-06 11:24 153阅读 0赞

serialize()方法：

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

![复制代码][copycode.gif]

<!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>

![复制代码][copycode.gif]

Ajax全局事件：

<table style="margin:0px; padding:0px; border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(0,0,0); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:19.5px; height:110px; width:487px; background-color:rgb(254,254,242)"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 方法名称</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 说明</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ajaxComplete(callback)</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Ajax请求完成时执行的函数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ajaxError(callback)</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ajaxSend(callback)</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Ajax请求发送前执行的函数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ajaxSuccess(callback)</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Ajax请求成功时执行的函数</td> 
  </tr> 
 </tbody> 
</table>

**其他精彩文章**

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

## [jQuery教程(28)-jQuery插件开发之使用插件][jQuery_28_-jQuery] ##

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

## [jQuery教程(26)-ajax操作之使用JSONP加载远程数据][jQuery_26_-ajax_JSONP] ##

## [jQuery教程(25)-ajax操作之安全限制][jQuery_25_-ajax] ##

[copycode.gif]: /images/20220806/3c4a041d05e1432bb1518b6c31a535c0.png
[jQuery_29_-jQuery]: http://www.itmmd.com/201501/519.html
[jQuery_28_-jQuery]: http://www.itmmd.com/201501/518.html
[jQuery_27_-jQueryajax]: http://www.itmmd.com/201501/515.html
[jQuery_26_-ajax_JSONP]: http://www.itmmd.com/201501/512.html
[jQuery_25_-ajax]: http://www.itmmd.com/201501/511.html