11-23 SSM4

Ajax

同步请求 :全局刷新的方式  -> synchronous请求 客户端发一个请求,服务器响应之后你客户端才能继续后续操作,请求二响应完之后才能发送后续的请求,依次类推

有点:服务器负载较小,但是由于服务器相应的是整个页面资源,容易造成资源重复加载浪费,服务器相应的数据没有进行对应的选择刷新 -> 局部刷新

异步请求:asynchronous你只要发,不管服务器有没有给你响应,你依然可以继续第二次请求的发送,这是一种异步的方式  调用回调函数把响应返回给你

客户端 ->异步引擎对象xmlHttpRequets(队列结构,有个口进,有个口出,队列里面存下请求,再一个一个把请求发给服务器) -> 服务器  数据传输的载体,现在用的是xml数据格式的数据。

AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML"。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在基本都是json格式)。

特点:

  • 与服务器异步交互
  • 浏览器页面局部刷新
  • 排队导致的服务器压力过大也是其中的一个特点

java  对象 -> json xml三个之间的转换

Ajax的实现

1.原生版本  

2.第三方的原生的ajax封装:jquery axios 

基于jquery对ajax的实现

1.回调函数的概念,不是手动调用的函数,写事件函数时,其实括号内部写的就是回调函数

axios.click(function (){})

加上Requetsbody表示他是一个数据了

post请求完毕

现在->get  支持url传值  也支持内部自己写data传值

jquery提供的对ajax再次封装的简写!

$("btn").click(fcuntion (){

 $.get("/test3/test1.do?name=lisi&age=23),function(rs){
        $("content").text(rs)};

})

只适用于get

根据bid去查询书籍

注入service 接收一个bid int id

其实调用了book.toString方法

数据想对象.属性调用出来  因为此时rs是一个字符串  

rs是后台相应的一个字符串

下面这种方式才可以拿出

问题:把字符串转换成一个js对象var obj= {}

使用parseJson  把字符串{“k”:"v","k1":"v1'}转换成js对象

但是对于后台的拼接就会显得特别麻烦 

后台是得到一个java对象,前端需要得到对象的属性,把字符串变成js对象{} 就是json

json就是带有格式的一个字符串 非常类似于js的对象格式

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
JSON是用字符串来表示Javascript对象,例如可以在Servlet中发送一个JSON格式的字符串给客户端Javascript,Javascript可以执行这个字符串,得到一个Javascript对象。

Json语法

数据在名称/值对中

数据由逗号分隔花括号{}

保存对象方括号[]

保存数组对象数组:[{},{},{}]

json的key必须使用双引号引起

对象数组:

json就是用于跨平台的数据传递

后端:java对象转换为json  有相应的jar包

前端:把字符串转换为js对象 Json.parse(rs)  rs是一个字符串 

json -> 字符串 json.Stringfy

java后台java对象与json的转换

1.使用第三方的json的jar包:jackson(spring默认) fastjson(阿里提供) jsonlib

Spring使用jackson

1.导入依赖

然后SpringMvc帮你做下面的事

2.配合@ReponseBody把java对象转换为json字符串

@RequestBody:把json字符串转换为java对象

但是没有postJson

更改首页的原生写法:

js动态加cur这个类选择器  但是我们的页面时全局刷新

ajax应用

实现表单  发起ajax请求  数据不是放到域当中了  使用js的DOM操作来动态操纵元素

调一下位置:

页面一加载  我们发起所谓的ajax请求

发起给请求

@("document").ready(function (){

})

@("searchBtn").get

一次性取出数据:

serializable  序列化表单

得到data的字符串格式

data通过url传了过去 就不管了

写controller

响应的是list.do 返回的是Page对象  需要一个ResponseBody

数据给到前台 然后前台渲染即可

java对象->map

js代码循环实现数据渲染

完成下一页

页面刷新执行一次

实现情况:追加不行

点击分类:实现页码复位

实现价格排序

 shiyongshi'yong

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/163475.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3+Ts实现聊天机器人(chatBot-附代码)

一:项目介绍 本次实验主要涉及到的技术是 Vue3 Ts,当然其中也有部分是 Vue2 格式的代码以及 json 和 CSS 布局等。本来是想仿照 文心一言 来开发的一个聊天机器人案例。结果由于时间不足,可能只是做出来了一个半成品。不过核心功能是有的。由…

浅谈安科瑞智能照明系统在马来西亚国家石油公司项目的应用

摘要:随着社会经济的发展及网络技术、通信技术的提高,人们对照明设计提出了新的要求,它不仅要控制照明光源的发光时间、 亮度,而且与其它系统来配合不同的应用场合做出相应的灯光场景。本文介绍了马亚西亚石油公司智能照明项目的应…

tp8 使用rabbitMQ(2)工作队列

代码的参数说明在 第一小节的代码中,如果需要可移步到第一节中查看 工作队列 工作队列(又称:任务队列——Task Queues)是为了避免等待一些占用大量资源、时间的操作。当我们把任务(Task)当作消息发送到队列…

推荐一款png图片打包plist工具pngPackerGUI_V2.0

png图片打包plist工具,手把手教你使用pngPackerGUI_V2.0 此软件是在pngpacker_V1.1软件基础之后,开发的界面化操作软件,方便不太懂命令行的小白快捷上手使用。1.下载并解压缩软件,得到如下目录,双击打开 pngPackerGUI.…

使用paddleocr进行OCR文字识别

1 OCR介绍 OCR(Optical Character Recognition)即光学字符识别,是一种将不同类型的文档(如扫描的纸质文件、PDF文件或图像文件中的文本)转换成可编辑和可搜索的数据的技术。OCR技术能够识别和转换印刷或手写文字&…

Python接口自动化测试——如何搭建测试环境

前言 接口测试的方式有很多,比如可以用工具(jmeter,postman)之类,也可以自己写代码进行接口测试,工具的使用相对来说都比较简单,重点是要搞清楚项目接口的协议是什么,然后有针对性的进行选择&a…

NF是哪个国家品牌?韩国NF-耐福功放芯片介绍

NF是韩国一家专注于数字音频芯片领域公司旗下的数字功放IC品牌,2008年开始进入中国市场,ISweek工采网作为其代理商;在国内简称:韩国NF,又被称耐福、耐福NTP功放芯片;国内长虹、TCL、海信、小豹AI音箱、腾讯…

SQL进阶学习

1.[NISACTF 2022]join-us sql报错注入和联合注入 过滤: as IF rand() LEFT by updatesubstring handler union floor benchmark COLUMN UPDATE & sys.schema_auto_increment_columns && 11 database case AND right CAST FLOOR left updatexml DATABA…

selenium 简单案例 <批量下载文件> <网页自动化点击上报>

一、批量下载文件 网页分析 点击跳转到下载页面 from selenium import webdriver import timedef get_link_list():# 创建浏览器对象driver webdriver.Chrome(executable_pathrC:\Users\nlp_1\Desktop\chromedriver\chromedriver-win32\chromedriver.exe)url https://www…

微信报名怎么做_轻松便捷的数字化报名体验

微信报名:轻松便捷的数字化报名体验 在这个数字化时代,微信已经成为我们生活中不可或缺的一部分。它不仅仅是一个社交平台,更是一个功能强大的综合性工具。其中,微信报名功能更是给我们的生活带来了极大的便利。本文将详细介绍微…

Django之cookie和session

文章目录 Cookie的介绍Cookie的由来什么是CookieCookie原理Cookie覆盖浏览器查看Cookie 在Django中操作Cookie设置Cookie查询浏览器携带的Cookie删除Cookie Cookie校验登录sessionSession的由来Session设置查看、更新Session值删除Session值Seesion的其他方法Session的其他配置…

扩展外部eMMC存储

By Toradex胡珊逢 简介 存储器的嵌入式设备中扮演着重要角色,上面不仅安装有操作系统,同时也保存着应用程序和运行日志等。对于存储器如 eMMC,写入的数据量决定其使用寿命,对于有大量日志记录的应用,通常可以选用一个…

cefsharp119.4.30(cef119.4.3,Chromium119.0.6045.159)版本升级体验支持H264及其他多个H264版本

Cefsharp119.4.30,cef119.4.3,Chromium119.0.6045.159 此更新包括一个高优先级安全更新 This update includes a high priority security update. 说明:此版本119.4.3支持H264视频播放(需要联系我),其他版本。.NETFramework 4.6.2 NuGet Gallery | CefSharp.WinForms 119.…

运动规划Motion-Planning随笔

online verification技术 实时安全校验技术:留一手 首先计算能否通过刹车这种方式得到一条安全轨迹,(让速不让道),当刹车有可能碰撞到行人或其他车辆时,则判断变道是否会产生碰撞。如果能变道&#xff0…

「 系统设计 」 为什么要做架构分层?

「 系统设计 」 为什么要做架构分层? 参考&鸣谢 3.设计模式之分层思维:为什么要做代码分层架构? 从零开始学架构(八)分层架构和设计模式 架构模式之分层架构总结 文章目录 「 系统设计 」 为什么要做架构分层&…

IT支持团队的绩效指标和最佳实践

一名员工在远程时因笔记本问题寻求IT支持,尽管他们多次尝试排除故障,但由于缺乏专业知识,最终还是无法访问工作所需的应用程序。这时,他们需要一名专业的 IT 技术人员来指导他们,但他们只能等待有人注意到并回应他们的…

海报设计必备:揭秘5款炙手可热的设计工具

1.即时设计:能实现在线协作的海报设计软件 即时设计作为 2020 年上线的国产设计工具,目前已经有了超百万的注册用户,获得了广大设计师的一致好评。与其他传统海报设计软件相比,即时设计具有这几个优点:一是所有功能都…

Chrome 访问不了项目?10080端口 ERR_UNSAFE_PORT:问题原因 / 解决方案

文章目录 被禁用端口列表解决方法方法一、更换端口 / 使用代理 / 使用域名方法二、对浏览器下手WindowsMac 最近有客户反馈,在chrome浏览器中访问不了项目,其他浏览器都是正常的。 ?奇了怪了,难道客户对chrome做了什么操作&#x…

Docker | Docker入门安装

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏:Docker系列 ✨特色专栏: My…

探索WebStorm 2023 Mac/win:最强大的JavaScript开发工具

在当今的软件开发领域,JavaScript已经成为了一种不可或缺的编程语言。而在众多的JavaScript开发工具中,WebStorm一直以其强大的功能和友好的用户界面脱颖而出。现在,我们迎来了全新的WebStorm 2023版本,它将带给开发者们更加出色的…