学习vue结合ajax查询出后台数据

第一步：先获取后台的API

这里已经写好了后台，API是bookAction_getAllBook

第二步：创建jsp文件并导入vue.js和JQuery.js

第三步：写上Model

第四步：写上View

这时页面上的显示的数据都是写死的，这时候就需要写上ajax通过它来获取到后台的数据并把它显示出来

第五步：ajax

先把model定义成一个带有bookList的空数组以便于存放后台获取的json数据

这时候要注意，这里有两个方法，我推荐使用的是方法二，因为方法一有一个不好的地方就是在页面成功的时候他会不停的new Vue，

但你多次访问页面的时候会造成new出很多个Vue，这样会侵占过多的内存，而方法二是单独独立出来的，不管怎么访问都是只new出

一个Vue，这样大大节省了内存的空间;

别忘了调用函数......

最后结果是：

这时还没结束，我们还要做一个刷新按钮，模仿点击时在不刷新页面的情况下刷新出新的数据

首先先定义一个按钮，并且给它绑定点击事件调用ajax

效果是：

当我点击图片按钮时则调用getData函数重新运行一边ajax方法达到重新获取后台的数据

这时我们要往后台添加一条数据

这时我们的前端页面数据还没显示出来....

当点击图片按钮时...

以上是每天笔记

　　　　　　　　^_^ Yeah....

时间： 2024-10-09 09:56:15

学习vue结合ajax查询出后台数据的相关文章

Java语言实现通过Ajax抓取后台数据及图片

1.Java语言实现通过Ajax抓取后台数据及图片信息 1.1数据库设计 create table picture( pic_id number not null, pic_name varchar(200)not null, pic_url varchar2(200) not null, pic_descp varchar2(200) not null, pic_price varchar2(200) not null ) insert into picture values(1 ,'小米5s

sql语句中查询出的数据添加一列，并且添加默认值

查询出数据,并且要添加一列表中都不存在的数据,且这一列的值都是相等的 select app_id,app_secret from wx_ticket group by app_id; 查询出的数据是 app_id | expires_in --------------------+------------ wxeec89cdf2d435d10 | 7200 wxeec89cdf2d435d10 | 7200 wx9b7bfb5f59df5009 | 7200 wx9b7bfb5f59df5009

jquery绑定的事件对ajax刷新出的数据不生效，on可能受jquery版本影响

问题:jquery绑定的事件对ajax刷新出的数据不生效 方法:可以用 jquery 里面的 on 和  delegate 预绑定父元素就可以触发的. 注意:某些限制下,个人用的是jquery 1.4.2版本,还不能更新到 1.7版本,on 绑定是报错的,用 delegate 可以的. on对jquery 看网上资料是需要 1.7以后版本才支持,具体没试验. 案例: 搜索新数据,调用choic.php 将key传过去获取搜索内容返回到arcz里面.将 arcz 里面新刷新出来的选中的 复选框 一

ajax请求得到后台数据，前台页面不用拼接 “字符串和HTML表格标签”，使用方便模板然后clone，显示表格

<%@page import="java.util.ArrayList"%><%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib uri="htt

ajax请求到后台数据，前台不用拼接字符串，一样显示到页面

<%@page import="java.util.ArrayList"%><%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib uri="htt

ElasticSearch学习问题记录——nested查询不到数据

通过代码创建了索引名称为demoindex,索引类型为school,以下是索引类型的数据映射结构: { "state": "open", "settings": { "index.number_of_replicas": "1", "index.number_of_shards": "5", "index.version.created": &qu

关于上传文件 非ajax提交 得到后台数据问题

<form name="configForm" id="configForm" method="post" action="" > .......... </form> 根据id获得表单数据然后发送ajax请求,获得后台返回数据,处理数据,完美. 但是如果需要上传文件, <tr> <td class="fontSize">请选择文件:</td> &

关于用bootstrap显示查询的后台数据

PrintWriter pw = response.getWriter(); pw.println(sb); pw.flush(); 由于用bootstrap查询数据,页面需要自身返回bootstrap数据,所以后台forward到了前台页面,前台的页面需要用一个接收页面. 1,页面a 填入需要查询的数据,把页面a的数据封装或者在地址栏encodeURI到页面b; 2,页面b接收到页面a的查询参数,在页面b中写bootstrap表格,url 参数 data数据就是页面a的数据,拿到后台查询后,用

在ASP.NET MVC中利用Aspose.cells 将查询出的数据导出为excel，并在浏览器中下载。

正题前的唠叨 本人是才出来工作不久的小白菜一颗,技术很一般,总是会有遇到一些很简单的问题却不知道怎么做,这些问题可能是之前解决过的.发现这个问题,想着提升一下自己的技术水平,将一些学的新的'好'东西记录下来,一是加深印象:二是以后可以作为参考:三是希望博友们可以提出不足和可以优化的地方,一起讨论. 这个是我去一家公司没多久,让我做的小功能,主要是导出excel并在浏览器下载下来. 但是会有不同的细微的需求差别. 第一次发博客,有描述不清楚的地方还请见谅,希望各位多多指点. 进入正题 简单的需求描