Javascript-- jQuery Ajax應用

來源:互聯網
上載者:User

標籤:success   callback   dex   功能   javascrip   非同步請求   script   logs   var   

使用ajax()方法載入伺服器資料

使用ajax()方法是最底層、功能最強大的請求伺服器資料的方法,它不僅可以擷取伺服器返回的資料,還能向伺服器發送請求並傳遞數值,它的調用格式如下:

jQuery.ajax([settings])$.ajax([settings])

其中參數settings為發送ajax請求時的設定物件,在該對象中,

url表示伺服器請求的路徑,

data為請求時傳遞的資料,

dataType為伺服器返回的資料類型,

success為請求成功的執行的回呼函數,

type為發送資料請求的方式,預設為get。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <title>使用ajax()方法載入伺服器資料</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <link href="style.css" rel="stylesheet" type="text/css" />    </head>        <body>        <div id="divtest">            <div class="title">                <span class="fl">檢測數位奇偶性</span>                 <span class="fr">                    <input id="btnCheck" type="button" value="檢測" />                </span>            </div>            <ul>               <li>請求輸入一個數字                    <input id="txtNumber" type="text" size="12" />               </li>            </ul>        </div>                <script type="text/javascript">            $(function () {                $("#btnCheck").bind("click", function () {                    $.ajax({                        url:"http://www.imooc.com/data/check.php",                        data: { num: $("#txtNumber").val() },                        type:"post",                        success: function (data) {                            $("ul").append("<li>你輸入的<b>  "                            + $("#txtNumber").val() + " </b>是<b> "                            + data + " </b></li>");                        }                    });                })            });        </script>    </body></html>
使用load()方法非同步請求資料

使用load()方法通過Ajax請求載入伺服器中的資料,並把返回的資料放置到指定的元素中,它的調用格式為:

load(url,[data],[callback])

參數url為載入伺服器位址,可選項data參數為請求時發送的資料,callback參數為資料請求成功後,執行的回呼函數。

使用getJSON()方法非同步載入JSON格式資料

使用getJSON()方法可以通過Ajax非同步請求的方式,擷取伺服器中的資料,並對擷取的資料進行解析,顯示在頁面中,它的調用格式為:

jQuery.getJSON(url,[data],[callback])$.getJSON(url,[data],[callback])

其中,url參數為請求載入json格式檔案的伺服器位址,可選項data參數為請求時發送的資料,callback參數為資料請求成功後,執行的回呼函數

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <title>使用getJSON()方法非同步載入JSON格式資料</title>        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>        <link href="style.css" rel="stylesheet" type="text/css" />    </head>        <body>        <div id="divtest">            <div class="title">                <span class="fl">我最喜歡的一項運動</span>                 <span class="fr">                    <input id="btnShow" type="button" value="載入" />                </span>            </div>            <ul></ul>        </div>                <script type="text/javascript">            $(function () {                $("#btnShow").bind("click", function () {                    var $this = $(this);                    $.getJSON("http://www.imooc.com/data/sport.json",function(data){                        $this.attr("disabled", "true");                        $.each(data, function (index, sport) {                            $("ul").append("<li>" + sport["name"] + "</li>");                        });                        });                })            });        </script>    </body></html>

 

Javascript-- jQuery Ajax應用

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。