EXTJS 中Ajax 应用示例

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了EXTJS 中Ajax 应用示例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

简单的Ext.Ajax. request示例
var requestConfig = {
url :'loginServer.jsp',//请求的服务器地址 params : {userName : 'tom',password : '123'},//请求参数 customer : '自定义属性',//附加属性 callback : function(options,success,response){//回调函数 var msg = ["请求是否成功：","\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,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,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,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"><!-- Ext.onReady(function(){ Ext.Updater.defaults.indicatorText = '<div class="loading-indicator">登陆中....</div>';//设置更新指示器文字 var updater = Ext.get('loginMsg').getUpdater();//得到元素的更新 Ext.get('loginBtn').on('click',login); function login(){ //提交表单，在回调函数中更新页面元素 updater.formUpdate('loginForm','loginServer.jsp'); } }) // --></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"><!-- Ext.onReady(function(){ //将下拉框id顺序存入数组中，以便通过遍历数组级联更新 var lists = ['s1','s2','s3'] //为下拉框绑定change事件的处理函数 Ext.select('select').on('change',select){ //取得下拉框中选中的值 var value = select.options[select.selectedIndex].value; //取得下拉框id var id = select.id; //通过循环的到下拉框id在lists数组中的索引位置 for(var i = 0 ; i < lists.length ; i++){ if(lists[i] == id){ var index = i; } } //取得相邻下拉框id在lists数组中的索引 var nextIndex = index + 1; if(nextIndex >= lists.length){ nextIndex = lists.length - 1; } //移除相邻下拉框及后续下拉框的值 remove(nextIndex); //为相邻下拉框及后续下拉框加载新值 getList(nextIndex,value); }); //通过Ajax方式为下拉框加载数据， function getList(index,value) { Ext.Ajax.request({ url : 'bookServer.jsp',//请求的服务器地址 params : { target : lists[index],value : value },callback : function(options,response){ if(success){ //取得要更新的下拉框 var select = Ext.get(lists[index]); //执行返回字符串，得到数组对象 var array = eval(response.responseText); //记录数组中的第一各种，该值将作为下级下拉框的默认取值条件 var firstValue; for(var i=0 ; i < array.length ; i++){ var o = array[i]; if(i == 0){ firstValue = o.value; } //向下拉框中追加条目 select.appendChild(createOption(o.value,o.name)); } //如果不是最后一个下拉框则继续加载相邻下拉框的数据 if(index < lists.length){ getList(index + 1,firstValue); } } } }) } //根据传入的value和text创建选项 function createOption(value,text) { var opt = document.createElement("option"); opt.setAttribute("value",value); opt.appendChild(document.createTextNode(text)); return opt; } //级联删除下拉框及子下拉框的值 function remove(index){ for(var i = index ; i < lists.length ; i++){ var select = Ext.get(lists[i]).dom; while(select.length>0){ select.options.remove(select.length-1) } } } //默认加载值为1的教学类列表 getList(1,"1"); //默认列表s1的教学类被选中 Ext.get('s1').dom.selectedIndex = 0; }) // --></mce:script> 自定义渲染器+解码json对象+ json式生成表格（综合示例：天气预报） <mce:script type="text/javascript"><!-- Ext.onReady(function(){ //设置更新指示器文字 Ext.Updater.defaults.indicatorText = '<div class="loading-indicator">读取天气信息....</div>'; //得到元素的更新器 var updater = Ext.get('weather').getUpdater(); //自定义渲染器 var weatherRender = function(){ this.render = function(el,callback){ //解码响应字符串，得到对应的json对象 var weaObj = Ext.util.JSON.decode(response.responseText); //利用工具类Ext.DomHelper的overwrite方法生成表格并以覆盖方式更新元素el Ext.DomHelper.overwrite(el,{ tag:'table',children:[ {tag:'tr',children:[ {tag:'td',html:'日期：'},{tag:'td',html:weaObj.date} ]},{tag:'tr',html:'风速：'},html:weaObj.windSpeed} ]},html:'湿度：'},html:weaObj.humidity} ]},html:'最高气温：'},html:weaObj.maxTemp} ]},html:'最底气温：'},html:weaObj.minTemp} ]} ] }); } } //指定自定义渲染器 updater.setRenderer(new weatherRender()); //选择页面中id为select的元素 var select = Ext.get('city'); //绑定change事件 select.on('change',sel){ var cityCode = sel.options[sel.selectedIndex].value; var cityName = sel.options[sel.selectedIndex].text; //调用更新函数,并将选中城市的编码出入更新函数中 updateWeather(cityCode,cityName); }); //定义更新函数 function updateWeather(cityCode,cityName){ updater.update({//调用更新器的update方法，更新页面元素 url : 'weatherServer.jsp',params : {cityCode:cityCode},callback : function(el,options){ //读取天气信息失败，则更新页面元素已显示错误提示 if(success == true){ Ext.get('cityName').update(cityName); }else{ el.update("读取 "+cityName+" 天气信息失败!"); } } }); } //默认读取北京的天气情况 updateWeather('CHXX0008','北京'); }) // --></mce:script> Ext.form.HtmlEditor + Updater更新器 + 延时Ajax任务(综合示例：自动保存编辑器) <mce:script type="text/javascript"><!-- Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; Ext.QuickTips.init();//使用HtmlEditor之前必须初始化提示 var note = new Ext.Panel({ title:'网络记事本',renderTo : 'webNote',frame : true,layout:'fit',tbar : [ { text : '保存',//点击保存按钮即时执行保存操作不进行延时 handler : saveNode },'-','最近保存时间：',Ext.get('saveTime').dom,Ext.get('saveStatus').dom ],items : [ new Ext.form.HtmlEditor({ id : 'content',height : 150,width : 500,fontFamilies : ['宋体','隶书','黑体'],//字体列表 listeners : { //sync事件将在文本发生变化时被触发 sync : editorChange } }) ] }); //取得HtmlEditor组件的引用 var editor = note.findById('content'); //设置更新指示器文字 Ext.Updater.defaults.indicatorText = '<div class="loading-indicator">保存....</div>'; //取得页面中id为saveTime元素的更新器 var timeUpdater = Ext.get('saveTime').getUpdater(); //取得页面中id为saveStatus元素的引用 var saveStatus = Ext.get('saveStatus'); //定义HtmlEditor输入内容发生变化时的处理函数 function editorChange() { //文本变化后延时3000毫秒执行保存操作 task.delay(3000); } //将保存操作转换为一个延时任务 var task = new Ext.util.DelayedTask(saveNode); //定义保存文本内容的函数 function saveNode() { timeUpdater.update({ url : 'noteServer.jsp',method : 'POST',params : { //将文本内容作为参数传递到后台服务器 content : editor.getValue() },options){ if(success == true){ saveStatus.update("<font color='green'>保存成功</font>"); }else{ saveStatus.update("<font color='red'>保存失败</font>"); } } }) } }) // --></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>

原文链接：https://www.f2er.com/ajax/166706.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作