怎么戒网赌一有钱就想玩怎么办

書名： 15天學(xué)會(huì)jQuery編程與實(shí)戰(zhàn)（視頻教學(xué)版）（Web前端技術(shù)叢書）
作者名：劉鑫
本章字?jǐn)?shù)： 560字
更新時(shí)間： 2020-11-28 16:21:46

3.6 利用Ajax實(shí)現(xiàn)網(wǎng)頁(yè)的get請(qǐng)求

Ajax的全稱是Asynchronous JavaScript and XML（異步的JavaScript和XML）。Ajax不是一種新的計(jì)算機(jī)語(yǔ)言，而是幾種現(xiàn)有技術(shù)的全新組合和應(yīng)用。利用Ajax可以實(shí)現(xiàn)瀏覽器與服務(wù)器端完美的數(shù)據(jù)通信，而這些數(shù)據(jù)通信無須基于網(wǎng)頁(yè)重新加載。簡(jiǎn)單來說，Ajax就是XMLHttpRequest、JavaScript、XML、CSS和HTML技術(shù)的組合。

jQuery提供了對(duì)Ajax很好的支持，使用者無須關(guān)心Ajax的核心對(duì)象或?qū)崿F(xiàn)機(jī)制，只需要使用$.get()或$.post()就能很方便地操作。

$.get()的語(yǔ)法為：

$.get( url [, data ] [, success ] [, dataType ] )

data參數(shù)返回的可以是string字符串、json對(duì)象或JavaScript代碼。下面演示一個(gè)例子，用戶請(qǐng)求某個(gè)文件信息，服務(wù)器返回該文件內(nèi)容。

【示例3-7】get-ajax.html

        01    <! DOCTYPE HTML>
        02    <html>
        03    <head>
        04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        05    <title>$.get()</title>
        06    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
        07    <script type="text/javascript">
        08        function sendAjax() {
        09             $.get("data.txt", function(data){//指定url和回調(diào)函數(shù)
        10               alert(data);  //展示返回結(jié)果
        11               }, "text");
        12       }
        13    </script>
        14    </head>
        15    <body style="text-align:center">
        16        <input type="button" value="獲取數(shù)據(jù)" onclick="sendAjax(); "/>
        17    </body>
        18    </html>

本示例的運(yùn)行效果如圖3.8所示。這里讀者要注意，data.txt必須是UTF-8格式，和HTML格式一致。第11行指定dataType參數(shù)為text，不然本示例只能在IE下運(yùn)行。

圖3.8 $.get()效果

$.get()方法其實(shí)是$.ajax()的簡(jiǎn)寫形式。當(dāng)獲取數(shù)據(jù)成功或失敗時(shí)需要指定不同的方式，就需要用$.ajax()的完整形式，語(yǔ)法如下：

        $.ajax({
          url: url,
          data: data,
          success: success,
          error:error,
          dataType: dataType
        });

下面更改前面的示例，為獲取數(shù)據(jù)參考成功和失敗的方法。

【示例3-8】get-ajax1.html

        01    <! DOCTYPE HTML>
        02    <html>
        03    <head>
        04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        05    <title>$.ajax()</title>
        06    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
        07    <script type="text/javascript">
        08        function sendAjax() {
        09             $.ajax({
        10             url:"data.txt",
        11             dataType: 'text',
        12             success:function(data, status){
        13               alert("結(jié)果："+data);
        14               alert("狀態(tài)："+status);
        15             },
        16             error:function(req, status, error){
        17               alert("狀態(tài)："+status);
        18               alert("錯(cuò)誤："+error);
        19             }});
        20        }
        21    </script>
        22    </head>
        23    <body style="text-align:center">
        24        <input type="button" value="獲取數(shù)據(jù)" onclick="sendAjax(); "/>
        25    </body>
        26    </html>

第09～19行使用標(biāo)準(zhǔn)的$.ajax()獲取data.txt的值，并輸出是否成功的狀態(tài)信息。本示例的效果如圖3.9所示。

圖3.9 $.ajax()效果

官术网_书友最值得收藏!

15天學(xué)會(huì)jQuery編程與實(shí)戰(zhàn)（視頻教學(xué)版） （Web前端技術(shù)叢書）

3.6 利用Ajax實(shí)現(xiàn)網(wǎng)頁(yè)的get請(qǐng)求

15天學(xué)會(huì)jQuery編程與實(shí)戰(zhàn)（視頻教學(xué)版）（Web前端技術(shù)叢書）