vue写ajax访问springboot后台发送和接收数据
vue写ajax访问springboot后台发送和接收数据
- 遇到的问题
- 一、没有引入js,以前一直使用公司封装后的,现在自己建立项目忘记引入很多js。
- 二、JS的顺序不能变,在用 this.$http.get发送请求的时候,因为js的顺序变了,失败过(未找到原因,怀疑函数重 名被覆盖)
- 三、springboot的方法头不知道该加那些。
- 源代码
- 四、html文件
- 五、java文件
遇到的问题
一、没有引入js,以前一直使用公司封装后的,现在自己建立项目忘记引入很多js。
二、JS的顺序不能变,在用 this.$http.get发送请求的时候,因为js的顺序变了,失败过(未找到原因,怀疑函数重 名被覆盖)
三、springboot的方法头不知道该加那些。
例如:Model m, @RequestParam(required = true, defaultValue = “1”) Integer id, HttpServletRequest request
这里的model封装数据,request接收数据,
源代码
四、html文件
<!DOCTYPE html>
<html>
<head><title>My first Vue app</title><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script><script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app"><input type="button" @click="helloA()" value="$http.get"><input type="button" @click="helloB()" value="$http.post"><input type="button" @click="helloC()" value="axios.get"><input type="button" @click="helloD()" value="axios.post"></div><script type = "text/javascript">var vm = new Vue({el: '#app',data: {},methods: {helloA: function () {this.$http.get('http://localhost:8089/login/retrieve.do?id=99').then(function(res){alert(res.body[0].name);},function(){console.log('请求失败处理');});},helloB: function () {this.$http.post('http://localhost:8089/login/retrieve.do?id=99',{name:"菜鸟教程",url:"http://www.runoob.com",kk:"ffff"},{emulateJSON:true}).then(function(res){alert(res.body[0].name);},function(res){console.log(res.status);});},helloC: function () {axios.get('http://localhost:8089/login/retrieve.do?id=99').then(response => (this.info = response)).catch(function (error) { // 请求失败处理console.log(error);});},helloD: function () {axios.post('http://localhost:8089/login/retrieve.do?id=99',{name:"菜鸟教程",url:"http://www.runoob.com",kk:"ffff"},{emulateJSON:true}).then(response => (this.info = response)).catch(function (error) { // 请求失败处理console.log(error);});}}
}) </script>
</body>
</html>
五、java文件
package com.springboot.controller;import java.util.ArrayList;
import java.util.List;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;import com.springboot.bean.Account;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServletRequest;@Controller
public class IndexController {@RequestMapping({"/init"})public String init(Model m, @RequestParam(required = true, defaultValue = "1") Integer id) {return "account";}@ResponseBody@RequestMapping({"/retrieve"})public List retrieve(Model m, @RequestParam(required = true, defaultValue = "1") Integer id, HttpServletRequest request) {List<Account> list = new ArrayList<Account>();String ll=request.getParameter("kk");String lld=request.getParameter("name");list.add(new Account("KangKang", "康康", "e10adc3949ba59abbe56e", "超级管理员", "17777777777"));list.add(new Account("Mike", "麦克", "e10adc3949ba59abbe56e", "管理员", "13444444444"));list.add(new Account("Jane", "简", "e10adc3949ba59abbe56e", "运维人员", "18666666666"));list.add(new Account("Maria", "玛利亚", "e10adc3949ba59abbe56e", "清算人员", "19999999999"));m.addAttribute("accountList", list);return list;}}
vue写ajax访问springboot后台发送和接收数据相关推荐
- spring返回数据使用ajax,【spring 后台跳转前台】使用ajax访问的后台,后台正常执行,返回数据,但是不能进入前台的ajax回调函数中...
问题1: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中 问题展示: 问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...
- ASP.NET前台table通过Ajax获取绑定后台查询的json数据
上一篇<ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据>写了前台提交数据后台保存到数据库,数据处理以后用户肯定要查询.接下来就写一个前台table通过ajax J ...
- 使用DatagramSocket发送、接收数据(Socket之UDP套接字)
2019独角兽企业重金招聘Python工程师标准>>> 创建一个DatagramSocket实例,并将该对象绑定到指定IP地址.指定端口. 通过上面三个构造器中的任意一个构造器即可创 ...
- 25. Python语言 Web 开发 之 Socket 编程 · 第一章 UDP发送与接收数据
UDP发送与接收数据 本章主题 关键词 前导: 计算机网络的发展及基础网络概念 两台电脑的通信 IP地址介绍及分类 IP地址与IP协议 Windows 和 Linux 查看网卡信息 IP地址分类 以太 ...
- 网络——在网络上发送,接收数据
问题 创建并加入一个网络会话是一回事,但如果不能发送或接收任何数据那么网络会话有什么用呢? 解决方案 当玩家连接到会话时,你可以在一个PacketWriter流中存储所有想要发送的数据.完成这个操作后 ...
- 手把手教你Android手机与BLE终端通信--连接,发送和接收数据
假设你还没有看上一篇 手把手教你Android手机与BLE终端通信--搜索,你就先看看吧,由于这一篇要接着讲搜索到蓝牙后的连接.和连接后的发送和接收数据. 评论里有非常多人问假设一条信息特别长,怎么不 ...
- socket简介和udp网络程序-发送、接收数据
socket简介 不同电脑上的进程之间如何通信 首要解决的问题是如何唯一标识一个进程,否则通信无从谈起! 在1台电脑上可以通过进程号(PID)来唯一标识一个进程,但是在网络中这是行不通的. 其实TCP ...
- STM32L152RE实现串口发送及接收数据
本文主要讲解用keil软件实现USART串口发送及接收数据,默认读者keil环境已经配好,且头文件已正确引入,如出现编译错误以及st-link下载问题,请自行百度解决. 串口发送和接收数据是一件看起来 ...
- Android-Ble蓝牙开发Demo示例–扫描,连接,发送和接收数据
万物互联的物联网时代的已经来临,ble蓝牙开发在其中扮演着举重若轻的角色.最近刚好闲一点,抽时间梳理下这块的知识点. 涉及ble蓝牙通讯的客户端(开启.扫描.连接.发送和接收数据.分包解包)和服务端( ...
最新文章
- 将python文件打包成exe可运行文件
- 让你的AIR程序脱离AIR环境运行
- Matlab 预防性维修,使用 MATLAB 进行预测性维护简介
- 信息学奥赛一本通 2038:【例5.5】最大数位置
- 如何从菜鸟成长为高手!
- MySQL : mysql连接报 Communications link failure
- Android:通过Intent传递对象、Parcelable
- 顺应大数据时代创新社会治理模式
- [渝粤教育] 广东-国家-开放大学 21秋期末考试市场营销10256k2
- 建站百科|企业网站logo设计指南
- Typora文字变红
- ArcGIS三大文件格式解析
- 盘点大数据开发常用的四种编程语言
- 人为什么活着?这个观点绝对让你耳目一新
- 英语学习打卡-美国语文1-4
- 一文了解Python流程控制
- 好用的chrome插件之Octotree
- BDD之单元测试(一):BDD出现的背景
- 记一次行云数据库(CirroData) 分区 创建/修改/添加数据等
- 简单c/c++笔试题
热门文章
- dell服务器维修主板,崴泰BGA返修台可以返修dell服务器主板吗?dell主板返修步骤...
- 退出再登录能回到原先页面功能
- Windows下Hook API技术
- slf4j Failed to load class “org.slf4j.impl.StaticLoggerBinder“ 错误 源码解析
- 异性相吸题目解决方法
- Scrum是敏捷开发中的一种形式,它提供了一系列流程、方法、工具,旨在帮助项目团队保持高效、可持续地交付价值
- OPPO A3 线刷兼救砖_解账户锁_纯净刷机包_教程
- 大数据技术入门之分布式处理、并行处理和MapReduce
- 雷鸣的游戏人生(三) --- 灰色回忆
- python—接口调用