• jQuery类库新手使用指南之AJAX方法 第二部分


    继续昨天的AJAX方法,今天我们将介绍另外几种常用AJAX请求方法:

    使用$.post()方法来创建POST请求

    和$.get() 方法类似,$.post()可以帮助你创建HTTP的POST请求。它的语法和$.get()方法非常类似,唯一的区别就在于POST使用HTTP POST方法来传递。如果你不清楚HTTP POST和GET的区别,简单来说,GET传递过程中的参数会直接附在URL上,并且发送的参数数据长度有限制。而POST则没有这些限制,比较典型的使 用,例如,如果你使用表单开发登录窗口的话,最好使用POST,因为使用GET会泄露你的密码。

    $.post()的使用如下:

    $.post( "http://gbin1.com/index.jsp", gbdata, myCallback, "json" ); 

    在前一篇文章中的演示,我们也可以使用$.post()方法来实现,如下:

    在线演示

    在上面我已经提到过,GET发送的数据长度有限制,所以,如果你需要发送很多的表单数据,$.post()方法就是你需要使用的方法。

    使用load()方法来加载页面

    使用JQuery的load()方法可以很容易的从服务器取得HTML的标签并且方便的插入当前的页面。如果你只是想加载页面内容到当前的页面,那么load()就是你需要使用的AJAX方法。

    $('#gbElement').load("http://www.gbin1.com/portfolio/lastest.html");

    以上代码中,我们将加载http://www.gbin1.com/portfolio/lastest.html页面,并且将它的内容插入当前页面的id=gbElement元素中。

    是不是很简单?同时load方法也支持参数,如下:

    var gbdata={category:"jquery"}; 
    $('#gbElement').load("http://www.gbin1.com/portfolio/lastest.html", gbdata);

    以下是一个完整的load方法例子:

    <html lang="en">
    <head>
    <title>Load GBin1 latest posts</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
    $( function() {
    $('#load').click( function() {
    var data = { category: "root" };
    $('#latest').load( "http://www.gbin1.com/portfolio/lastest.html", data );
    } );
    } );
    </script>
    </head>
    <body>
    <button id="load">Load latest Post</button>
    <div id="latest"></div>
    </body>
    </html>


    在线演示

    以上代码中,我们实现了如下功能:

    1.  页面中包含了一个按钮和div层,这个div层用来显示加载的页面标签
    2. 当按钮被点击后,将会加载gbin1最近的文章
    3. 这里我们向url传递了参数category
    4. 最后jQuery生成一个AJAX请求。并且将返回的页面内容插入id=”lastest"这个div中。

    load方法同样也包含一个callback方法,如果你需要加载后执行操作,你可以调用这个回调方法。

    同时,load方法还允许你只加载一个页面中的片段,也就是加载页面中的一个部分,比如,只加载页面中的id=“content“的div。那么你可以如下书写代码:

    $('#gbElement').load("http://www.gbin1.com/portfolio/lastest.html #content");

    使用这个方法的好处在于你不需要加载整个页面,你可以只加载部分页面内容,这样不会打扰用户阅读,同时也方便你在当前页面中显示类似”加载中“的字样儿,提示用户正在加载页面。

    使用$.getJSON()来取得JSON数据

    这个方法可以非常方便的帮助你从服务器请求JSON数据。相当于使用$.get()方法并且数据格式参数为"JSON"。

    我们可以使用这个方法调用如下:

    $('#showinfo').click( function() {
    var data = { site: "GBin1.com", date: "20120318" };
    $.getJSON( "siteinfo.txt", data, success );
    } );

    大家可以看到,这个例子中使用的方法和以下$.get()非常相似,除了不需要指定数据参数格式

    $('#showinfo').click( function() {
      var data = { site: "GBin1.com", date: "20120318" };
      $.get( "siteinfo.txt", data, success, "json" );
    } );

    在线演示

    使用$.getScript()方法来取得和运行Javascript代码

    和$.getJSON()方法类似,$.getScript()是用来取得并且执行javascript脚本的简便方法。它和$.get()方法中设置数据参数为script一样。包含两个参数:

    • javascript的URL
    • 一个可选的回调函数用来帮助你在加载完script后执行特定的功能

    这个方法对于动态的加载javascript类库非常有效,你可以在某些页面中需要调用某些js,而其它页面则不需要,通过调用这个方法,能够帮助你减少请求服务器的加载文件的次数,有效提高页面加载速度。

    这里我们使用这个例子,我们将显示网站信息的代码封装到一个js中,如下:

    function showsite( siteData ) {
      var result = "<li>Site Name:" + siteData.site + "</li>";
            result += "<li>Creation Date:" + siteData.date + "</li>";
            result += "<li>Site tag: "  + siteData.tag + "</li>";
            result += "<li>Site pages: "  + siteData.pages + "</li>";
      $("#result").html(result);
    }

    然后我们修改showSiteInfo.html,通过$.getScripts()来调用,如下:

    <!doctype html>
    <html lang="en">
    <head>
    <title>Site Info Demo for jQuery $.get()</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style>
    #container{
    padding: 100px;
    font-size: 12px;
    font-family: arial;
    }
    #result{
    padding: 10px 0;
    }
    #result li{
    padding: 10px 0;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
    $( function() {
    $.getScript( "showsite.js", function() {
    $('#showinfo').click( function() {
    var data = { site: "GBin1.com", date: "20120318" };
    $.get( "siteinfo.txt", data, showsite, "json" );
    } );
    } );
    } );
    </script>
    </head>
    <body>
    <div id="container">
    <button id="showinfo">show info</button>
    <ul id="result"></ul>
    </body>
    </div>
    </html>

    在线演示

    以上代码中,我们首先调用$.getScript()方法来加载和运行showsite.js,然后在get方法中调用这个回调函数。通过这个方法来将内容显示到对应的元素中。

    注意$.getScript()方法添加了一个随机的时间戳参数到字符串查询中,例如:?_=1330395371668来防止浏览器缓存javascript。

  • 相关阅读:
    fork 开源项目后如何参与项目
    C51 头文件中的 extern
    windows常用命令
    boost(barrier)
    boost库(条件变量)
    线程间同步的几种方式(了解)
    stl 迭代器(了解)
    std::thread
    同步,异步,阻塞,非阻塞
    std::thread join和detach区别
  • 原文地址:https://www.cnblogs.com/gbin1/p/2405802.html
Copyright © 2020-2023  润新知