jQuery 플러그 인: Ajax 는 JSon 데 이 터 를 Form 폼 에 자동 으로 연결 합 니 다.
//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 대상 이 라 고 생각 하기 때문에 앞 에 $부 호 를 추가 합 니 다.
다음으로 전송:https://www.cnblogs.com/taiyonghai/p/7504618.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.