jQuery学习(2)ajax()使用

简介:   在上一篇分享JavaScript之使用AJAX(适合初学者)中,我们学习了如何在JavaScript中使用AJAX.由于jQuery出色的性能和简洁的写法,且它也支持AJAX的使用,所以,本次分享将会展示如何在jQuery中使用ajax()函数。

  在上一篇分享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)如下:


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

  这样我们可以在页面上进行操作了,点击‘Shanghai’,显示的页面如下:


Shanghai的介绍

点击‘New York’,显示的页面如下:

这里写图片描述

  本次分享到此结束,欢迎大家交流~~

目录
相关文章
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
54 0
|
2月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
131 1
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
41 1
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
18 0
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
27 1
|
4月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
277 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
35 0
|
4月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。