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>

EXTJS 中Ajax 应用示例的更多相关文章

  1. HTML5、Select下拉框右边加图标的实现代码(增进用户体验)

    这篇文章主要介绍了HTML5、Select下拉框右边加图标的实现代码，深度美化页面增进用户体验效果,需要的朋友可以参考下

  2. 在Sierra上,Brew安装错误单独使用Xcode是不够的

    我正在尝试使用HomeBrewv1.3.8在运行xCodev9.1的MacOSXSerrav10.12.6上安装软件包.安装和错误是然后我运行命令表示软件更新服务器无法使用命令行工具包.我进入xCode,它表明安装了命令行工具.任何帮助将非常感激.西奥解决方法我去了AppleDeveloper网站并直接下载了命令行工具dmg.首先需要设置Apple帐户.命令行工具可在以下位置找到–https://

  3. iOS 10 Safari问题在DOM中不再包含元素

    使用此链接,您可以重现该错误.https://jsfiddle.net/pw7e2j3q/如果您点击元素并从dom中删除它,然后单击链接测试.你应该看到旧的元素弹出选择.是否有一些黑客来解决这个问题？解决方法我能够重现这个问题.问题是,每当您尝试删除其更改事件上的选择框时,iOS10都无法正确解除对选择框的绑定.要解决此问题,您需要将代码更改事件代码放在具有一些超时

  4. iOS Chrome上的HTML SELECT不显示“完成”选项

    我们在iOS上的Chrome中使用UI呈现时遇到问题,特别是HTMLSELECTDropDown元素.例：使用Safari,当您点击SELECT时,屏幕底部会打开一个微调器–您可以点击完成以选择您的选择并返回到表单.但是,当您在iOS上的Chrome中加载完全相同的页面时,不会显示“完成”.用户必须选择他们的选择,然后点击UI上的其他位置返回到表单.非常不直观,用户感觉好像SELECT没有用.有人有解决方案吗？

  5. 安装命令行工具Xcode 5

    我已经尝试过并尝试过但我仍然无法解决问题.我正在尝试安装PebbleSDK1.12并安装Xcode5的命令行工具.每次我在终端尝试xcode-select–install时,我都会收到“无法安装软件,因为它目前在软件更新服务器中不可用”我试图重新安装Xcode,但是没有用.当我进入Xcode-preferences-downloads时,没有命令行工具的部分.我也试过从开发者网站安装它们但无济于事.下载看起来正确,然后我去Xcode看到首选项,并没有列出命令行工具.你们都能提出什么建议吗？

  6. ios – OpenCV构建问题,找不到ext/atomicity.h

    我得到编译器错误抱怨在构建包含OpenCV的项目时.环境是针对iOS的Xcode4.5.它为模拟器编译良好,但在为设备构建时失败.这是错误文本：我正在使用opencv2.framework,使用指令here构建cmake.解决方法默认情况下,XCode4.5使用libc(支持C11的LLVMC标准库)生成要构建的新项目.但OpenCV期望针对GNUlibstd

  7. ios – xcodebuild相当于Xcode的“产品&gt;构建&gt;测试”

    我正在尝试编写一个脚本,将iOS应用程序提交给AppThwack(一个“真正的设备”UI测试服务).他们的指导是使用XcodeGUI,并使用BuildFor>Xcode产品菜单中的测试选项.这是有效的,但我无法将其转换为xcodebuild等效项.更一般地说,我们如何确定Xcode传递给xcodebuild的什么参数(假设它使用该工具).解决方法现在可以从Xcode8开始(在写作时在beta版).

  8. xcode – 在REPL中创建目标Swift AST上下文时出错((null))

    在这里,我已经看到有关这个错误的几个的问题,但是没有一个提出的解决方案适用于我.这是我得到的这可能是也可能没有发生在我发出一些我不记得的命令之后.奇怪的是,如果我卸载Xcode,REPL开始正常工作.但是,如果我重新安装Xcode,错误就会回来.我在Xcode7.2.1,顺便说一句.思考？

  9. IOS设备问题与HTML表单输入(type = text)

    所以我有一个HTML登录表单与两个字段：电子邮件和密码.这些可以在除iOS设备之外的任何设备的浏览器上轻松填充.在IOS领域几乎不能关注焦点,一旦焦点,键盘弹出,我开始打字,但实际上没有填充.我已经尝试过Chrome和safari,仍然得到相同的结果.字段保持黑色.Bellow是我的格式如何格式化：请帮助！

  10. 我在哪里可以获得XCode的10.6 SDK

    我有SNowLeopard的测试版,我从DVD上安装了XCode,但它只安装了10.5和10.4SDK.我需要针对10.6构建以验证Apple的错误.解决方法ADCMemberSite.登录并选择下载.如果您是Premier或Select会员,那应该是您可以找到它的地方.如果您不是Premier或Select会员,您将看不到它.

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部