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数据绑定

前段: