課件_50.第九章：Ajax技術[5]-jQuery提供的Ajax快捷方法(1)

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ajax01.html

用戶端

<!DOCTYPE html><!--用戶端--><!--課件_50.第九章：Ajax技術[5]-jQuery提供的Ajax快捷方法(1).rar--><!--使用get、post方式拿到伺服器資料,兩種方式很相似--><html id="html"><head>    <meta charset="utf-8" />    <title>demo</title>    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>    <script>    $(function(){    $('button').click(function(){//    $.get('get.php',{id:1,name:"張三"},function(data,textStatus,jqXHR){//    //當請求完成並且成功後執行的回呼函數//    console.log('執行成功啦。');//    console.log(data);//伺服器端返回的主體資料//    console.log(textStatus);//返回狀態成功是：success//    console.log(jqXHR);//XHR對象的一個超集（子集）//    });    //伺服器端設定了header('Content-Type:text/html');所以jQuery會將返回的資料看成是html字串//    $.get('html.php',{id:1,name:"張三"},function(data){//    console.log(typeof data);//    $('body').append(data);//    });    //伺服器端設定了header('Content-Type:application/x-javascript');所以jQuery會將返回的資料看成是js代碼直接自動的去執行。//    $.get('script.php');    //伺服器端設定了header('Content-type:application/json');所以jQuery會將返回的資料作為JSON格式自動的轉換為js對象    //返回的資料一定要符合JSON規範//    $.get('json.php',function(data){//    console.log(data);//    });    //如果不在伺服器端設定返回資料的類型，在用戶端也可設定    //設定了html，則jQuery會講返回的資料當做是html字串//    $.get('get1.php',function(data){//    console.log(data);//    $('body').append(data);//    },'html');    //jQuery會直接將返回的資料當做是js代碼來執行，而忽略響應的Content-Type資訊//    $.get('get1.php',function(data){////    },'script');    /*    //註：如果要設定該值，我們最好傳入上面的回呼函數（用來佔位防止參數被錯誤的認為是傳入到伺服器的資料），否則無效。    $.get('test/get.php',function(){},'script');    */    //jQuery會講返回的資料當做是JSON格式的資料，自動的轉換為js對象    //返回的資料一定要符合JSON規範//    $.get('get1.php',function(data){//        console.log(data);//    },'json');    //傳入jsonp，使用jsonp實現跨源請求//    $.get('http://127.0.0.1/MyTestAjax06/get1.php',function(data){//    console.log(data);//    },'jsonp');    //jQuery自動的幫你做了，幾乎一切麻煩的事情。    $.post('post.php',{name:"孫勝利",sex:true},function(data){       console.log(data);    });    });    });    </script></head><body><button>開始</button></body></html>

ajax01.php

伺服器端

<?phpecho $_GET;//$html=<<<A//<ul>//    <li>哈哈。</li>//    <li>哈哈。</li>//    <li>哈哈。</li>//    <li>哈哈。</li>//    <li>哈哈。</li>//</ul>//A;////$script=<<<A//if(1>100){//    alert('大於100');//}else{//    alert('不大於100');//}//A;////$json=<<<A//{"name":"孫勝利","sex":true}//A;////////返回調用回呼函數的js代碼//echo "{$_GET['callback']}($json)";//?>

get.php

伺服器端

<?phpecho'訪問到伺服器了';?>

html.php

伺服器端

<?php//響應給用戶端的資料類型header('Content-Type:text/html');print_r($_GET);?>

json.php

伺服器端

<?phpheader('Content-type:application/json');$json=<<<A{"name":"孫勝利","sex":true}A;echo $json;?>

post.php

伺服器端

<?phpprint_r($_POST);?>

script.php

伺服器端

<?phpheader('Content-Type:application/x-javascript');//header('Content-Type:text/javascript');$script=<<<Aif(1>100){    alert('大於100');}else{    alert('不大於100');}A;echo $script;?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More