zoukankan      html  css  js  c++  java
  • Vue+ajax的使用小结

    js

    var vue = new Vue({
            el:"#vueid",  
            data:{
                selectById : "",
            },
            methods:{
                yourMethod:function(id){ 
                     $.ajax({
                        type : "POST",
                        url : "selectCsdbById.shtml",
                        data : {
                            id : id,
                        },
                        success : function(data) {
                   var message = $.parseJSON(data);//后台返回的json数据需要转为对象 vue.selectById
    =message;//把后台返回的JSON数据赋给selectById }, error : function(){ alert("错误"); } }); }, updateById:function(){ $.ajax({ type : "POST", url : "updateById.shtml", data : vue.selectById, success : function(data) { alert(data); }, error : function(){ alert("错误"); } }); }, } })

    html

    <div id="vueid">
    <input type="text" name="name" v-model="selectById.name" > //v-model实现数据的双向绑定
    </div>

    注意:使用<a>标签时,必须令href="JavaScript:void(0)",这样做的作用是禁止页面刷新(表示页面不做任何动作),否则vue渲染会失败

    总结:

    使用vue+ajax可以有效的减少页面的刷新,并且不需要拼接html代码,当需要更新表单时,由于v-model的双向绑定,只需要提交相应的对象就行,对象里的数据已经自动替换了。(刚接触VUE,菜鸟一枚,写的不好勿喷!!!同时希望各位大神指出不对的地方!O(∩_∩)O谢谢!!!!)

  • 相关阅读:
    段落某些子段高量
    CSS 知识点
    PHP 表单与音频知识点及使用
    PHP 标签、表格的知识点与超链接的结合使用
    PHP课程第一天知识点
    java ArrayList集合
    java 引用数据类型(类)
    java 方法重载
    java 方法
    java 二维数组
  • 原文地址:https://www.cnblogs.com/Amaris-Lin/p/7081422.html
Copyright © 2011-2022 走看看