我们继续上午的 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 哪些功能可以实现, 哪些功能不能实现, 你说对不对?
没问题~
想学 H5 的朋友可以关注老炉, 您的关注是我持续更新小白 HTML5 成长之路的动力!
来源: http://www.jianshu.com/p/b90119fb6235