学习Ajax—入门篇03

最新推荐文章于 2024-07-25 10:06:21 发布

J-Jian

最新推荐文章于 2024-07-25 10:06:21 发布

阅读量316

点赞数

分类专栏： Ajax 文章标签： ajax jquery xmlhttprequest

本文链接：https://blog.csdn.net/Mynewclass/article/details/78842401

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JQuery很好地封装了ajax的方法，今天就学习了ajax主要的几种常用的方法。

1、ajax()方法

ajax()方法返回的是XMLHttpRequest对象。
语法为：

xmlhttp = $.ajax({url:xxxx/xxxx/xxx,async:false})

简单例子：

<script>
$(document).ready(function(){
  $("#button").click(function(){
    //ajax()方法同步获得XMLHttpRequest对象
    htmlobj = $.ajax({url:"test_ajax.txt",async:false});
    $("#div").html(htmlobj.responseText);
  });
});
</script>

结果为：
这里写图片描述

2、ajaxStart()方法与ajaxComplete()方法

ajaxStart()：ajax请求开始之前执行function
ajaxComplete()：ajax请求之后执行funciton

语法为：

$(selector).ajaxStart(function(){...});
$(selector).ajaxComplete(function(){...});

简单例子：用ajaxStart与ajaxComplete方法显示ajax请求过程中“正在加载中”的图片。

JQuery部分：

<script>
$(document).ready(function(){
     $("#div").ajaxStart(function(){
        //alert("ajax请求开始");
        //开始请求之前显示加载图像div
        $("#wait").css("display","block");
    });
     $("#div").ajaxComplete(function(){
         //alert("ajax请求结束");
         //请求结束之后，不显示加载中图像的div
        $("#wait").css("display","none");
    });
    $("button").click(function(){
        //向id=div的标签进行ajax请求，返回数据匹配到div
        $("#div").load("test_start_complete.txt");
    });
});
</script>

html部分：

<body>
<div id="div"><h2>Ajax 的ajaxStart方法与ajaxComplete</h2></div>
<button>Change</button>
<div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
<img src='static/image/wait.gif' width="64" height="64" />
<br/>&nbsp加载中...
</div>
</body>

结果为：
点击change按钮后，显示加载中图片

这里写图片描述

请求完毕后，加载中图片消失
这里写图片描述

3、ajaxError与ajaxSuccess方法

ajaxError方法：ajax请求发生错误时候执行函数funciton。
ajaxSuccess方法：最后一个ajax请求成功时候执行函数funciton。

语法：

$("div").ajaxError(function(){
  alert("ajax请求过程中发生错误！");
});

$("div").ajaxSuccess(function(){
  alert("ajax请求已成功完成");
});

4、关于ajax序列化的三个方法

序列化：序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程。以某种形式使自定义对象持久化，将对象从一个地方传递到另一个地方，使程序更具有维护性。

$.param()：创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用（即xxxx=aa&xxxx=bb的形式）。
$(selector).serialize()：将表单内容序列化为字符串（即xxxx=aa&xxxx=bb的形式）。
$(selector).serializeArray()：序列化表单元素，返回 JSON 数据结构数据(即name:value形式)。

（1）$.param( )方法：

<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
    //1、数组序列化
    var user = { username:690034540, password:123 };

    //2、对象序列化
    personObj=new Object();
    personObj.name="Lijian";
    personObj.sex="Boy";
    personObj.age=22;
    $("button").click(function(){
      $("#div").text($.param(personObj));
      $("#results").text($.param(user));
      });
    });
</script>
</head>
<body>
<div id="div"><h2>Ajax 的$.param()方法序列化对象</h2></div>
<div id="results"><h2>Ajax 的$.param()方法序列化数组</h2></div>
<button>Change</button>
</div>
</body>

结果为：
这里写图片描述

（2）$(selector).serialize()方法
serialize() 方法通过序列化表单（可以是input、文本框、form等）值，创建 URL 编码文本字符串。必须有name属性才能将name对应的value一起序列化
代码为：

<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div").text($("form").serialize()); 
    });
});
</script>
</head>
<body>
<form action="">
username: <input type="text" name="username" value="Jian0110" /><br />
password: <input type="text" name="password" value="123" /><br />
</form>
<div id="div"><h2>序列化结果</h2></div>
<button>序列化</button>
</div>
</body>

结果为：
这里写图片描述

（3）$(selector).serializeArray()方法
例子代码：将form表中有name的属性序列化数组形式。

<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var data = $("form").serializeArray();
        //each(data,fucntion(index,list))遍历数组
        $.each(data,function(i,field){
        $("#div").append(field.name+":"+field.value+" ");  
        })
    });
});
</script>
</head>
<body>
<form action="">
username: <input type="text" name="username" value="Jian0110" /><br />
password: <input type="text" name="password" value="123" /><br />
code: <input type="text" name="code" value="4567" /><br />
</form>
<div id="div"><h2>serializeArray序列化结果：</h2></div>
<button>序列化</button>
</div>
</body>

其中：$.each()通常是用来是遍历数组的，其语法为

$.each(data,fucntion(index,list))

data：为数组数据
index：为数组索引
list：序列化封装好的集合，用list.name，list.value获取form表单序列

结果为：
这里写图片描述

5、关于get的三个ajax方法

$.get()方法：使用 HTTP GET 请求从服务器加载数据。
$.getJSON()方法：使用 HTTP GET 请求从服务器加载 JSON 编码数据。
$.getScript()方法：使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。

（1）$.get()方法
简单的 $.get()方法可以取代复杂的$ .ajax()方法，请求成功后调用回调函数。
其语法为：

$(selector).get(url,data,function(response,status,xhr),dataType)

其中funciton是请求成功后回调的函数。具体的例子在02篇已经实现。
其实可以等价于$.ajax()方法

$.ajax({
  url: url,
  data: data,
  success: success, //这里可以是回调函数
  dataType: dataType
});

（2）$.getJSON()方法
ajax请求获取JSON数据：
test.js中json的内容为：

[{"name":"Zhangsan", "age":"21"},
 {"name":"Lisi", "age":"22"}]

jQuery部分：

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("test.js",function(result){
            $.each(result, function(i, field){
                $("div").append(field + " ");
            });
        });
    });
});

等价于下列$.ajax()

$(document).ready(function() {
        $("button").click(function() {
            $.ajax({
                url : "test.js",
                dataType : "json",
                success : function(result) {
                    $.each(result, function(i, filed){
                    $("p").append(filed.name + ":" + filed.age + " ");
                });
                },
                error : function() {
                    alert("获取数据失败");
                }
            });
        });
    });

结果为：

这里写图片描述

（3）$.getScript()方法
使用ajax请求，获取和运行Javascript文件。

test_script.js部分：

//运行js文件
alert("我是test_script.js文件");
//获取myScript变量数据
var  myScript = "I'm Lijian!";

jQuery部分：

<script>
$(document).ready(function(){
    $("button").click(function(){
        $.getScript("test_script.js",function(result){
            alert(""+myScript);
        });
    });
});
</script>

html部分：

<body>
<div id="div"><h2>getScript运行js文件并获得数据</h2></div>
<p></p>
<button>getScript</button>
</div>
</body>

结果为：

这里写图片描述
获得js文件中的数据myScript变量

运行了js文件中的alert语句

参考资料：JQuery 参考手册 - Ajax

J-Jian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习Ajax—入门篇03

JQuery很好地封装了ajax的方法，今天就学习了ajax主要的几种常用的方法。1、ajax()方法ajax()方法返回的是XMLHttpRequest对象。语法为：xmlhttp = $.ajax({url:xxxx/xxxx/xxx,async:false}) 简单例子：<script>$(document).ready(function(){ $("#button").click(
复制链接

扫一扫

专栏目录