บทความนี้จัดการรูปแบบลิงก์และปุ่มต่าง ๆ โดยทั่วไป มันสอนวิธีการประมวลผลแบบฟอร์ม JavaScript เนื้อหาเฉพาะมีดังนี้
/** * การประมวลผลแบบฟอร์มทั่วไป js * @author Anthony.chen *//** * การดำเนินการปุ่มกด [btn_action] ข้อมูลลงในรูปแบบ * หากมีใบสั่งแพทย์ให้เรียกใช้สคริปต์ล่วงหน้า */"ใช้อย่างเข้มงวด"; // คำขอ AJAX ทั้งหมดจะถูกซิงโครไนซ์โดยค่าเริ่มต้น var ajax_action_button = function (e) {var btn = $ (this); // เพิ่ม prescript var pre_script; if (pre_script = btn.attr ("pre_script")) {var ret = eval (pre_script); if (ret == false) {return false; }} var btn_action = btn.attr ('ค่า'); if (btn_action) {$ (this) .closest ('ฟอร์ม'). ข้อมูล ('btn_action', {ชื่อ: 'btn_action', ค่า: btn_action}); - /** * อัปเดตข้อมูลฟอร์มพิเศษใน formelement ด้วยองค์ประกอบฟอร์ม, คีย์และค่า */var ajax_update_post_data = ฟังก์ชั่น (formele, k, v) {var form = $ (formele); var post_data = form.data ('post_data'); if (post_data == undefined) {post_data = {}; } if (v == undefined) {ลบ post_data [k]; } else {post_data [k] = v; } form.data ('post_data', post_data); กลับมาจริง;}; /** * ช่องทำเครื่องหมายบูลเป็นช่องทำเครื่องหมายพิเศษซึ่งจำเป็นต้องยกเลิกการเลือกค่า * และโพสต์ด้วยแบบฟอร์ม AJAX แบบฟอร์มอยู่ใน parent */var bool_checkbox = function () {var ipt = $ (นี่); var formele = ipt.closest ("ฟอร์ม"); var _check = ipt.prop ("ตรวจสอบ"); if (_check) {ajax_update_post_data (formele, ipt.attr ('ชื่อ')); } else {ajax_update_post_data (formele, ipt.attr ('ชื่อ'), 'f'); - /** * init หมายเลขสปิน */var spin_number = function () {var spin = $ (this); var config = {lock: true, imageBasePath: '{webPath}/css/images/spin/', btncss: null, txtcss: null, btnclass: 'spin_btn',}; ช่วงเวลา var = spin.attr ('ช่วงเวลา'); if (Interval) {config.interval = Interval; } else {config.interval = 1; } var min = spin.attr ('min'); if (min) {config.min = min; } var max = spin.attr ('max'); if (สูงสุด) {config.max = สูงสุด; } spin.spin (config); กลับมาจริง;}; /** * init อินพุตวันที่ */var date_input = function () {var ipt = $ (this); var config = {ออฟเซ็ต: [4,0], ตัวเลือก: จริง, lang: '{lang}', วันแรก: 1, รูปแบบ: 'yyyy-mm-dd',}; var min = ipt.attr ('min'); if (min) {config.min = min; } ipt.dateInput (config); กลับมาจริง;}; /** * init timepicker */var time_picker = function () {var ipt = $ (this); var config = {}; var step = ipt.attr ("ขั้นตอน"); if (ขั้นตอน) {config.step = step; } ipt.timepicker (config); กลับมาจริง;}; /** * ฟังก์ชั่นโพสต์รูปแบบ AJAX ทั่วไป * หากตั้งค่า BTN_ACTION จากนั้นเพิ่มข้อมูลลงในฟอร์ม * หากตั้งค่า returi จะเปลี่ยนเส้นทางเพื่อส่งคืน * หากตั้งค่าการโหลดซ้ำให้โหลดซ้ำ * แสดงข้อความบล็อก * * แบบฟอร์มจะถูกตรวจสอบ */var ajax_form_post = function (e) {var form = $ (this); var pre_script; if (pre_script = form.attr ("pre_script")) {var ret = eval (pre_script); if (ret == false) {return false; }} var errhint = form.find (". formerror"). ก่อน (); if (errhint.size () == 0) {errhint = $ ("#pageerror"); } errhint.Text (''). ซ่อน (); // ล้างข้อมูลหน้าเว็บ if (! e.isdefaultPrevented ()) {// ซ่อนทั้งหมด. formerror $ .blockui ({ข้อความ: "{__ ('l_processing')}"}); var formarray = form.serializeArray (); var btn_action_data; var btn_action; if (btn_action_data = form.data ('btn_action')) {formarray.push (btn_action_data); Form.removedata ('BTN_Action'); btn_action = btn_action_data.value; } else {btn_action = ''; } console.log ('การกระทำ btn:'+btn_action); // เพิ่มข้อมูลพิเศษ var post_data; if (post_data = form.data ('post_data')) {สำหรับ (var k ใน post_data) {// ถ้า post_data [k] อาร์เรย์ต้องการเพิ่มเติมเพื่อทำ formarray.push ({ชื่อ: k, value: post_data [k]}); } form.removedata ('post_data'); } $ .post (form.attr ('action'), formarray, function (json) {ถ้า ($ (window) .data ('blockui.isblocked') == 1) {$ .UnBlockUi ();} ถ้า (json.code === True) if (json.data) {retdata = json.data; $ .lockui ({ข้อความ: retdata, css: {cursor: 'pointer', padding: '4px', ชายแดน: '3px solid #cc0000',}, Overlaycss: {Cursor: 'Pointer'}}; if (returi = form.attr ('returi')) {window.location = returi; if (typeof (json.data.errmsg) == 'string') {errhint.html (json.data). show (); เคอร์เซอร์: 'ตัวชี้'}}); ค่าไม่มีอินพุตที่ซ่อนอยู่ควรมีการอ้างอิงถึงค่าที่ซ่อนอยู่ // การแสดงข้อความเซิร์ฟเวอร์ไปยัง ref var ele = form.find ("[type = hidden] [name ="+p+"]"); Form.find ("Hidden-Id ="+refid+"]"). attr ("ชื่อ"); json.data [refname] =+msg; E.preventDefault (); } else {errhint.html ("{html :: text (__ ('e_form'))}"). show (); - /****รีเซ็ตอินพุต*/var ajax_post_form_hidden = function () {var form = $ (this); form.find ("[hidden-id]"). แต่ละ (ฟังก์ชัน () {// ล้างข้อความของการอ้างอิง var input = $ (this); var refid = input.attr ("hidden-id"); var field = $ ("#" + refid + ""); $ (นี่); - var validate_hidden_id = ฟังก์ชั่น (อินพุต) {var refid = input.attr ("hidden-id"); var field = $ ("#" + refid + ""); var msg = field.attr ('msg'); if (! msg) {msg = "{__ ('e_not_empty')}"; } return field.val ()? จริง: ผงชูรส; - var data_equals_validate = ฟังก์ชั่น (อินพุต) {ฟิลด์ var; var name = input.attr ("data-equals"); field = this.getInputs (). ตัวกรอง ("[name =" + name + "]"); return input.val () == field.val ()? จริง: [ชื่อ];}; /** * คำขอ AJAX ผ่านลิงก์ * หากตั้งค่าการยืนยันยืนยันก่อนส่งคำขอ * การสนับสนุนการส่งคืนและโหลดซ้ำ * แสดงข้อความบล็อก */var ajax_link_req = function () {var l = $ (นี่); var hint = l.attr ('คำใบ้'); if (คำแนะนำ) {var errhint = $ (l.attr ('คำใบ้')); errhint.text ('') ซ่อน (); } // หากมีการตั้งค่าข้อความยืนยันควรได้รับการยืนยันจากไคลเอนต์ถ้า (l.attr ('ยืนยัน')) {ถ้า (! ยืนยัน (l.attr ('ยืนยัน'))) {return false; }} $ .blockui ({message: "{__ ('l_processing')}"}); var pre_script; if (pre_script = l.attr ("pre_script")) {var ret = eval (pre_script); if (ret == false) {return false; }} var block = l.attr ('block'); if (block! = undefined) {ajaxautounblock = false; } $ .get (l.attr ('href'), ฟังก์ชั่น (json) {ถ้า (json.code == true) {var retdata = "{__ ('l_processed')}!"; var returi; // ถ้าประสบความสำเร็จ if (json.data) {retdata = json.data; window.location.reload (); } else {// $. unblockui (); คืนค่าเท็จ}; /** * รองรับการนำทางฐานปุ่ม * ข้ามไปที่ Href */var btn_nav = function () {var input = $ (this); var href = input.attr ("href"); if (href) {window.location = href; } else {alert ("href ไม่ได้ตั้งค่า"); } return false;}; /** * ปุ่มรองรับฐาน AJAX GET Method Request * สนับสนุนการส่งคืนและโหลดซ้ำ */var btn_req = function () {var input = $ (this); var href = input.attr ("href"); var hint = input.attr ('คำใบ้'); if (คำแนะนำ) {var errhint = $ (คำแนะนำ). first (); if (errhint.size () == 0) {errhint = $ ("#pageerror"); } errhint.Text (''). ซ่อน (); } var block = input.attr ('block'); if (block! = undefined) {ajaxautounblock = false} $ .get (href, function (json) {ถ้า (json.code == true) {var returi; if (returi = input.attr ('returi')) {window.location = returi; window.location.reload (); }); #CC0000 ',}, Overlaycss: {Cursor:' Pointer '}}); คืนค่าเท็จ}; /** * ช่องทำเครื่องหมาย AJAX ทั่วไป * การดำเนินการเริ่มต้นถูกป้องกันและส่งคำขอจริงผ่าน URL */var ajax_checkbox = function () {event.preventDefault (); var action = $ (นี่); var url = action.attr ('url'); var _check = action.prop ("ตรวจสอบ"); console.log (_check); var op; if (_Check) {op = "1"; } else {op = "0"; } $ .get (url + op, ฟังก์ชั่น (json) {ถ้า (json.code == true) {ถ้า (_check) {action.prop ("ตรวจสอบ", จริง);} else {action.prop ("ตรวจสอบ", เท็จ); /** * ครีตรูทพิคลิสต์ */var picklistinit = function () {var _select = $ (นี่); var _hidden_id = _select.attr ('hidden-id'); var _un = _select.attr ('un'); var _lovchildren = _select.data ('lovtree'). c; var _rowValue = _select.data ('RowValue'); $ ("<petion>"). ผนวก ("{__ ('l_select')}"). appendto (_select); สำหรับ (var _kid ใน _lovchildren) {var _lov = _lovchildren [_kid] ['lov']; $ ("<petion>"). val (_lov.lov_id) .append (_lov.v) .attr ('k', _ lov.id) .attr ('is_leaf', _ lov.is_leaf) .appendto (_select); } _select.change (picklistchange); // เลือกรายการถ้า (_rowValue) {_select.find ("[value ="+_ rowValue [0]+"]"). prop ("เลือก", จริง); _select.change (); } return true;}; /** * เลือกรายการเลือก */var picklistChange = function () {var _select = $ (นี่); var _hidden_id = _select.attr ('hidden-id'); var _un = _select.attr ('un'); // ลบ var _lovtree = _select.data ('lovtree'); var _rowValue = _select.data ('RowValue'); _select.nextall (). ลบ (); // นี่คือค่าของปัจจุบันเลือก var _selected = _select.find (': selected'); if (_selected.attr ('is_leaf') == "{db :: t}") {$ ("#"+_ hidden_id) .val (_select.val ()); _SELECT.AFTER ("<img Src = '/s.gif' class = 'sprite_global successimg'/>"); } else {var _val = _select.val (); var _k = _selected.attr ('k'); // รับรายชื่อเด็ก ๆ ถ้า (_lovtree.c [_k] .c == ไม่ได้กำหนด) {return false; } var _c_lovtree = _lovtree.c [_k]; var _c_select = $ ('<elect>'). ข้อมูล ('lovtree', _ c_lovtree) ข้อมูล ('RowValue', _ RowValue) attr ('hidden-id', _ hidden_id) .attr ('un', _ un) attr ('ชื่อ', _ un+'_'+_ k); $ ("<petion>"). ผนวก ("{__ ('l_select')}"). appendto (_c_select); // การสร้างรายการตัวเลือกสำหรับ (var _kid ใน _c_lovtree.c) {var _lov = _c_lovtree.c [_kid] ['lov']; $ ("<petion>"). val (_lov.lov_id) .append (_lov.v) .attr ('k', _ lov.id) .attr ('is_leaf', _ lov.is_leaf) .appendto (_c_select); // แทรกหลังจาก _select.After (_C_SELECT); // onchange} _c_select.change (picklistchange); if (_rowValue) {_c_select.find ("[value ="+_ rowValue [_k]+"]"). prop ("เลือก", จริง); _c_select.change (); - var lookup_new = function () {var lookup = $ (this); var pre_script; if (pre_script = lookup.attr ("pre_script")) {var ret = eval (pre_script); if (ret == false) {return false; }} var url = lookup.attr ("url"); if (! url) {แจ้งเตือน ('url ไม่ตั้งค่า'); กลับเท็จ; } var height = lookup.attr ('h'); if (! ความสูง) {ความสูง = 600; } var width = lookup.attr ('w'); if (! width) {width = 800; } window.open (url, "pselect", "scrollbars = ใช่, menubar = ไม่, ความสูง ="+ความสูง+", ความกว้าง ="+width+", resizable = ใช่, toolbar = no, ตำแหน่ง = ไม่, สถานะ = no"); กลับเท็จ; - /** * ค้นหาค่าใหม่สำหรับค่าที่ซ่อนอยู่ */var parent_lookup = function () {var lookup = $ (นี่); var pid = opener. $ ("#" + lookup.attr ('PID')); if (! pid.length) {Alert (lookup.attr ('pid')+ "ไม่พบ"); กลับเท็จ; } var pname = opener. $ ("#" + lookup.attr ('pname')); if (! pname.length) {Alert (lookup.attr ('pname')+ "ไม่พบ"); กลับเท็จ; } var aft_script; // เรียกใช้ปัจจุบันหลังจากสคริปต์ถ้า (aft_script = lookup.attr ('aft_script')) {window.eval (aft_script); } pid.val ($ (นี่) .attr ("refid")); // เฉพาะการดำเนินการจากตัวเปิดเท่านั้นที่สามารถเรียกการเปลี่ยนแปลงเหตุการณ์ pid.change (); pname.val ($ (นี่) .attr ("refvalue")); pname.change (); // parent after_script ถ้า (aft_script = pname.attr ('aft_script')) {opener.window.eval (aft_script); } if (aft_script = pid.attr ('aft_script')) {opener.window.eval (aft_script); } window.close ();}; /** * การอัปโหลดเริ่มต้นเสร็จสิ้น * /// var uploadcomplete = function (เหตุการณ์, id, filename, responsejson) {var uploadcomplete = function (e, data) {// เพื่อถูกแทนที่ด้วย jQuery uploader var _fileupload = $ (นี้); //console.log(_fileupload); //console.log(data.result); if (_fileUpload.attr ('reload')! = undefined) {window.location.reload (); - /** * ฟังก์ชั่นการอัปโหลดไฟล์แอตทริบิวต์ต่อไปนี้เพื่อควบคุมการดำเนินการของการอัปโหลด * 'จุดสิ้นสุด' เป็น ULLOAD URL * 'SID' เป็นรหัสเซสชัน * 'เสร็จสมบูรณ์' เป็นทางเลือกในการกำหนดค่าการอัพโหลดที่กำหนดเองฟังก์ชั่นที่สมบูรณ์ */var genericUpload = function (dom) {var endpointUrl = $ (นี้) var sid = $ (นี่) .attr ("sid"); var sid = $ (นี่) .attr ("sid"); var completefunc = 'uploadcomplete'; // การตั้งค่าฟังก์ชั่นที่สมบูรณ์แบบกำหนดเอง var cuscomplete = $ (นี่) .attr ('เสร็จสมบูรณ์'); if (cuscomplete) {completeFunc = cuscomplete; } $ (นี่) .fileUpload ({url: endpointurl, autoupload: จริง, ข้อมูลประเภท: 'json', formData: [{'sessionid': sid}], paramname: 'filedata',}). /** * ข้อผิดพลาดที่จับคู่กับอินพุต * สามารถระบุข้อผิดพลาดที่จับคู่ได้เท่านั้นที่นี่ */var Advance_validate = ฟังก์ชั่น (ข้อผิดพลาดเหตุการณ์) {var conf = this.getConf (); // loop errors $ .each (ข้อผิดพลาด, ฟังก์ชั่น (ดัชนี, ข้อผิดพลาด) {// เพิ่มคลาสข้อผิดพลาดลงในอินพุตองค์ประกอบ dom var อินพุต = ข้อผิดพลาด input; input.addClass (conf.errorClass); // รับที่จับไปยังข้อผิดพลาด container var msg = input.data ("msg.el"); {// msg = $ (conf.message) .addclass (conf.messageclass) .insertafter (อินพุต); 'hidden'}) ค้นหา ("span"). ลบ (); msg.parent (). width ()) {msg.add (msg.find ("span")); var advange_inputs = function (อินพุต) {var conf = this.getConf (); inputs.removeclass (conf.errorclass) .each (ฟังก์ชั่น () {var msg = $ (นี่) .data ("msg.el"); ถ้า (msg) {msg.hide (); msg.parent (). RemoveClass ("colerror");}}); if ($ (". colerror"). size () == 0) {var form = $ (this); var errhint = form.find (". formerror"). ก่อน (); if (errhint.size () == 0) {errhint = $ ("#pageerror"); errhint.text ('') ซ่อน (); - /** * เมื่อชื่อ Refname ถูกเลือก */var checkall = function () {var check = $ (this); var refname = check.attr ('refname'); if (refname) {ถ้า (check.prop ("ตรวจสอบ")) {$ ("อินพุต [ชื่อ*= '"+refname+"']"). prop ("ตรวจสอบ", จริง); } else {$ ("input [name*= '"+refname+"']"). prop ("ตรวจสอบ", false); }} var refclass = check.attr ('refclass'); if (refclass) {ถ้า (check.prop ("ตรวจสอบ")) {$ ("อินพุต"+refclass) .prop ("ตรวจสอบ", จริง); } else {$ ("input."+refclass) .prop ("ตรวจสอบ", false); - /** * SETUP COCKENG แบบอ่านอย่างเดียว */var readOnlyCheck = function (e) {E.PreventDefault (); คืนค่าเท็จ}; /** * เลือกรายการปิดใช้งาน */var readOnlySelect = function () {$ (นี่) .prop ("ปิดใช้งาน", จริง); - $ (เอกสาร) .ready (function () {$ (เอกสาร) .AjaxStart (ฟังก์ชั่น () {// ทำความสะอาดข้อผิดพลาดระดับหน้าคำขอ AJAX $ ("#PageERROR") ข้อความ ('). ซ่อน (); // ทำความสะอาดข้อผิดพลาดในรูปแบบ (" $ .lockui ({ข้อความ: "__ ('l_processing')}"});}}); $. unblockui (); url = 'settings.url); ถ้า (ajaxsynchronized) {ถ้า ($ (window) .data (' blockui.isblocked ') == 1) {ถ้า (Ajaxautounblock) {$ .Ulblockui (); ajaxsynchronized = true;}}); returi;}}}); $ .tools.validator.fn ("[hidden-id]", validate_hidden_id); $ (". AJAX_FORM_POST") แต่ละคน (AJAX_POST_FORM_HIVEND); // การตรวจสอบความถูกต้องของไคลเอ็นต์สำหรับ ID ที่ซ่อนอยู่ (". require_validate"). Validator ({lang: '{lang}', เอฟเฟกต์: 'Advanced'}); $ ("button.btn_action") คลิก (ajax_action_button); $ (". checkall"). คลิก (checkall); "{__ ('e_email')}", ': number': "{__ ('e_decimal')}", ': url': "{__ ('e_url')}", '[max]': '{__ (' e_max_length ') '[จำเป็น]': "{__ ('e_not_empty')}",});});ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนที่จะควบคุมการดำเนินการประมวลผลแบบฟอร์ม JavaScript ขอบคุณสำหรับการอ่าน