EXTJS 中Ajax 应用示例

最新推荐文章于 2021-08-05 13:08:51 发布

原创最新推荐文章于 2021-08-05 13:08:51 发布 · 5.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #extjs #function #callback #服务器 #html

EXTJS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍ExtJS中AJAX请求与Updater组件的多种使用方法，包括基本的请求配置、表单提交、XML和JSON数据发送、定时更新页面元素等，并通过实例展示了如何结合自定义渲染器和事件处理来实现复杂功能。

简单的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>