用ajax从后台取值不是什么有技术含量的活计,把后台取来的值绑定到Vue对象上也不算难,但每一次向后台拿数据的时候都得写上这么一段代码就十分痛苦了。

于是我写了这么一小段js代码,能够自己根据url去后台拿数据,拿来之后自动创建Vue对象并绑定到页面上,整个过程一步到位,岂不美哉!

/**
* 这是一个数据绑定插件,binding()方法接受两个参数,并通过ajax取值然后直接绑定到html元素上<br>
* @author lille 创建于 2019-3-29
*/
var obj = this;
/**
*
* @param elname html元素,通常是一个字符串格式的css选择器,比如:"#t_table"
* @param ajaxpa <br>
* 包含ajax所需的url、data、type,比如:<br>
* <pre>
* {
* url:"getpeoplelist",
* data:{},
* type:"get"
* }
* </pre>
* @returns
*/
function binding(elname, ajaxpa) {
if (typeof (obj[elname]) == "undefined") {
obj[elname] = new Vue({
el : elname,
data : {
data : {}
}
})
obj.callback = function() {
return function(result) {
for ( var key in result) {
Vue.set(obj[elname].data, key, result[key]);
}
}
}
}
$.ajax({
url : ajaxpa.url,
data : ajaxpa.data,
type : ajaxpa.type,
dataType : "json",
success : obj.callback()
})
}

binding.js

在html页面这样调用:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table id="t_table2">
<tr>
<td>{{data.name}}</td>
</tr>
</table>
<script type="text/javascript" src="static/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="static/vue.min.js"></script>
<script type="text/javascript" src="static/binding.js"></script>
<script type="text/javascript">
binding("#t_table2", {
url : "people",
data : {},
type : "get"
})
</script>
</body>
</html>

NewFile.html

后台代码部分更是简单:

package red.lille.entity;

public class People {
private String name = "张三"; public People() {
} public People(String name) {
// TODO Auto-generated constructor stub
if (name != null) {
this.name=name;
}
} public String getName() {
return name;
} public void setName(String name) {
this.name = name;
}
}

People.java

package red.lille.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody; import red.lille.entity.People; @Controller
public class AjaxController { @ResponseBody
@RequestMapping("/people")
public People getPeople(@RequestParam(value="name",required=false)String name) {
return new People(name);
}
}

AjaxController.java

最终实现的效果:

话说回来,只看html页面的话还真挺像jsp的EL表达式的

js从后台取值并绑定到元素上的更多相关文章

  1. Webform动态创建删除行及后台取值

    开发过程中经常碰到许多不确定事项,所以有时需要动态生成新的记录,如图所示,点击新增时新增一条参考记录,点击删除时则删除该记录:第一步,创建一个表格,用hidden记录当前最大行数,添加时则只需复制模板 ...

  2. 前台改变asp button控件的值,后台取值没有改变的问题

    前台: <asp:Button ID="btnEdit" Style="margin-left: 600px;" runat="server&q ...

  3. chrome 和IE 上传的文件,在net 后台取值Request.Form.Files[0].FileName 的不同

    chrome 和IE 上传的文件,在net 后台取值Request.Form.Files[0].FileName 的不同 chrome 获得的是不含路径的纯文件名 IE获得的是含路径的文件名

  4. js对div取值与赋值

    js对div取值与赋值 因为JavaScript运行时,id="test1" 的那个div元素可能还没解析和加载,js加载是有顺序的.只需把 js 整个搬到 后面即可. 还有一个特 ...

  5. CYQ.Data 快速开发之UI(赋值、取值、绑定)原理

    昨夜园子猴子问了几个我CYQ.Data使用的小问题,经过简单解答后,他表示“妈妈再也不用担心我的学习",并于事后以资鼓励,希望这框架越走越好. 除了技术上的交流,双方在生活,S上面的问题上也 ...

  6. omDialog设计造成控件无法后台取值

    http://ui.operamasks.org/website/homepage.html 使用服务端控件,前台进行赋值,但后台确无法取值. 不仅如此,如果里面放置了一个ASp:Button同样无法 ...

  7. .net TxetBox控件设置ReadOnly=True后台取值问题

    1.为TxetBox添加onfocus=this.blur()进行模拟 2.通过 Request.From["TextBox"].Trim()取值; 3.后台CS文件设置TextB ...

  8. asp.net textbox控件readonly为true时,后台取值的问题

    如题,在后台通过textbox.Text方式取值为空,不论你默认值是否是空,如想要获得,需通过request.Form[""]的方式.

  9. ASP.NET页面使用JQuery EasyUI生成Dialog后台取值为空

    原因: JQuery EasyUI生成Dialog后原来的文档结构发生了变化,原本在form里的内容被移动form外面,提交到后台后就没有办法取值了. 解决办法: 在生成Dialog后将它append ...

随机推荐

  1. windows server2012如何开启mysql远程登录

    开发的首要任务就是要搭建起自己的服务器,下面主要是我这搭建记录下 我的各种环境 服务器为Windows server2012  安装的MySQL数据的版本是5.6.10 ,64位.当然了版本对于安装没 ...

  2. UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 12: ordinal not in range(128)问题解决

    今天在验证字符串是否包含的时候报错:UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 12: ordinal n ...

  3. Session分布式共享 = Session + Redis + Nginx(转)

    出处:http://www.cnblogs.com/newP/p/6518918.html 一.Session 1.Session 介绍 我相信,搞Web开发的对Session一定再熟悉不过了,所以我 ...

  4. Spring框架总结(四)

    对象依赖关系 Spring中,如何给对象的属性赋值?  [DI, 依赖注入] 1) 通过构造函数 2) 通过set方法给属性注入值 3) p名称空间 4)自动装配(了解) 5) 注解 一.对象属性赋值 ...

  5. 从零开始学习前端JAVASCRIPT — 8、JavaScript基础COOKIE

    1:通信协议 定义:通信协议是指双方实体完成通信或服务所必须遵循的规则和约定.协议定义了数据单元使用的格式,信息单元应该包含的信息与含义,连接方式,信息发送和接收的时序,从而确保网络中数据顺利地传送到 ...

  6. java Calender类

    1.Calender和Date相互转化 public static void main(String[] args) { // TODO Auto-generated method stub Cale ...

  7. 洛谷P4178 Tree (点分治)

    题目描述 给你一棵TREE,以及这棵树上边的距离.问有多少对点它们两者间的距离小于等于K 输入输出格式 输入格式:   N(n<=40000) 接下来n-1行边描述管道,按照题目中写的输入 接下 ...

  8. EF中三大开发模式之DB First,Model First,Code First以及在Production Environment中的抉择

    一:ef中的三种开发方式 1. db first... db放在第一位,在我们开发之前必须要有完整的database,实际开发中用到最多的... <1> DBset集合的单复数... db ...

  9. [转载].NET开发常用的10条实用代码

    1.读取操作系统和CLR的版本 OperatingSystem os = System.Environment.OSVersion; Console.WriteLine(“Platform: {0}” ...

  10. uwsgi怎么启动停止

    ## 二.启动停止重启 uWSGI 通过 xxx.ini 启动后会在相同目录下生成一个 xxx.pid 的文件,里面只有一行内容是 uWSGI 的主进程的进程号. uWSGI 启动:uwsgi --i ...