《小白H5成长之路25》原来jQuery的ajax加载外部页面原理很简单

“嘿,小白!你能把昨天收集的用户反馈表给我么?”

“可以啊,稍等,我等下给你发过去!”

不一会,小白把用户反馈表给老朱拿了过去,老朱拿到反馈表以后把表放到了桌子上,对小白说:“小白,反馈表的事情我一会儿再处理,我再给你说个知识点吧!刚刚我问你要反馈表,你把表给我后我再处理的整个过程就是JavaScript的ajax请求的过程。”

老朱继续说道:“都知道ajax是一个异步请求,很多人一听到异步请求就头疼,其实异步请求原理很简单:我问你要东西,你给我东西。

小白问道:“能再说详细点么?还是有点不明白。”

“要东西的时候有这么几种情况:问谁要、明着要还是悄悄要、要什么、你以什么方式给我、给我以后我怎么处理、我问你要东西你没听见怎么办?

小白说道:“嗯,是这么回事!”

“回到JavaScript的ajax请求上面!我们有一个html的静态页面,页面中需要显示后台数据库中的一个用户的信息。现在有一个handle.php页面它可以通过用户的userid从数据库中拿到对应的用户信息,具体它是怎么处理的数据库你不用关心,你只需要知道:你要哪个用户的信息、他就会按照特定的JSON格式给你。就像我刚问你要用户反馈表一样,你问handle.php要某个用户的信息,它也需要一定的时间才能给你,当它给了你数据以后你才能对数据进行处理。这个过程就是一个异步过程,我们必须等拿到数据后才能对数据进行处理。”

“好了看看jQuery的ajax方法怎么问handle要数据吧!”

“第一个参数url是handle相对于当前页面的地址,这就是问谁要。第二个参数type一般传两种参数get(明着要)和post(悄悄要)。第三个参数data是我们要发送给handle的数据,说白了就是刚我们说的要什么。第四个参数dataType就是以什么方式给我,这里要求的是json格式数据。最后一个参数是success,这个就是给我以后怎么处理。这几个参数是我们ajax请求时最常用到的,还有其他很多参数,你可以看看jQuery的ajax参数说明。”

老朱继续说:“你看一下刚刚jQuery的ajax代码中success,这里就是数据给我们以后的处理方法,昨天我们说过通过外部加载的json字符串会默认转换为对象,所以这里我用了JSON.stringify()将返回的结果转换成字符串,方便控制台输出查看它的内容。现在我们看一下通过ajax向handle要的结果吧!”

“哇,果然输出了用户信息,有了用户的JSON信息我就可以把这些信息放到用户标签里面了。”,小白非常高兴。

老朱说道:“小白,你先把jQuery的ajax参数介绍看一看,我这里还有些事情,一会我们尝试把JSON信息变成页面展现!”

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171213A070M500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券