https://www.cnblogs.com/uu5666/p/6639829.html
AJAX 是一種用于創建快速動態網頁的技術。
通過在后臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新,用戶體驗非常好。
下面介紹兩種動態加載DropDownList值的方法。
第一種:
View層
12345678910111213141516171819202122232425<select id="funcNum" name="funcNum"></select><script>$(document).ready(function() { showFuncId();}function showFuncId(){ $('#funcNum').empty(); var ciValue = $('#funcNum'); ciValue.append('<option value="">Pls Select</option>'); $.ajax({ url : u, //your actual url type : 'post', dataType : 'json', success : function (opts) { if (opts && opts.length > 0) { var html = []; for (var i = 0; i < opts.length; i++) { html.push('<option value="'+opts[i].id+'">'+opts[i].desc+'</option>'); } ciValue.append(html.join('')); } } }); }</script>
Controller層
123456response.setContentType("application/json"); response.setCharacterEncoding("utf-8"); PrintWriter writer = response.getWriter(); net.sf.json.JSONArray array = JSONArray.fromObject(new ArrayList());//The list that contains actual data,use a new arrayList instead here writer.append(array.toString()); return null;
第二種:
View層
12345678910111213141516171819202122232425<select id="funcNum" name="funcNum"></select><script>$(function(){ $.ajax({ type: 'POST', url:url;//your actual url dataType: 'json', cache: false, async:false, success:function(data) { $('#funcNum').get(0).options.length = 0; $('#funcNum').append('<option value="">Pls Select</option>'); $.each(data, function(i, obj) { var option = $('<option />'); option.val(obj.id); option.text(obj.desc); $('#funcNum').append(option); }); }, error: function() { alert("Error while getting func num results"); } });});</script>
Controller層
123456response.setContentType("application/json"); response.setCharacterEncoding("utf-8"); PrintWriter writer = response.getWriter(); net.sf.json.JSONArray array = JSONArray.fromObject(new ArrayList());//The list that contains actual data,use a new arrayList instead herewriter.append(array.toString()); return null;
Note:
? ?As?JSON format supports the following data types .
1Numberdouble- precision floating-point format in JavaScript2Stringdouble-quoted Unicode with backslash escaping3Booleantrue or false4Arrayan ordered sequence of values5Valueit can be a string, a number, true or false, null etc6Objectan unordered collection of key:value pairs7Whitespacecan be used between any pair of tokens8nullempty
for date value, need add config to?fromObject, core code:
123JsonConfig config = new JsonConfig(); config.registerJsonBeanProcessor(java.sql.Date.class, new JsDateJsonBeanProcessor()); JSONArray array = JSONArray.fromObject(object, config);
- 空白目錄1
- RBAC
- RBAC權限模型[完整]
- 你知道權限管理的RBAC模型嗎?
- rbac 一個用戶對應多個賬號_如何設計一個強大的權限系統
- Postman 快速使用(設置環境變量)
- postman的使用方法詳解!最全面的教程
- Postman常用的幾個功能
- ThinkPHP項目總結
- thinkphp5 遞歸查詢所有子代,查詢上級,并且獲取層級
- PHP原生項目之留言板
- 智慧校園
- PHP如何實現訂單的延時處理詳解
- VUE
- const {data:res} = await login(this.loginForm)
- Vue中的async和await的使用
- PHP實現消息推送(定時輪詢)
- tp5 計算兩個日期之間相差的天數
- 使用jquery的ajax方法獲取下拉列表值
- jQuery實現select下拉框選中數據觸發事件
- SetFocus 方法
- 快來了解下TP6中的超級函數app()!
- PHP socket 服務器框架 workerman
- 程序員如何才能成為獨立開發者?
- PHP 錯誤處理
- php面向對象類中的$this,static,final,const,self及雙冒號 :: 這幾個關鍵字使用方法。
- 小白教你玩轉php的閉包
- 關于TP6項目搭建的坑(多應用模式)
- ThinkPHP6.0 與5.0的差別及坑點
- axios在vue項目中的使用實例詳解
- php中的類、對象、方法是指什么
- 聊一聊PHP的依賴注入(DI) 和 控制反轉(IoC)
- 深入理解控制反轉(IoC)和依賴注入(DI)
- Private,Public,Protected
- ThinkPHP5(目錄,路徑,模式設置,命名空間)
- 在 ThinkPHP6 中使用 Workerman
- 介紹thinkphp lock鎖的使用和例子
- php中_initialize()函數與 __construct()函數的區別說明
- api接口數據-驗證-整理
- api接口數據-驗證-整理【續】
- TP6容易踩得坑【原創】
- TP6的日志怎么能記錄詳細的日志?
- 是否需要模型分層
- PHP面試題 全網最硬核面試題來了 2021年學習面試跳槽必備(一)
- MySQL單表數據量過千萬,采坑優化記錄,完美解決方案
- MySql表分區(根據時間timestamp)
- MySQL大表優化方案
- 閑言碎語
- 數據庫外鍵的使用
- 深入理解thinkphp、laravel等框架中容器概念
- vue做前端,thinkphp6做后臺,項目部署
- 簡單MVC架構的PHP留言本
- TP5里面extend和vendor的區別
- 在mysql數據庫中制作千萬級測試表
- MySQL千萬級的大表要怎么優化
- ThinkPHP關聯模型操作實例分析
- lcobucci/jwt —— 一個輕松生成jwt token的插件
- RESTful API 設計指南
- MySQL如何為表字段添加索引
- ThinkPHP6.0快速開發手冊(案例版)
- tp5 靜態方法和普通方法的區別
- 數據字典功能
- mysql中的數據庫ID主鍵的設置問題
- 基于角色的權限控制(django內置auth體系)
- RBAC系統經典五張表
- 什么是接口文檔,如何寫接口,有什么規范?
- thinkphp5.0自定義驗證器