第8天_Ajax和BootStrap

第8天_Ajax和BootStrap

  1. 学习目标
  • Ajax介绍
  • Ajax使用
  • BootStrap
  1. Ajax介绍

2.1 Ajax的概念

AJAX (阿贾克斯 Asynchronous Javascript And Xml ) 异步JavaScript和XML,是指一种创建交互式网页应用的网页开发技术, 可以访问服务器数据的局部刷新的技术. AJAX不是一种新的编程语言

2.2 Ajax的作用

允许客户端发送HTTP请求, 去异步请求服务器的数据来创建动态网页

2.3 前后端交互图

3.Ajax使用

3.1Ajax在JS中的使用

  • Ajax的核心
    Ajax 技术核心是JavaScript对象XMLHttpRequest(简称XHR)

  • 创建XHR对象
    var xhr = new XMLHttpRequest();
    console.log(xhr); // XMLHttpRequest

  • XMLHttpRequest对象的属性和方法XHR提供的方法:

    • open(): 准备好需要发送给服务器的内容.接收三个参数: 要发送的请求类型(get/post), 请求的URL和是否异步.如:
      xhr.open(‘get’, ‘demo.json’, true); //URL为demo.json的get请求, true表示异步.
    • send(): 向服务器发送请求.
      如: xhr.send(null);
  • XHR提供的属性:当请求发送到服务器端后, 服务器就会向客户端发送响应, 收到响应数据后, 响应的数据会自动填充XHR对象的属性. 一共有四个属性:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 五、查询 - #### 1. 访问index.jsp - #### 2. index页面发送出查询员工列表请求 - #### 3. EmployeeController接收请求,查出员工数据,返回视图页面 - #### 4. jsp解析数据并显示 ### 六、使用ajax+json实现查询及后续功能 - #### 1. index.jsp页面发送ajax请求进行员工数据分页查询 - #### 2. 服务器将查询到的数据以json字符串的形式返回给浏览器 - #### 3. 浏览器收到json字符串,使用js对json进行解析并处理,jquery操作DOM对象,实现数据显示 - #### 4. ajax实现了客户端的无关性 ### 七、员工新增 - #### 1. 在index.jsp页面点击“新增”按钮 - #### 2. 弹出填写信息的对话框(BootStrap模态框) - #### 3. 去数据库查询部门列表,显示在下拉列表 - #### 4. 用户输入数据,完成前后端校验 - ##### js+jquery前端校验数据合理性 - ##### ajax发送请求校验用户名是否重复 - ##### 重要数据后端(JSR303)再次校验 - #### 5. 实现保存 ### 八、员工信息修改 - #### 1. 在index.jsp页面点击“编辑”按钮 - #### 2. 弹出用于修改信息的对话框(BootStrap模态框,显示已有信息) - #### 3. 用户输入数据,进行合理性校验 - #### 4. 点击修改,完成信息更新 ### 九、员工删除 - #### 1. 在index.jsp页面点击“删除”按钮 - #### 2. 弹出确认框 - #### 3. 完成删除 - ##### 单个删除 URI: /emps/del/{id} - ##### 批量删除 URI: /emps/dels/{ids} ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值