jQuery learning (2) using ajax()

Share in the previous article Using AJAX in JavaScript (for beginners) We learned how to use AJAX in JavaScript. Because jQuery has excellent performance and concise writing method, and it also supports the use of AJAX, this sharing will show how to use ajax() function in jQuery.
   for a tutorial on the ajax() function of jQuery, please refer to: http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp , of course, we can also use the official document of jQuery.ajax(): http://api.jquery.com/jquery.ajax/ The official document not only introduces the parameters of the function and their meanings in detail, but also gives many examples, which are worth looking at.
   for the configuration of Web server and files, we still follow the Previous bring into correspondence with. Next, we will look at a specific example.
   first, our start page (city_intro.html) is as follows:




The complete code of this page is as follows:

<!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>

In the above code, we call the ajax() function. The meaning of the parameters is as follows:

  • Method: request method, 'GET' or 'POST';
  • url: the web address of the file on the server;
  • Data: data sent to the server;
  • async: asynchronous or not

The complete code of   demo.php is as follows:

<?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 government
                   since 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];
?>

                     




Click "New York" and the displayed page is as follows:



Welcome to exchange~~

Tags: JQuery PHP Javascript Web Server

Posted on Tue, 05 May 2020 11:55:40 -0700 by C_Calav