学习Ajax—入门篇03

2017-12-20 19:05:22来源:CSDN作者:Mynewclass人点击

分享

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

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台