JavaScript는 컴파일을 실행할 필요가 없으므로 JavaScript에 의해 구축 된 응용 프로그램을 매우 유연하게 만듭니다. 사용자와 상호 작용하기 위해 UI를 생성하고 제어하는 데 필요에 따라 서버에서 JavaScript 스크립트를 동적으로로드 할 수 있습니다. 다음은 Ext JS의 조합으로 서버에서 JS 스크립트를 동적으로로드하여 동적으로 양식을 작성하는 방법을 설명합니다.
1 프로젝트 구조 :
프로젝트 구조는 다음과 같습니다. GetJsui General Handler는 데이터베이스 테이블에서 UI 구성을 가져 와서 클라이언트로 반환하는 데 사용됩니다. HTML 파일 및 JS 라이브러리는 컨텐츠 폴더에 사용됩니다.
2 데이터베이스 테이블 구조
다음 SQL을 사용하여 JavaScriptContent 필드가 특정 JS 스크립트를 저장하는 MSSQL에서 테이블을 만들 수 있습니다.
테이블 [dbo]. [ext_dynamic_form] ([ext_dynamic_form] [[id] [nvarchar] (50) null, [uniname] [nvarchar] [nvarchar] (50) null, [javascriptContent] [nvarchar] (4000) null, [memo] [nvarchar] (200) null, 제한적 [pk_ext_dynamic _form] district_dynamic _form] [주요한]
생성 후 데이터를 초기화 할 수 있습니다.
생성 후 데이터를 초기화 할 수 있습니다.
4 GetJsui 프로그래밍
System.collections.generic; System.linq 사용; system.web 사용; cmclouddbhelper 사용; namespace extjs6.services {/// <summary> /// 저자 : jackwangcumt /// </summary> public void process {httpconxt j) "";; context.response.contentType = "Text/Plain"; //context.response.contentType = "Text/JavaScript"; cmcdataaccess da = 새로운 cmcdataaccess (); 문자열 sqlforjs = "ext_dynamic_form에서 id = '006'"에서 select *; System.data.datatable dt = da.getDatatable (sqlforjs); if (dt! = null) {if (dt.rows.count == 1) {js = dt.rows [0] [ "javaScriptContent"]. toString (); }} // utf-8 context.response.contentEncoding = system.text.encoding.utf8; context.response.write (js); } public bool isreusable {get {return false; }}}}5 기본 인터페이스 HTML
<html> <head> <title> 서버 JavaScript에서 양식을 동적으로 생성 </title> <!-라이브러리 파일-> <meta http-equiv = "x-ua-cattible"content = "ie = edge"charset = "utf-8"> <meta name = "viewport"content = "width = device-width, maximume scale = 1, scale-scale = 1. user-scalable = no "> <script type ="text/javaScript "src ="ext6/ext-all-debug.js "> </script> <link rel ="stylesheet "type ="text/css "href ="ext6/classic/classic/classic/classic type "> 텍스트/텍스트" "텍스트/javaScript" src = "ext6/classic/classic/Theme-Triton/cham if (script.readystate) {// script.onreadyStateChange = function () {if (script.readystate = "|| script.readystate =="complete ") {script.onreadyStateChange = null; 콜백 (); }}; } else {// 기타 script.onload = function () {callback (); }; } script.src = url; document.getElementsByTagName ( "Head") [0] .AppendChild (스크립트); } // 서버 기능에서 js 텍스트로드로드로드 스크립트 rc (js, 콜백) {var script = document.createElement ( "script") script.type = "text/javaScript"; //script.async = true; if (script.readystate) {// script.onreadyStateChange = function () {if (script.readystate = "|| script.readystate =="complete ") {script.onreadyStateChange = null; 콜백 (); }}; } else {// 기타 script.onload = function () {callback (); }; } script.text = js; Console.log (스크립트); document.getElementsByTagName ( "Head") [0] .AppendChild (스크립트); // 콜백 (); } // ext js 6 ext.onready (function () {//https://www.sencha.com/forum/showthread.php?268193-how-to-load-content-dynamically-for-tabpanel = ext.widget ( 'Panel', {renderto : 800, width : 800, eourout : [{제목 : 'West', Region : 'West', width : 200, Collapse : True}, {xtype : 'tabpanel', region : 'center', 항목 : [{제목 : '첫 번째 탭', 'tab01',}, {title : 'sec }]}]}; // ajax config var reqconfig = {url : '../services :'get ', callback : 옵션, 성공, 응답) {' ', 성공 :', data : '); loadscriptsrc (responsetext, function () {ext.msg.alert ( "로드 된 JS", "로드 된 JS"); var gp = ext.create ( "gpview"); //loadscript("dynamicloadjs2.js ", function () {// ext.msg.alert ("loaded "); // var gp = ext.create ("gpview "); // //console.log(gp); // //gp.body.renderto(pmain); // // ext.componentQuery.query ( '#tab01') [0] .Add ({// html : // //}); </script> </head> <body> </body> </html>6 실행
이런 식으로 주요 프레임 워크를 만들고 메뉴 및 권한과 같은 일반 시스템을 구축 할 수 있습니다. 데이터베이스에서 메뉴 및 UI를 구성함으로써 응용 프로그램을 동적으로 확장 할 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.