jQuery前端开发任务驱动教程 课件 第8章 jQuery操作Ajax_第1页
jQuery前端开发任务驱动教程 课件 第8章 jQuery操作Ajax_第2页
jQuery前端开发任务驱动教程 课件 第8章 jQuery操作Ajax_第3页
jQuery前端开发任务驱动教程 课件 第8章 jQuery操作Ajax_第4页
jQuery前端开发任务驱动教程 课件 第8章 jQuery操作Ajax_第5页
已阅读5页，还剩63页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第8章jQuery操作Ajax《jQuery前端开发任务驱动教程》学习目标/Target熟悉Ajax的概念，能够归纳Ajax的优势掌握Ajax方法的使用，能够根据不同的场景灵活运用Ajax方法掌握XML数据格式的使用，能够在浏览器端接收服务器返回的XML数据掌握JSON数据格式的使用，能够在浏览器端接收服务器返回的JSON数据学习目标/Target掌握事件委派的使用，能够将子元素的事件委派给父元素掌握用户登录的实现，能够完成用户登录的开发掌握用户信息列表的实现，能够完成用户信息列表的开发掌握图书管理系统的实现，能够完成图书管理系统的开发章节概述/Summary为了实现网页与服务器的交互并动态更新网页内容，我们可以使用Ajax技术。Ajax是一种基于浏览器与服务器异步数据交互的技术。通过Ajax，可以使网页与服务器进行数据交换，实现网页内容的动态更新，从而提升用户的体验。为了更方便地完成Ajax操作，可以使用jQuery中提供的Ajax方法。本章将详细讲解如何使用jQuery操作Ajax。目录/Contents任务8.1用户登录任务8.2用户信息列表任务8.3图书管理系统用户登录任务8.1任务需求在现实生活中，我们经常需要使用用户名和密码来访问各种网站。通常情况下，网站会对我们提供的信息进行验证，只有验证成功后，我们才能进行后续操作，如访问个人账户等。某公司正在开发一个用户管理系统，目前正在进行用户登录功能的开发。本任务将使用Ajax对用户名和密码进行验证。为了使浏览器端的程序和服务器端的程序可以进行数据交互，双方需要约定一个服务器接口，该接口的具体信息如下。接口地址：http://localhost:3000/login。请求方式：POST。请求参数：{"username":"用户名","password":"密码"}。任务需求用户登录的开发需求如下：设计1个表单，包含用户名、密码和“登录”按钮。单击“登录”按钮后，若用户名、密码输入框中未填写用户名和密码的相关信息，弹出提示信息“用户名和密码均需要填写，请检查~”。在用户名输入框中输入admin，在密码输入框中输入123456，然后单击“登录”按钮，弹出提示信息“登录成功”。在用户名输入框中输入admin，在密码输入框中输入123123，然后单击“登录”按钮，弹出提示信息“登录失败”。任务需求用户登录页面如下图所示。任务需求知识储备1.什么是Ajax

先定一个小目标！熟悉Ajax的概念，能够归纳Ajax的优势知识储备什么是Ajax呢？1.什么是Ajax知识储备Ajax是一种浏览器端技术，由JavaScript、XML（eXtensibleMarkupLanguage，可扩展标记语言）和DOM（DocumentObjectModel，文档对象模型）等多种技术组合而成。1.什么是Ajax知识储备1.什么是AjaxAjax的优势如下。异步交互：Ajax使网页与服务器可以在不刷新网页的情况下进行交互，从而确保网页与用户的交互不被中断。减少网络传输数据量和交互延迟的时间：当需要更新网页时，使用Ajax可以只更新网页的一部分内容，而不必刷新整个网页，减少了网络传输数据量和交互延迟的时间。减少服务器负载：通过使用Ajax，可以使网页在不刷新整个页面的情况下向服务器请求数据、获取数据、并更新页面的特定部分内容。由于只有网页中需要更新的部分会进行动态加载，从而减轻了服务器的处理压力。知识储备2.Ajax方法

先定一个小目标！掌握Ajax方法的使用，能够根据不同的场景灵活运用Ajax方法知识储备2.Ajax方法jQuery提供了便捷的Ajax方法，只需调用相应的方法即可实现Ajax操作。调用Ajax方法可以快速地实现Ajax功能，减少冗余代码量，并提高开发效率。知识储备2.Ajax方法jQuery中常用的Ajax方法如下表所示。分类方法说明快捷方法$.get(url[,data][,success][,dataType])发送GET请求$.post(url[,data][,success][,dataType])发送POST请求$.getJSON(url[,data][,success])通过GET请求从服务器获取JSON数据底层方法$.ajax(url[,settings])发送自定义请求知识储备2.Ajax方法下面对jQuery中常用的Ajax方法的参数进行解释。参数url表示请求地址。参数data表示要发送的数据。参数success表示请求成功时执行的回调函数。参数dataType表示期待从服务器中返回的数据格式，如XML、JSON、TEXT等。参数settings表示一个键值对集合，用于配置请求的相关选项，所有选项都是可选的。知识储备2.Ajax方法请求的常用选项如下表所示。选项说明url处理请求的服务器地址data发送请求时传递的数据type请求方式，常见的可选值为GET、POSTdataType期待的数据格式，常见的可选值为XML、JSONasync是否异步执行操作，可选值为true（默认值）、false知识储备2.Ajax方法>>续上表选项说明cache是否缓存，可选值为true（默认值）、falsecontentType内容类型，默认值为'application/x-www-form-urlencoded;charset=UTF-8'success在请求成功时执行的回调函数complete在请求完成时执行的回调函数知识储备2.Ajax方法下面通过代码演示如何使用$.get()、$.post()和$.ajax()方法，示例代码如下。<body><buttonid="get_btn">调用$.get()方法发送GET请求</button><buttonid="post_btn">调用$.post()方法发送POST请求</button><buttonid="ajax_btn">调用$.ajax()方法发送自定义请求</button><script>$('#get_btn').on('click',function(){$.get('http://localhost:3000/get',function(msg){console.log(msg);});

});知识储备2.Ajax方法>>接上页代码$('#post_btn').on('click',function(){$.post('http://localhost:3000/post',function(msg){console.log(msg);});});知识储备2.Ajax方法>>接上页代码$('#ajax_btn').on('click',function(){$.ajax({type:'POST',url:'http://localhost:3000/post',success:function(msg){console.log(msg);}});});</script></body>知识储备2.Ajax方法上述示例代码运行后，初始页面效果如下图所示。依次单击“调用$.get()方法发送GET请求”“调用$.post()方法发送POST请求”“调用$.ajax()方法发送自定义请求”按钮，控制台中输出的结果如下图所示。任务实现

先定一个小目标！掌握用户登录的实现方法，能够完成用户登录功能的开发任务实现找到本任务的源代码，进入“服务器端”文件夹，该文件夹中的内容为Node.js本地HTTP服务器程序。打开命令提示符窗口，切换工作目录到当前目录，然后在命令提示符窗口中执行“nodeapp.js”命令，启动服务器。创建D:\jQuery\chapter08目录，将jquery-3.6.4.min.js文件和本章配套源代码中的css文件夹复制到该目录，并使用VSCode编辑器打开该目录。步骤1步骤2创建login.html文件，编写用户登录页面的结构并引入jquery-3.6.4.min.js文件，以及css文件夹中的login.css文件。编写逻辑代码，单击“登录”按钮时向服务器发送请求，通过服务器进行用户名和密码的验证。步骤3步骤4完成用户登录功能的开发任务实现在浏览器中打开login.html文件，用户登录的初始页面如下图所示。任务实现未填写用户名和密码时单击“登录”按钮的页面效果如下图所示。任务实现在用户名输入框中输入admin，在密码输入框中输入123456，然后单击“登录”按钮，登录成功，页面效果如下图所示。任务实现在用户名输入框中输入admin，在密码输入框中输入123123，然后单击“登录”按钮，登录失败，页面效果如下图所示。用户信息列表任务8.2任务需求在日常生活中，我们经常需要查看用户信息列表来了解一些基本信息。通过将用户的关键信息以易读的方式展示在页面上，其他用户或访问者可以快速了解到用户的姓名、年龄、爱好等基本信息。小悠是跆拳道社团的负责人，他需要开发一个用户信息列表来统计社团中成员的信息。本任务需通过与服务器通信，从服务器获取用户信息数据，并使用jQuery将这些数据渲染在页面的表格中，呈现一个用户信息列表。为了使浏览器端的程序和服务器端的程序可以进行数据交互，双方需要约定一个服务器接口，该接口的具体信息如下。接口地址：http://localhost:3000/list。请求方式：GET。请求成功返回结果如下。任务需求[{"name":"小春","age":20,"hobby":"唱歌","major":"电子信息工程"},{"name":"小夏","age":19,"hobby":"跳舞","major":"通信工程"},{"name":"小秋","age":21,"hobby":"足球","major":"计算机科学与技术"},{"name":"小冬","age":20,"hobby":"篮球","major":"软件工程"},]用户信息列表的开发需求如下：设计一个包含用户名、年龄、爱好和专业的表格。使用jQuery从服务器中获取用户信息，并将数据渲染在页面中。用户信息列表的效果如下图所示。任务需求知识储备1.XML数据格式

先定一个小目标！掌握XML数据格式的使用，能够在浏览器端接收服务器返回的XML数据知识储备1.XML数据格式在浏览器与服务器进行Ajax交互时，确保双方能够正确识别对方发送的信息是非常重要的。为了达到这个目的，可以使用XML作为Ajax交互的数据格式。在发送Ajax请求时，可以通过将Ajax方法中的参数dataType设置为xml来指定期望接收的数据格式为XML。知识储备1.XML数据格式下面通过代码演示如何在浏览器中接收从服务器端返回的XML数据，示例代码如下。<body><script>$.get('http://localhost:3000/xml',function(msg){console.log(msg);},'xml');</script></body>知识储备1.XML数据格式上述示例代码运行后，控制台中输出的XML数据如下图所示。知识储备2.JSON数据格式

先定一个小目标！掌握JSON数据格式的使用，能够在浏览器端接收服务器返回的JSON数据知识储备2.JSON数据格式JSON（JavaScriptObjectNotation，JavaScript对象表示法）是一种轻量级的数据交换格式，它采用独立于编程语言的文本格式来存储和表示数据。知识储备2.JSON数据格式使用JSON可以保存各种类型的数据，包括对象、数字、字符串、数组等。JSON本质上是一个字符串，其中对象的属性名和字符串类型的值需要用双引号进行标注。下面演示简单的JSON数据，示例代码如下。{"name":"小明","age":18,"work":true}知识储备2.JSON数据格式在发送Ajax请求时，可以通过将Ajax方法中的参数dataType设置为json来指定期望接收的数据格式为JSON。这样设置后，如果服务器返回的数据格式是JSON，浏览器会自动将其解析为一个JavaScript对象，方便进行后续的处理和操作。知识储备2.JSON数据格式下面通过代码演示如何在浏览器中接收从服务器返回的JSON数据，示例代码如下。<body><script>$.get('http://localhost:3000/json',function(msg){console.log(msg);},'json');</script></body>知识储备2.JSON数据格式上述示例代码运行后，控制台中输出的JSON数据如下图所示。任务实现

先定一个小目标！掌握用户信息列表的实现方法，能够完成用户信息列表的开发任务实现找到本任务的源代码，进入“服务器端”文件夹，该文件夹中的内容为Node.js本地HTTP服务器程序。打开命令提示符窗口，切换工作目录到当前目录，然后在命令提示符窗口中执行“nodeapp.js”命令，启动服务器。创建userInfoList.html文件，编写用户信息列表页面的结构并引入jquery-3.6.4.min.js文件，以及css文件夹中的userInfoList.css文件。步骤1步骤2编写逻辑代码，在页面加载完成后向服务器端请求用户信息列表数据，并将数据渲染在页面上。步骤3完成用户信息列表的开发任务实现在浏览器中打开userInfoList.html文件，用户信息列表的页面效果如下图所示。图书管理系统任务8.3任务需求为了更好地维护图书资源，图书管理员小段决定开发一个图书管理系统，并使用Ajax来实现查询、添加、修改和删除图书信息的功能。为了让浏览器端的程序和服务器端的程序可以进行数据交互，双方需要约定服务器接口，接口信息列表如下表所示。任务需求接口地址请求方式请求参数说明http://localhost:3000/getbookGETtitle查询图书列表http://localhost:3000/bookGETid查询某本图书的信息http://localhost:3000/addPOSTtitle、author、publisher、pubdata、price添加图书信息http://localhost:3000/editPOSTid、title、author、publisher、pubdata、price编辑图书信息http://localhost:3000/delGETid删除某本图书的信息图书管理系统的开发需求如下：设计一个包含编号、图书名称、作者、出版社、价格、出版年份、操作的图书列表。设计一个文本框、“查询”按钮和“新增”按钮。使用jQuery从服务器中获取图书信息，并将数据渲染在页面中。文本框用于输入查询信息。若文本框的内容为空，则单击“查询”按钮默认查询所有图书的信息；若在文本框中输入关键字，则筛选和关键字相关的图书。查询完成后，清空文本框的内容。任务需求单击“新增”按钮，弹出新增图书的表单，表单中包含图书名称、作者、出版社、价格、出版年份字段，还包含“提交”和“取消”按钮。图书信息填写完成后，单击“提交”按钮即可保存图书信息，并隐藏该表单。单击“取消”按钮可以隐藏该表单，并清空文本框中已输入但未保存的内容。在表格操作列中提供“删除”和“修改”按钮。在表格中，单击每一行最后一个单元格中的“删除”按钮，可以删除当前行对应的图书信息。在表格中，单击每一行最后一个单元格中的“修改”按钮，弹出图书信息编辑表单，该表单用于修改图书信息。图书信息编辑完成后，单击“提交”按钮即可保存图书信息。任务需求图书管理系统的效果如下图所示。任务需求知识储备事件委派

先定一个小目标！掌握事件委派的使用，能够将子元素的事件委派给父元素知识储备什么是事件委派呢？事件委派知识储备事件委派是指把原本要在子元素上注册的事件注册到父元素上，即把子元素的事件委派给父元素。事件委派的优势在于，可以为未来动态创建的元素注册事件。事件委派知识储备使用on()方法可以实现事件委派。在on()方法中，需要指定要注册事件的元素以及事件类型。同时，还需要提供一个选择器作为on()方法的第二个参数，这样只有特定的子元素才能触发在父元素上注册的事件。事件委派知识储备事件委派下面通过代码演示如何实现事件委派，示例代码如下。<body><ul><li>学向勤中得，萤窗万卷书。</li><li>三冬今足用，谁笑腹空虚。</li></ul><script>$('ul').on('click','li:first-child',function(){alert('学问是需要勤奋才能得来的，就像前人囊萤取光，勤奋夜读，读很多书。');});</script></body>知识储备事件委派上述示例代码运行后，使用事件委派的初始页面效果如下图所示。单击“学向勤中得，萤窗万卷书。”后的页面效果如下图所示。任务实现

先定一个小目标！掌握图书管理系统的实现，能够完成图书管理系统的开发任务实现找到本任务的源代码，进入“服务器端”文件夹，该文件夹中的内容为Node.js本地HTTP服务器程序。打开命令提示符窗口，切换工作目录到当前目录，然后在命令提示符窗口中执行“nodeapp.js”命令，启动服务器。创建book.html文件，编写图书管理系统的页面结构并引入jquery-3.6.4.min.js文件，以及css文件夹中的book.css文件。步骤1步骤2编

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论