EXTJS 中Ajax 应用示例 - Oejia 技术栈,企业方案分享、Odoo顾问
Oejia 技术栈
主页
分享
微信模块
索引
关于
订阅
编辑器
登录
EXTJS 中Ajax 应用示例
Oejia
on 2016-01-17 13:27:09
[TOC] ###简单的Ext.Ajax. request示例 ```js 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表单提交示例 ```js 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数据 ```js 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; } ``` ### Ext.Ajax. request提交json数据 ```js 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内容更新器示例 ```js 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 }); } ``` ### 定义渲染器更新页面元素示例 ```js 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' }); } ``` ### 自动定时更新页面元素示例 ```js 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(); } ``` ### 提交表单更新页面元素示例 ```js
用户名:
密 码:
状 态: