在上一篇分享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](http://img.blog.csdn.net/20180117205325238?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

该页面的完整代码如下:
```html

$(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>

City Introduction

City:

Shanghai
Tokyo
New York

Submit
REFRESH

```
上述代码中,我们调用了ajax()函数,里面的参数含义如下:

  • method: 请求方式,'GET'或者'POST';
  • url: 服务器上的文件网址;
  • data: 发送到服务器的数据;
  • async: 是否异步.

  demo.php的完整代码如下:
```php
$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];

?>

&emsp;&emsp;这样我们可以在页面上进行操作了,点击‘Shanghai’,显示的页面如下:
<center>
![Shanghai的介绍](http://img.blog.csdn.net/20180117211642219?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
</center>
点击‘New York’,显示的页面如下:
<center>
![这里写图片描述](http://img.blog.csdn.net/20180117211753527?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamNsaWFuOTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
</center>
&emsp;&emsp;本次分享到此结束,欢迎大家交流~~

jQuery学习(2)ajax()使用的更多相关文章

  1. Jquery学习笔记 --ajax删除用户,使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...

  2. jquery学习笔记----ajax使用

    一.load() 加载页面数据 load(url,[data],[callback]) url:加载的页面地址,[data]传送的数据,[callback]加载完成时回调函数. 设计一个load.ht ...

  3. jquery学习笔记-----ajax

    $(selector).load( url [,date] [,callback] ) url:请求页面的url地址 date:发送至服务器的key:value数据 callback:请求完成时的回调 ...

  4. 20151210 Jquery 学习笔记 AJAX 进阶

    一.加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超 过一定时间的请求,用户就会变得不再耐烦而关闭页面.而如果在请求期间能给用户一些提 示,比如:正在努力加 ...

  5. 20151205 jquery 学习笔记--Ajax

    Ajax全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML), 它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网 ...

  6. jquery学习之AJAX

    1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准 ...

  7. jQuery 学习05——AJAX:定义、load()方法、get()/post()方法

    AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). load() 方法:从服务器加载数据,并把返回的数据放入被选元素中. 语法:$ ...

  8. JQuery学习之Ajax应用

    1.AJAX=异步javaScript和XML:在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示 2.load():简单但强大的AJAX方法,load()方法从服务器加载数据,并 ...

  9. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

随机推荐

  1. 2018上IEC计算机高级语言(C)作业 第1次作业

    1.经过这几周的学习,总结一下学习的心得与体会.(不少于100字:10分) 学习c语言已经一个学期了,刚开始学习的时候老是感觉力不从心.虽然认真听课了, 但是并不能理解它.这种情况到了后来才有所改变. ...

  2. selenium实现淘宝的商品爬取

    一.问题 本次利用selenium自动化测试,完成对淘宝的爬取,这样可以避免一些反爬的措施,也是一种爬虫常用的手段.本次实战的难点: 1.如何利用selenium绕过淘宝的登录界面 2.获取淘宝的页面 ...

  3. ABP框架系列之三十二:(Logging-登录)

    Server Side(服务端) ASP.NET Boilerplate uses Castle Windsor's logging facility. It can work with differ ...

  4. git(转载谢谢)

    Git可视化极简易教程 —— Git GUI使用方法   (新版的git默认已不能自行选择中文语言了) 前言 之前一直想一篇这样的东西,因为最初接触时,我也认真看了廖雪峰的教程,但是似乎我觉得讲得有点 ...

  5. 让photoshop cc 支持 webp格式

    下载WebP.8bi文件,看PS cc 是32位还是64位,找到对应的文件. brushes8.com-2017-11-03_08-29-21_654098.7z 把  WebP.8bi 复制到pho ...

  6. javascript(作业九)

    1.javascript简介: JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端 ...

  7. [Solution] JZOJ-5806 简单的操作

    [Solution] JZOJ-5806 简单的操作 题面 Description 从前有个包含n个点,m条边,无自环和重边的无向图. 对于两个没有直接连边的点u;v,你可以将它们合并.具体来说,你可 ...

  8. 瞎搞poj1008

    http://poj.org/problem?id=1008 题意: 两种历法: 1.Haab,一年365天,共19个月,前18月有20天(编号为0-19),最后一个月有5天(编号为0-4)pop(1 ...

  9. git 命令(提高篇)的本质理解

    上一篇博客:[[git 命令(提高篇)的本质理解] (http://www.cnblogs.com/juking/p/7105744.html)]介绍了Git 的基础知识 -- 提交.分支以及在提交树 ...

  10. CentOS 7安装新版RabbitMQ解决Erlang 19.3版本依赖

    通过yum等软件仓库都可以直接安装RabbitMQ,但版本一般都较为保守. RabbitMQ官网提供了新版的rpm包(http://www.rabbitmq.com/download.html),但是 ...