jQuery前端开发任务驱动教程 课件 第8章 jQuery操作Ajax.pptx

第8章jQuery操作Ajax;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;用户登录;任务需求;本任务将使用Ajax对用户名和密码进行验证。为了使浏览器端的程序和服务器端的程序可以进行数据交互，双方需要约定一个服务器接口，该接口的具体信息如下。

接口地址：http://localhost:3000/login。

请求方式：POST。

请求参数：{username:用户名,password:密码}。;用户登录的开发需求如下：

设计1个表单，包含用户名、密码和“登录”按钮。

单击“登录”按钮后，若用户名、密码输入框中未填写用户名和密码的相关信息，弹出提示信息“用户名和密码均需要填写，请检查~”。

在用户名输入框中输入admin，在密码输入框中输入123456，然后单击“登录”按钮，弹出提示信息“登录成功”。

在用户名输入框中输入admin，在密码输入框中输入123123，然后单击“登录”按钮，弹出提示信息“登录失败”。;用户登录页面如下图所示。;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;任务实现;任务实现;任务实现;任务实现;任务实现;任务实现;用户信息列表;任务需求;为了使浏览器端的程序和服务器端的程序可以进行数据交互，双方需要约定一个服务器接口，该接口的具体信息如下。

接口地址：http://localhost:3000/list。

请求方式：GET。

请求成功返回结果如下。;用户信息列表的开发需求如下：

设计一个包含用户名、年龄、爱好和专业的表格。

使用jQuery从服务器中获取用户信息，并将数据渲染在页面中。

用户信息列表的效果如下图所示。;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;任务实现;任务实现;任务实现;图书管理系统;任务需求;为了让浏览器端的程序和服务器端的程序可以进行数据交互，双方需要约定服务器接口，接口信息列表如下表所示。;图书管理系统的开发需求如下：

设计一个包含编号、图书名称、作者、出版社、价格、出版年份、操作的图书列表。

设计一个文本框、“查询”按钮和“新增”按钮。

使用jQuery从服务器中获取图书信息，并将数据渲染在页面中。

文本框用于输入查询信息。若文本框的内容为空，则单击“查询”按钮默认查询所有图书的信息；若在文本框中输入关键字，则筛选和关键字相关的图书。查询完成后，清空文本框的内容。;单击“新增”按钮，弹出新增图书的表单，表单中包含图书名称、作者、出版社、价格、出版年份字段，还包含“提交”和“取消”按钮。图书信息填写完成后，单击“提交”按钮即可保存图书信息，并隐藏该表单。单击“取消”按钮可以隐藏该表单，并清空文本框中已输入但未保存的内容。

在表格操作列中提供“删除”和“修改”按钮。

在表格中，单击每一行最后一个单元格中的“删除”按钮，可以删除当前行对应的图书信息。

在表格中，单击每一行最后一个单元格中的“修改”按钮，弹出图书信息编辑表单，该表单用于修改图书信息。图书信息编辑完成后，单击“提交”按钮即可保存图书信息。;图书管理系统的效果如下图所示。;知识储备;知识储备;知识储备;知识储备;知识储备;知识储备;任务实现;任务实现;任务实现;任务实现;任务实现;任务实现;任务实现;任务实现;本章小结