springboot项目前端ajax01

news/2024/11/29 4:40:59/

在我现在看来,ajax就好像是一个快速反应的内存,有很多的时候,ajax是有数据的。这个很好。

01.ajax函数在js中写的,

function doGetActivitys(){
debugger
//1.定义请求参数
var params=“”;
//2.定义请求url (前面加/为绝对路径,不加为相对路径)
var url=“doFindActivitys”;
//3.发送异步请求获取服务端资源并更新到页面
//doAjaxGet(url,params,callback);
doAjaxGet(url,params,function(result){
//在浏览器控制台输出result,这里的result是形式参数
console.log(result)
});

回调函数callback,相当于是在商场预留的手机号码,是只要服务器响应了ajax,那么服务器会根据回调函数把数据传输到某一个ajax请求,从而实现类ajax请求

//定义ajax的get请求函数
function doAjaxGet(url,params,callback){
debugger
//1.创建XmlHttpRequest对象,从前端接受数据
var xhr=new XMLHttpRequest();
//2.设置状态监听,监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立,请求是否在处理,响应是否已产生)
xhr.onreadystatechange=function(){//callback(回调函数)
//基于xhr对象获取的通讯状态,对响应数据进行处理,在正常情况下会使用回调函数进行处理,readystate是读取状态的意思,4表示结束了,status是响应状态,响应状态是200表示成功了,404表示没有找到。
if(xhr.readyState4&&xhr.status200){//500表示服务端出错了
//服务端响应的结果会传递给XHR对象,我们可以借助responseText(json串)获取响应结果
callback(xhr.responseText);
}
}
//3.创建与服务端的连接,这里的url+?+params,就和get方式很像,open的第一个参数是get,用get方式提交参数(显式)
xhr.open(“GET”,url+“?”+params,true);//true表示异步
//4.发送请求
xhr.send(null); //Get请求,send方法不传内容
//5.对响应结果进行处理(在回调函数中处理)。
}

在这里插入图片描述
第一步:基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步:注册XHR对象状态监听,通过回调函数处理状态信息。
第三步:创建与服务端的连接
第四步:发送异步请求实现与服务端的通讯
第五步:通过回调(callback)函数,获得响应结果并进行数据更新.(非阻塞)

需要说明的是controller类中,需要在每一个具体的方法中,如果需要返回的是一个实体(会用json字符串的),添加注解@ResponseBody //告诉spring mvc将返回值转换成json格式字符串。

在前端的时候,url会去记录这个返回值是json的方法,获得数据。

@RequestMapping("doFindActivitys")
@ResponseBody //告诉spring mvc将返回值转换成json格式字符串
public List<Activity> doFindActivitys() {List<Activity> list = ActivityService.findAll();System.out.println(list);return list;//{"key1":value1,"key2":value2,"key3":value3}
}

http://www.ppmy.cn/news/39205.html

相关文章

IDEA已经导入了jar包 还是提示找不到类(解决!!!)

项目代码check到本地,导入到idea中后,编译的时候很多类都报错了,打开发现有些框架中的类找不到。 报错:xxxx程序包找不到,xxxx类找不到 类似我框起来的地方是 报红的,utils这个包都找不到 解决方法: 网上1: 项目是依赖了这个jar包的,打开项目配置,查看依赖树: id…

linux服务器安装tomcat详细步骤

1、先下载linux版本的tomcat压缩包&#xff0c;示例压缩包为&#xff1a;apache-tomcat-8.0.53.tar.gz&#xff08;推荐tomcat8版本&#xff09; 下载地址&#xff1a;Index of /dist/tomcat/tomcat-8/v8.0.53/bin 2、 使用WinSCP工具&#xff08;工具无限制&#xff0c;只要能…

动力节点王鹤SpringBoot3笔记——远程访问@HttpExchange[SpringBoot 3]

目录 第六章 远程访问HttpExchange[SpringBoot 3] 6.1.1.1 准备工作&#xff1a; 6.1.1.2 声明式HTTP远程服务 6.1.1.3 Http服务接口的方法定义 6.1.1.4 组合使用注解 6.1.1.5 Java Record 6.1.1.6 定制HTTP请求服务 第六章 远程访问HttpExchange[SpringBoot 3]…

汽车网络管理的意义和分类

网络管理的意义&#xff1a; 1. 工作状态协同&#xff1a; 在任意多ECU节点网络工作时&#xff0c;对同一网络ECU的通信状态做统一的管理&#xff0c;保证各个ECU节点可以在条件满足的时候进入低功耗模式 2. 信息交互协同&#xff1a; 可以根据NM报文状态判定特定ECU的运行状态…

多线程(七)线程池

线程池&#xff0c;又是一个池&#xff0c;我们已经见识过很多池了&#xff1a; 数据库连接池、字符串常量池.... 那我们这个线程池又是个啥呢&#xff1f; 我们提前将线程准备好&#xff0c;需要用的时候直接取&#xff0c;不需要用的时候&#xff0c;在直接还回去。 这样…

重磅发布!百分点科技正式发布数据科学基础平台DeepMatrix

‍数据智能产业创新服务媒体——聚焦数智 改变商业3月30日&#xff0c;由百分点科技主办的“2023数据科学峰会”在北京金隅智造工场科技秀场成功召开。此次大会以“数据进阶”为主题&#xff0c;邀请权威专家学者以科学视角和全球视野解读数据科学、数字政府建设及数字化业务&…

RouterBootUI组件库(Vue3+TS+Scss/Sass+Vite+Lerna+Rollup)

RouterBootUI组件库&#xff08;Vue3TSScss/SassViteLernaRollup&#xff09;RouterBootUI组件库&#xff08;Vue3TSScss/SassViteLernaRollup&#xff09;前言技术选项参考官网项目地址项目构建1. 安装Lerna2.lerna初始化文件夹3.配置lerna文件lerna.jsonpackage.json4.安装依…

从零开始实现一个C++高性能服务器框架----线程模块

此项目是根据sylar框架实现&#xff0c;是从零开始重写sylar&#xff0c;也是对sylar丰富与完善 项目地址&#xff1a;https://gitee.com/lzhiqiang1999/server-framework 简介 项目介绍&#xff1a;实现了一个基于协程的服务器框架&#xff0c;支持多线程、多协程协同调度&am…