jQuery學習（2）ajax()使用

weixin_33890499發表於2018-01-17
jQuery

  在上一篇分享JavaScript之使用AJAX（適合初學者）中，我們學習瞭如何在JavaScript中使用AJAX.由於jQuery出色的效能和簡潔的寫法，且它也支援AJAX的使用，所以，本次分享將會展示如何在jQuery中使用ajax()函式。
  關於jQuery的ajax()函式的教程，可以參考：http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp ，當然，我們也可以jQuery.ajax()的官方文件：http://api.jquery.com/jquery.ajax/ ，該官方文件不僅詳細地介紹了該函式各個引數以及它們的含義，並且還給出了許多例子，值得一看。
  關於Web伺服器以及檔案的配置，我們還是跟前一篇保持一致。接下來，我們將看一個具體的例子。
  首先，我們的開始頁面（city_intro.html）如下：

9419034-39e6d8f20664015f
city_intro.html

該頁面的完整程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
    $(document).ready(function(){
    
        $("#btn1").click(function(){
            var city = $('#city').val();
            htmlobj=$.ajax({
                            method: "POST",
                            url: "demo.php",
                            data: {query:city},
                            async:false,
                          });
            $("#demo").html(htmlobj.responseText);  
        });
        
        $("#btn2").click(function(){ location.reload(); });
    });
    </script>
</head>
<body>

<h3>City Introduction</h3>
<form> 
    City: 
    <select id='city'>
        <option>Shanghai</option>
        <option>Tokyo</option>
        <option>New York</option>
    </select>
</form>
<br>
<button id="btn1">Submit</button>
<button id="btn2">REFRESH</button>
<p id='demo'></p> 

</body>
</html>

上述程式碼中，我們呼叫了ajax(）函式，裡面的引數含義如下：

  • method: 請求方式，'GET'或者'POST';
  • url: 伺服器上的檔案網址；
  • data: 傳送到伺服器的資料;
  • async: 是否非同步.

  demo.php的完整程式碼如下：

<?php
$citys = array();
$citys["Shanghai"] = "Shanghai is one of the four direct-controlled municipalities of China and the most populous city proper in the world, with a population of more than 24 million as of 2014.It is a global financial center and transport hub, with the world's busiest container port. Located in the Yangtze River Delta, it sits on the south edge of the estuary of the Yangtze in the middle portion of the East China coast. The municipality borders the provinces of Jiangsu and Zhejiang to the north, south and west, and is bounded to the east by the East China Sea.";
        
$citys["Tokyo"] = "Tokyo is the capital city of Japan and one of its 47 prefectures. The Greater Tokyo Area is the most populous metropolitan area in the world. It is the seat of the Emperor of Japan and the Japanese government. Tokyo is in the Kantō region on the southeastern side of the main island Honshu and includes the Izu Islands and Ogasawara Islands. Formerly known as Edo, it has been the de facto seat of governmentsince 1603 when Shogun Tokugawa Ieyasu made the city his headquarters. It officially became the capital after Emperor Meiji moved his seat to the city from the old capital of Kyoto in 1868; at that time Edo was renamed Tokyo. Tokyo Metropolis was formed in 1943 from the merger of the former Tokyo Prefecture and the city of Tokyo.";
            
$citys["New York"] = "The City of New York, often called New York City or simply New York, is the most populous city in the United States. With an estimated 2016 population of 8,537,673 distributed over a land area of about 302.6 square miles (784 km2), New York City is also the most densely populated major city in the United States. Located at the southern tip of the state of New York, the city is the center of the New York metropolitan area, one of the most populous urban agglomerations in the world with an estimated 23.7 million residents as of 2016. A global power city, New York City has been described as the cultural, financial, and media capital of the world, and exerts a significant impact upon commerce, entertainment,research, technology, education, politics, and sports. The city's fast pace defines the term New York minute. Home to the headquarters of the United Nations, New York is an important center for international diplomacy.";
                      
$query = $_POST["query"];
echo $citys[$query];
?>

  這樣我們可以在頁面上進行操作了，點選‘Shanghai’,顯示的頁面如下：

9419034-615418acaabd9956
Shanghai的介紹

點選‘New York’,顯示的頁面如下：

9419034-51ef686b412d210b
New York的介紹

  本次分享到此結束，歡迎大家交流~~

相關文章