《小白H5成长之路26》用jQuery的ajax加载实现异步信息切换

“我们继续上午的ajax加载,把剩下的事情做完吧!”,老朱跟小白说道。

“好的,我现在就打开上午的那个文件。”

“好的,小白,上午我们写的这个ajax加载是向handle页面发送一个用户uid,handle页面给我们返回这个用户的标识(uid)、姓名(userName)头像(imgSrc)、电话(tel)。现在我们实现这样一个简单的功能:点击用户列表中用户的名字,然后在详细信息显示区显示对应用户的详细信息。”

“这是现在页面的一个HTML布局,ul标签里面的li上我增加了一个uid属性记录每一个人的uid值。”

“uid不是li的默认属性吧?”

“恩,在HTML5里面每一个标签都可以看作是一个对象,而对象除了自带的属性外,我们还可以给它们添加一些特有属性,这里的uid我是写死的,如果是实际开发的时候,这里的li肯定也是通过ajax加载用户列表生成的,由于咱是练习为了方便我就先这样写了。”

“你先说一下你的实现思路吧!”,老朱对小白说。

“我觉得应该通过鼠标的点击(click)事件来触发ajax加载,当加载完成以后把加载回来的信息放到左边的显示区里面。我先看一下页面布局,稍等我试试看能不能实现这个功能。”

过了大概30分钟小白兴奋的找到老朱,“我实现出来了!你看看我的代码。”

“不错!你给我讲讲实现的原理吧!”

“好的,因为我们现在需要通过点击右边的用户名字进行ajax加载,所以我首先通过$("#userList ul li")选择器找到名字所在的容器列表,然后使用jQuery的click事件来触发ajax请求。”

“恩,不错!请继续。”

“ajax请求的关键参数是uid,而uid记录在了li标签上的uid属性里面,所以第一步就是通过$(this).attr()取当前触发点击事件(this)的li上的uid属性。拿到uid之后就可以向handle页面发送请求了,当请求成功以后,我先通过控制台输出查看返回的数据结构,然后把返回的用户信息放到对应的容器中。你看一下我实现的效果!”

“非常好!你的进步很快,以后如果你要是做web前端开发ajax加载数据会在各种功能模块中遇到,好的开始就是成功的一半,以后碰到不管多复杂的页面、一个页面不管同时发出多少个ajax请求,都是以今天的这个功能为基础的。所以我希望你能再次认真把jQuery中的ajax所有的参数介绍看一遍,脑海里有了这些参数的印象,以后碰到具体问题最起码知道ajax哪些功能可以实现,哪些功能不能实现,你说对不对?”

“没问题~”

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

扫码关注云+社区

领取腾讯云代金券