EXTJS 中Ajax 應用示例

時間 2019-11-24

標籤 extjs ajax 應用示例欄目 Ajax 简体版

原文原文鏈接

簡單的Ext.Ajax. request示例 var requestConfig = { url :'loginServer.jsp',//請求的服務器地址 params : {userName : 'tom',password : '123'},//請求參數 customer : '自定義屬性',//附加屬性 callback : function(options,success,response){//回調函數 var msg = ["請求是否成功：" ,success,"\n", "服務器返回值：",response.responseText, "本地自定義屬性：",options.customer]; alert(msg.join('')); } } Ext.Ajax.request(requestConfig);//發送請求 Ext.Ajax表單提交示例 var requestConfig = { url :'loginServer.jsp',//請求的服務器地址 form : 'loginForm',//指定要提交的表單id callback : function(options,success,response){//回調函數 var msg = ["請求是否成功：" ,success,"\n", "服務器返回值：",response.responseText]; alert(msg.join('')); } } Ext.Ajax.request(requestConfig);//發送請求 Ext.Ajax. request提交xml數據 function login(){ var requestConfig = { url :'loginServerXml.jsp',//請求的服務器地址 xmlData : getXml(),//發送xml文檔對象 callback : function(options,success,response){//回調函數 var msg = ["請求是否成功：" ,success,"\n", "服務器返回值：",response.responseText]; alert(msg.join('')); } } Ext.Ajax.request(requestConfig);//發送請求 } //生成xml文檔對象 function getXml(){ var name = document.forms['loginForm'].userName.value; var pwd = document.forms['loginForm'].password.value; var dom = new ActiveXObject("msxml2.DOMDocument"); var header = dom.createProcessingInstruction("xml", "version='1.0'"); dom.appendChild(header); var root = dom.createElement("loginInfo"); var userName = dom.createElement("userName"); userName.text = name; var password = dom.createElement("password"); password.text = pwd; root.appendChild(userName); root.appendChild(password); dom.appendChild(root); return dom; } xt.Ajax. request提交json數據 function login(){ var requestConfig = { url :'loginServerJson.jsp',//請求的服務器地址 jsonData : getJson(),//發送json對象 callback : function(options,success,response){//回調函數 var msg = ["請求是否成功：" ,success,"\n", "服務器返回值：",response.responseText]; alert(msg.join('')); } } Ext.Ajax.request(requestConfig);//發送請求 } //生成json對象 function getJson(){ var name = document.forms['loginForm'].userName.value; var pwd = document.forms['loginForm'].password.value; var jsonObj = { userName : name, password : pwd } return jsonObj; } Ext.Updater.update div內容更新器示例 var updater = Ext.get('content-div').getUpdater();//獲得元素的更新器 var btns = Ext.select('input');//選擇頁面中的全部input組件 btns.addListener('click',function(e,b){//成批綁定click事件 update('9-5-'+b.value+'.html');//調用更新函數 }); //定義更新函數 function update(url){ updater.update({//調用更新器的update方法，更新頁面元素 url : url }); } 定義渲染器更新頁面元素示例 Ext.Updater.defaults.showLoadIndicator = false;//不顯示更新指示器 var updater = Ext.get('content-div').getUpdater();//獲得元素的更新器 var cusRender = function(){//自定義渲染器 this.render = function(el, response, updateManager, callback){ var time = el.query('input')[0]; time.value = response.responseText; } } updater.setRenderer(new cusRender());//指定自定義渲染器 var btns = Ext.get('updateBtn');//選擇頁面中id爲updateBtn的元素 btns.on('click',function(){//綁定click事件 update();//調用更新函數 }); //定義更新函數 function update(){ updater.update({//調用更新器的update方法，更新頁面元素 url : 'timeServer.jsp' }); } 自動定時更新頁面元素示例 Ext.Updater.defaults.showLoadIndicator = false;//不顯示更新指示器 var updater = Ext.get('serverTime').getUpdater();//獲得元素的更新 Ext.get('startAutoBtn').on('click',startAutoUpdate); Ext.get('stopAutoBtn').on('click',stopAutoUpdate); function startAutoUpdate(){ //開始定時自動刷新 updater.startAutoRefresh(1,'timeServer.jsp'); } function stopAutoUpdate(){ //中止定時自動刷新 updater.stopAutoRefresh(); } 提交表單更新頁面元素示例 <mce:script type="text/javascript"></mce:script> </HEAD> <BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;"> <form id='loginForm'> 用戶名：<input name = 'userName' type='text'> 密碼：<input name = 'password' type='password'> <input type='button' value='登錄' id='loginBtn'> </form> 狀態：<span id='loginMsg'></span> </BODY> </HTML> 多級聯動菜單 <mce:script type="text/javascript"></mce:script> 自定義渲染器+解碼json對象+ json式生成表格（綜合示例：天氣預報） <mce:script type="text/javascript"></mce:script> Ext.form.HtmlEditor + Updater更新器 + 延時Ajax任務(綜合示例：自動保存編輯器) <mce:script type="text/javascript"></mce:script> </HEAD> <BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;"> <div id='webNote' style="width:522"/> <div id='saveTime'/> <div id='saveStatus'/> </BODY> </HTML>

相關文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<