Jquery ajax各种用法说明详解

JQuery

1个成员

Jquery ajax各种用法说明详解

发表于 2017-01-25 • 3411 次查看

在jquery中ajax最常用的几种有$.ajax、$("#id").load、$.getScript、JSON格式数据这四种了使用它们都是无刷新返回数据，但是细节上会有所不同，下面我来介绍介绍。

Jquery异步加载一个页面是如此简单：

jQuery AJAX 请求

请求描述

$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件

(url) 被加载的数据的 URL（地址）

(data) 发送到服务器的数据的键/值对象

(callback) 当数据被加载时，所执行的函数

(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 请求的所有键/值对选项

代码如下

复制代码

$.ajax({ url: "/testl/index.html", cache: false, success: function(html){

$("#test").append(html);

}

});

或者更简单的：

代码如下	复制代码
$("#test").load("/test/index.html");

以 POST 形式发送附加参数并在成功时显示信息。

jQuery 代码：

代码如下	复制代码
$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });

载入并执行一个 JavaScript 文件:加载并执行 test.js ，成功后显示信息。

jQuery 代码:

代码如下	复制代码
$.getScript("test.js", function(){ alert("Script loaded and executed.");});

jquery json代码

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。JSON在前后台交互的过程中发挥着相当出色的作用。本人很讨厌XML的那种复杂的数据结构，呵呵~~其实自己也没对XML进行过很深的研究，只是觉得用js操作XML一点都没操作json来得方便。

DEMO看完了吧？那么接下来看教程吧！

代码如下

复制代码

XHML
<DIV style="Z-INDEX: 10; POSITION: absolute; DISPLAY: none" id=ajax_image>
<IMG border=0 src="images/ajax-loading.gif">
</DIV>
<DIV id=box>
<H3>Jquery/Ajax/JSON/PHP操作完全实例</H3>
<SELECT id=letter> <OPTION selected value="">请选择首字母</OPTION> <OPTION value=A>A</OPTION> <OPTION value=B>B</OPTION> <OPTION value=C>C</OPTION> <OPTION value=D>D</OPTION> <OPTION value=E>E</OPTION> <OPTION value=F>F</OPTION> <OPTION value=G>G</OPTION> <OPTION value=H>H</OPTION> <OPTION value=I>I</OPTION> <OPTION value=J>J</OPTION> <OPTION value=K>K</OPTION> <OPTION value=L>L</OPTION> <OPTION value=M>M</OPTION> <OPTION value=N>N</OPTION> <OPTION value=X>X</OPTION></SELECT>
<SELECT id=server> <OPTION selected value="">等待你选择首字母</OPTION></SELECT>
</DIV>

实例中，我加两个下拉菜单分别给了两个不同的ID，第一个#letter(代表首字母的下拉菜单),第二个#server(代表魔兽服务器的下拉菜单),我想要的效果是当选择第一个下拉菜单的时候，第二个下拉菜单首先会变成“请稍等…正在加载数据”，还有同时会出现一个ajax-loading的图片，然后第二个下拉菜单会出来魔兽的服务器信息，是根据首字母来取得的。

JS代码

代码如下

复制代码

$(function(){
    $('#letter').change(function(){
        var $letter_select = $(this);//选择首字母下拉菜单的jquery对象
        var $server_select = $('#server');//服务器的下拉菜单的jquery对象
        if ($letter_select.val() == ""){//如果下单菜单选择了初始的“请选择首字母”的选项
            $server_select.empty().append("
<OPTION value="">等待你选择首字母</OPTION>

");
            return false;
        }
        $server_select.empty().append("
<OPTION value="">请稍等...正在加载数据</OPTION>

");//将server的下拉菜单清空并且加入一个“请稍等...正在加载数据”的项目
        var $tips = $('#ajax_image');//这个是ajax图片的jquery对象
        var $position = $letter_select.offset();//取得当前操作的位置
        $tips.css("top",$position.top).css("left",$position.left).show();//将ajax-loading的图片移动到当前操作的位置，并且让这个图片显示出来
        $.getJSON('jquery_ajax_json_php/search_server.html?letter=' + $letter_select.val(),function(json){
            if(json.length == 0){//没有从数据库中找到数据
                $server_select.empty().append("
<OPTION value="">不好意思，没有找到数据</OPTION>

")
            }else{//成功获取数据
                $server_select.empty();//将server的下拉菜单清空
                $.each(json,function(index,entry){//利用each方法，遍历json数组 index代表序号0,1,2... entry代表结果对象
                    $server_select.append("
<OPTION value='"+ entry.id +"'>"+entry.name+"</OPTION>

");//将取得的数据逐条插入到server的下拉菜单中
                });
            }
            $tips.hide();//隐藏ajax-loading图片
        })
    })
});

这里我给首字母的下拉菜单绑定了一个onchange的事件，ajax的方法是用的jquery的getJSON的方法。代码里面已经有了注视了，我就不多说了。

PHP代码

代码如下

复制代码

function search_server(){
    //取得参数
    $letter = $this->input->get('letter');
    //查询数据
    $server_list = $this->db->from('wow_server')->like('name',$letter,'after')->get();
    $return_result = array();
    if ($server_list->num_rows() > 0){
        foreach($server_list->result() as $server_obj){//将取得的结果压成二维数组
            $return_result[] = array(
                'id'    => $server_obj->id,
                'name' => $server_obj->name
            );
        }
    }
    sleep(1);//让程序等待1秒，然后再返回数据
    echo json_encode($return_result);
}

最后附上用到的表信息

代码如下	复制代码
CREATE TABLE `ci_wow_server` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(64) NOT NULL DEFAULT '', PRIMARY KEY (`id`), KEY `idx_products_options_values_name_zen` (`name`) ) ENGINE=MyISAM AUTO_INCREMENT=1163 DEFAULT CHARSET=utf8

Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数描述

jQuery.ajax() 执行异步 HTTP (Ajax) 请求。
.ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend() 在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup() 设置将来的 Ajax 请求的默认值。
.ajaxStart() 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop() 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess() 当 Ajax 请求成功完成时显示一条消息。
jQuery.get() 使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript() 使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load() 从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param() 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post() 使用 HTTP POST 请求从服务器加载数据。
.serialize() 将表单内容序列化为字符串。
.serializeArray() 序列化表单元素，返回 JSON 数据结构数据。