国开JavaScript程序设计形考作业5试题及答案(1).docx

《国开JavaScript程序设计形考作业5试题及答案(1).docx》由会员分享，可在线阅读，更多相关《国开JavaScript程序设计形考作业5试题及答案(1).docx（3页珍藏版）》请在第一文库网上搜索。

1、第五次任务（预备知识：第七章；分值：30分；必做；需辅导教师评分）实训八：使用jQuery技术实现企业信息展示系统的相关功能1 .题目使用jQuery技术实现企业信息展示系统的相关功能。2 .目的（1）掌握jQuery的基本知识。（2）掌握jQuery的应用方法。（3）进一步理解AjaX程序的设计方法。（4）会利用所学知识设计简单的应用程序。3 .内容用jQuery技术实现产品的查询、添加、修改与删除，用户的登录、注册、查询和删除。4 .要求5 1）从下载jQuery库。6 2）将在客户端网页中使用的MyToo1s中的函数转换为JQuery函数。请求服务器端程序能够将用户信息保存到数据库。7

2、3）进一步完善功能，优化界面。参考答案：在这个项目中，我们将使用jQuery来实现企业信息展示系统的一些基本功能。我们将包括产品的查询、添加、修改和删除，以及用户的登录、注册、查询和删除。由于这个项目的规模相对较小，我们将简化数据库的交互，只关注前端的实现。首先，我们需要从下载jQuery库，并把它添加到我们的项目中。然后，我们可以开始创建我们的前端页面和jQuery函数。以下是一个简单的示例，我们将创建一个HTM1页面来显示产品列表，并提供添加、删除和编辑产品的功能。htm1复制代码企业信息展示系统scriptsrc=,border:Ipxso1id#000;padding:10px;)#p

3、roductsth,#productstdborder:Ipxso1id#000;padding:5px;text-a1ign:center;)产品列表!-这里将通过jQuery动态生成产品列表添加产品然后，我们在product.js文件中实现产品的查询、添加、修改和删除的逻辑。由于这是一个简化的示例，我们不会真正与数据库进行交互，只是模拟这个过程。javascript复制代码1etproducts=;/产品列表/添加产品$(#addProduct,).c1ick(function()1etproductName=PromPt(请输入产品名称：,)；if(productName)product

4、s.push(name:productName);UpdateProduct1ist();)；/更新产品列表functionUpdateProduct1ist()1etproductsDiv=$(,ftproducts,);productsDiv.empty();products.forEach(product=1etrow=Jproduct.name编辑删除/button;productsDiv.append(row);)；)/编辑产品$(,.editProduct,).c1ick(function()1etproductName=PronIPt:(请输入新的产品名称：,)；if(produ

5、ctName)1etproductindex=products.findindex(item=item.name=$(this).parent().prev().text();productsproduct1ndex.name=productName;UpdateProduct1ist();)；/删除产品$(,.de1eteProduct,).c1ick(function()1etproductindex=products.findindex(item=item.name=$(this).parent().prev().text();products.sp1ice(productIndexj1);updateProduct1ist();)；这个示例展示了如何使用jQuery来模拟与数据库的交互，实现了产品的添加、编辑和删除功能。你可以根据需要进一步扩展这个示例，例如添加真实的数据库交互、用户登录和注册等功能。