用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. 反射机制：获取class的方法

  2. /var/run/yum.pid被锁定

    当执行yum update时出现: /var/run/yum.pid已被锁定,PID为1610的另一个程序正在运行. 另外一个程序锁定了yum:等待它退出...... 解决办法 rm -f /var/ ...

  3. org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'deptDao_a' defined in class path resource [beansAndHibernate.xml]: Cannot resolve reference to bean 'sessionFact

    Error creating bean with name 'deptDao_a' defined in class path 因为更改了类的名字,所以其setter方法没有更改,需要 private ...

  4. 第02章 查询DSL进阶

    本章内容 Lucene默认评分公式是如何工作的. 什么是查询重写. 查询二次评分是如何工作的. 如何在单次请求中实现批量准实时读取操作. 如何在单次请求中发送多个查询. 如何对包括嵌套文档和多值字段的 ...

  5. 编写高质量代码改善C#程序的157个建议——建议119：不要使用自己的加密算法

    建议119:不要使用自己的加密算法 很多人认为自己写的加密算法才是安全的,因为该算法只有“自己知道”.很遗憾,这是大错特错. 首先,我们不是秘密学专家,如果我们随随便便写个算法就称得上是加密算法的话, ...

  6. 编写高质量代码改善C#程序的157个建议——建议101：使用扩展方法，向现有类型“添加”方法

    建议101:使用扩展方法,向现有类型“添加”方法 考虑如何让一个sealed类型具备新的行为.以往我们会创建一个包装器类,然后为其添加方法,而这看上去一点儿也不优雅.我们也许会考虑修改设计,直接修改s ...

  7. Android--iOS抓取崩溃日志

    android闪退获取日志方法: 1.下载adb工具包 2.注意事项 请确保电脑上只连接了一台手机设备(最好只连接一条USB线),同时确保手机已开启USB调试模式(可通过手机助手查看连接状态) 3.A ...

  8. CSS与jQuery补漏

    1.position属性 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. ...

  9. java（一）IntelliJ和eclipse环境下的Hello World

    1. IntelliJ环境下的Hello World 1. 启动IntelliJ IDE,选择File->New->Project 选择Java如果没有出现Project SDK,则选择N ...

  10. 在JS中，将text框中数据格式化，根据不同的小数位数，格式化成对应的XXX,XXX,XXX.XX(2位小数) 或者XXX,XXX,XXX(0位小数)

    //在JS中,将text框中数据格式化,根据不同的小数位数,格式化成对应的XXX,XXX,XXX.XX(2位小数) 或者XXX,XXX,XXX(0位小数) function formatNum(num ...