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>

相关文章

相关标签/搜索

每日一句

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

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<