第六章（jQuery 与 Ajax 的应用）（6.6 序列化元素 6.7 jQuery 中的 Ajax 事件）-白红宇

第六章（jQuery 与 Ajax 的应用）（6.6 序列化元素 6.7 jQuery 中的 Ajax 事件）

阅读量：5165 次

发布时间：2019-06-13

本文共 2480 字，大约阅读时间需要 8 分钟。

6.6 序列化元素

1 serialize() 方法

前例在讲解 $.get() 和 $.post() 方法时，表单的HTML如下：

在进行编译之前。先写好 get.php 文件，并放在根目录


     {
   $_REQUEST['username']}:
{
   $_REQUEST['content']}
";?>

$(function(){        $("#send").click(function(){            $.get("get1.php",{                username : $("#username").val(),                content  : $("#content").val()            },function(data, textStatus){                $("#resText").html(data);    //将返回的数据添加到页面上            })        })    })

上述方法只适用于少量字段的表单，如果表单复杂的话，使用这种方式在增大工作量的同时也使表格缺乏弹性，jQuery 提供另一个简化方法 ----- serialize() 。能够将 DOM 元素内容序列化为字符串，用于 Ajax请求。（上例可修改为：）

$(function(){       $("#send").click(function(){            $.get("get1.php", $("#form1").serialize() , function (data, textStatus){                        $("#resText").html(data); // 把返回的数据添加到页面上                    }            );       })    })

♣ $.get() 方法中 data 参数不仅可以使用映射方式

{   username : $("#username").val(),   content     : $("#content").val()        }

还可以使用字符串方式

“username=”+encodeURIComponent($('#username').val() )+"&content="+encodeURIComponent($('#content'),val() )

复选框和单选框都可以使用 serialize() 方法将值转化为字符串形式，只会将选中的值序列化。

$(":checkbox,:radio").serialize();

    
         Document            篮球
    足球
    乒乓球
    羽毛球
    篮球
    足球
    乒乓球
    羽毛球

点击会弹出已选中的项

2 serializeArray() 方法

该方法与 serialize() 类似，该方法不是返回字符串，而是将 DOM 元素序列化后，返回 JSON 格式数据

3 $.param() 方法

它是 serialize() 方法的核心，用来对一个数组或者对象按照 key/value 进行序列化。

下例将一个普通的对象序列化：

    
         Document

6.7 jQuery 中的 Ajax 全局事件

jQuery 简化 Ajax 操作不仅体现在调用 Ajax 方法和处理响应方面，而且还体现在对调用 Ajax 方法的过程中的 HTTP 请求的控制，通过 jQ 提供了一些自定义全局函数，能够为各种与 Ajax 相关的事件注册回调函数。例如当 Ajax 请求开始时，会触发 ajaxStar() 方法的回调函数，当 Ajax 结束时，会触发 ajaxStop() 方法的回调函数，这些方法都是全局方法，因此无论创建它们的代码位于何处，只要有 ajax 请求发生，就会触发它们。

比如某页面图片加载比较慢，如果在加载过程中，不给用户提示一些反馈信息，很容易让客户失去耐心。此时，需要为网页添加一个提示信息，常用的提示信息为：“加载中......”


     
      加载中...
     
     #loading{    width:80px;    height: 20px;    background:#bbb;    color:#000;    display:none;}

♠ jQuery 的 Ajax 全局事件中还有几个方法，也可以带来方便

方法名称	说明
ajaxComplete(callback)	Ajax请求完成时执行的函数
ajaxError(callback)	Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback)	Ajax请求发送前执行的函数
ajaxSuccess(callback)	Ajax请求成功时执行的函数

♥ 如果想使某个 Ajax 请求不受全局方法的影响，那么可以在使用 $.ajax(options)方法时，将参数中的 global 设置为 false 。

$.ajax({    url : "text.html",    global : false   //不触发全局 Ajax 事件 })

转载于:https://www.cnblogs.com/cimuly/p/7226473.html

你可能感兴趣的文章

{ $_REQUEST['username']}:

{
$_REQUEST['username']}: