ajax直接赋值到表单,jQuery插件:Ajax将Json数据自动绑定到Form表单

jQuery注册方法的两种常用方式:

//jQuery静态方法注册

//调用方法$.a1()

$.extend({

a1: function () {

console.log("a1");

}

})

//jQuery插件方法注册

//调用方法$("#col").b1()

$.fn.extend({

b1: function () {

console.log("b1");

}

})

将ajax返回的数据自动绑定到form表单中的插件,常用语修改等业务,源码如下:

/*!

* Json To Form v0.0.1

* Requires jQuery v1.7.2 or later

* Author:taiyonghai

*/

; (function ($) {

/*

flagName:标识绑定字段元素的属性,如:

data-bind是寻找绑定字段的属性:

注意区分大小写,与对象名相同即可

jsonData:json数据对象,根据其中的属性名,绑定到对应属性名的字段上

*/

var JsonBind = function (ele, opt) {

this.$element = $(ele),

this.defaults = {

flagName: 'name'

},

/*

当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。

同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。

将一个新的空对象做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,

这样做的好处是所有值被合并到这个空对象上,保护了插件里面的默认值。

*/

this.options = $.extend({}, this.defaults, opt)

};

//取值方法,可以单独以实体属性名进行取值,如:UserName,也可以复合实体取值,如:UserInfo.UserName,注意区分大小写

JsonBind.getValue = function (key, data) {

if (key.split('.').length == 1) {

return data[key];

}

else if (key.split('.').length == 2) {

var keys = key.split('.');

//数据有值时获取

if (data[keys[0]]) {

//先判断数组后判断object,因为数组也是object

if (Array.isArray(data[keys[0]])) {

return data[keys[0]][0][keys[1]];

}

else if (typeof (data[keys[0]]) == 'object') {

return data[keys[0]][keys[1]];

}

else {

return console.error("对象类型错误,无法解析");

}

}

}

else {

return console.error("实体对象层级过多,最多支持两级,如:test.name");

}

};

JsonBind.prototype = {

bind: function () {

if (this.options.jsonData) {

if (this.options.jsonData == 'string') {

this.options.jsonData = JSON.parse(this.options.jsonData);

}

}

//获得触发事件的元素

var dom = this.$element;

var name = this.options.flagName;

var data = this.options.jsonData;

//遍历元素内所有含有name属性的元素

dom.find("[" + name + "]").each(function () {

//取出json中对应name属性的值

var key = $.trim($(this).attr(name));

var val = JsonBind.getValue(key, data);

if (val != '') {

//检查当前元素标签,并根据不同标签进行赋值操作

if ($(this).is("input")) {

//检查当前元素类型,并根据不同类型进行赋值操作

switch ($(this).attr("type")) {

case "radio":

$(dom).find("input:radio[" + name + "='" + key + "'][value='" + val + "']").prop("checked", true);

break;

case "checkbox":

$(dom).find("input:checkbox[" + name + "='" + key + "'][value='" + val + "']").prop("checked", true);

//$(this).siblings("[value='" + val + "']").prop("checked", true);

break;

default:

$(this).val(val);

break;

}

}

else {

//如:select、textarea

$(this).val(val);

}

}

});

}

};

//将方法增加到jQuery扩展方法中

$.fn.extend({

dataBind: function (options) {

var jsBind = new JsonBind(this, options);

jsBind.bind();

}

});

})(jQuery);

调用方式:

//flagName是可选参数,默认是元素的name属性

$("#menuForm").dataBind({

jsonData:JSON.parse(data),

flagName:'name'

});

复合实体调用方式

var data = {

Tag: 'aaa',

FunctionName: 'bbb',

Url: 'ccc',

OrderBy: '111'

};

$("#menuForm").dataBind({

flagName: 'name',

jsonData: { menu: data, menu1: data, menu2: data, menu3: data }

});

变量声明,var $abc=$("#test"),这里面的$abc我们认为它是一个jQuery对象,所以前面加上$符

通过JQuery的$.ajax()把 json 数据 post 给 PHP

通过JQuery的$.ajax()把 json 数据 post 给 PHP时的几种情况: 无法在PHP中通过$_POST 以及 $_REQUEST 获取json数据,即 $json = $_POST[ ...

Atitit vue.js 把ajax数据 绑定到form表单

Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

Ajax提交数据后,清空form表单

按钮不同,页面相同,还需要显示的数据不同,这里会由于页面的缓存问题,导致,每次点开这个页面显示的数据相同. 这不是我们想要的.这就需要清楚表单数据了. 如下: $('#myform')[0].rese ...

fsLayuiPlugin数据表格弹出form表单说明

fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

jquery实现ajax,返回json数据

jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback ...

jquery插件-table转Json数据插件

使 用开源插件Table-to-json: 官方地址:http://lightswitch05.github.io/table-to-json/ 功能说明:将js对象table转换成javascrip ...

html、css/bootStrap、js/Jquery、ajax与json数据交互总结

设计个个人网站,利用CSS.JavaScript.HTML5.jQuery库和AJAX等 实现网站各功能模块,下面介绍我设计的网站各大功能模块:  个人简历模块: 包涵个人基本信息(利用CSS的flo ...

Jquery请求Ajax的json数据

获得单个json对象 $.getJSON("test.js", { name: "John", time: "2pm" }, funct ...

及时从数据库中取得数据填放进Form表单的多选框中

#写上以下代码就不用担心数据库添加了数据而不能及时获取了 def __init__(self, *args, **kwargs): #每次创建Form1对象时执行init方法 super(Form1, ...

随机推荐

hibernate的映射类型

hibernate的映射类型 hibernate MySQL映射类型 1.Hibernate的映射类型 hibernate mysql映射类型 Hibernate 映射类型 Java 类型 标准 SQ ...

简单的VC++ ADO帮助类

首先看头文件 #pragma once #import "c:\Program Files\Common Files\System\ado\msado15.dll" no_name ...

wpf数据绑定

前段:

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值