extjs6的Ext.Ajax.request中怎么跳转到其他js页面

时间: 2023-05-19 13:02:24 浏览: 81
您可以使用Ext.Ajax.request中的success回调函数来实现页面跳转。在success回调函数中,您可以使用window.location.href属性来跳转到其他页面。以下是一个示例代码: Ext.Ajax.request({ url: 'your_url', success: function(response){ //跳转到其他页面 window.location.href = 'other_page.html'; } });
相关问题

extjs6的Ext.Ajax.request中怎么跳转到其他页面

在Ext.Ajax.request中跳转到其他页面可以使用Ext.dom.Helper的append方法将返回的HTML代码插入到当前页面中,然后使用window.location.href跳转到目标页面。具体代码如下: Ext.Ajax.request({ url: 'targetPage.html', success: function(response){ Ext.dom.Helper.append(document.body, response.responseText); window.location.href = 'targetPage.html'; } });

extjs实现登录页ajax请求的代码

以下是 extjs 实现登录页 ajax 请求的代码示例: ``` Ext.Ajax.request({ url: 'login.php', method: 'POST', params: { username: 'myusername', password: 'mypassword' }, success: function(response){ var text = response.responseText; // process server response here }, failure: function(response){ var text = response.responseText; // process server response here } }); ``` 以上代码中,我们使用 Ext.Ajax.request 方法来发送一个 POST 请求到 login.php 页面,同时传递了用户名和密码参数。在请求成功或失败后,我们可以通过 success 和 failure 回调函数来处理服务器返回的响应数据。

相关推荐

以下是一个使用ExtJS 6调用电脑摄像头实现拍照录像且保存照片,保存录像的例子。需要注意的是,实现这个例子需要一定的前端开发和后端上传等技术,因此涉及的功能较多,需要具备一定的相关技能方能实现。 前端代码: Ext.define('MyApp.view.main.Main', { extend: 'Ext.panel.Panel', xtype: 'app-main', layout: 'border', items: [{ region: 'west', xtype: 'panel', title: 'Photos', width: 200, split: true, layout: 'fit', items: [{ xtype: 'dataview', store: 'Photos', tpl: '<tpl for=".">
{name}
</tpl>', itemSelector: 'div.thumb-wrap', listeners: { itemclick: function(view, record) { var img = Ext.getCmp('photo'); img.setSrc(record.get('url')); } } }] },{ region: 'center', xtype: 'panel', title: 'Camera', layout: 'fit', items: [{ xtype: 'image', id: 'photo', src: '/resources/images/nophoto.png', style: 'border: 5px solid silver', alt: 'Photo' }], tools: [{ type: 'camera', handler: 'onCameraClick' },{ type: 'videocam', handler: 'onVideoClick' }] }] }); 在这个页面中,我们定义了一个dataview用于展示已保存的照片,以及一个展示当前选中照片的image,另外还添加了两个工具按钮用于拍照和录像。 我们在控制器中实现这两个工具按钮的功能。在这个例子中,我们通过发送Ajax请求调用后端API实现拍照和录像,并将结果保存到服务器上。 控制器代码: Ext.define('MyApp.view.main.MainController', { extend: 'Ext.app.ViewController', alias: 'controller.main', onCameraClick: function() { Ext.Ajax.request({ url: '/take_photo', params: { format: 'jpeg', width: 800, height: 600 }, success: function(response) { var data = Ext.decode(response.responseText); if (data.success) { Ext.getStore('Photos').add({ name: data.filename, url: data.url }); var img = Ext.getCmp('photo'); img.setSrc(data.url); } else { Ext.Msg.alert('Error', data.message); } }, failure: function(response) { Ext.Msg.alert('Error', response.statusText); } }); }, onVideoClick: function() { this.startRecording(); }, startRecording: function() { var _this = this; navigator.mediaDevices.getUserMedia({video: true, audio: true}) .then(function(stream) { var video = _this.getView().down('video'); if (Ext.isChrome) { video.srcObject = stream; } else { video.dom.src = URL.createObjectURL(stream); } _this.mediaRecorder = new MediaRecorder(stream); _this.mediaRecorder.start(); _this.mediaRecorder.ondataavailable = function(e) { var url = URL.createObjectURL(e.data); var filename = 'recording_' + (new Date()).getTime() + '.webm'; _this.saveRecording(url, filename); }; }) .catch(function(err) { console.log('Error: ', err.message); }); }, saveRecording: function(url, filename) { var _this = this; var file = new File([url], filename, { type: 'video/webm' }); var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function() { var base64data = reader.result; Ext.Ajax.request({ url: '/save_recording', params: { data: base64data, filename: filename }, success: function(response) { var data = Ext.decode(response.responseText); if (data.success) { var img = Ext.getCmp('photo'); img.setSrc(data.url); } else { Ext.Msg.alert('Error', data.message); } }, failure: function(response) { Ext.Msg.alert('Error', response.statusText); } }); }; } }); 在这个控制器中,我们定义了两个点击事件,分别用于拍照和录像。在拍照事件中,我们调用后端API/take_photo来获取照片,并将结果保存到服务器上。如果API调用成功,则将照片添加到数据视图中并显示在照片预览区域中。 在录像事件中,我们通过getUserMedia方法请求用户允许访问电脑的摄像头和麦克风,并开始录像。我们使用MediaRecorder对象来录制视频并将其保存到浏览器中。在录制完成后,我们调用后端API/save_recording来保存录像,并将结果显示在照片预览区域中。 后端代码: 在后端代码中,我们需要实现两个API:/take_photo用于拍摄照片,/save_recording用于保存录像。这些API的实现因服务器不同具体实现方式也不同。以下代码仅仅给出了示例代码: import java.io.File; import java.io.FileOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; @RequestMapping("/") @ResponseBody public class MainController { @RequestMapping(value = "/take_photo", method = RequestMethod.GET) public Object takePhoto(HttpServletRequest request, HttpServletResponse response) { String format = request.getParameter("format"); int width = Integer.parseInt(request.getParameter("width")); int height = Integer.parseInt(request.getParameter("height")); try { String filename = "photo_" + (new Date()).getTime() + "." + format; BufferedImage image = new Robot().createScreenCapture(new Rectangle(Toolkit.getDefaultToolkit().getScreenSize())); BufferedImage scaled = Scalr.resize(image, width, height); File file = new File("/path/to/photo", filename); ImageIO.write(scaled, format, file); Map<String, Object> data = new HashMap<>(); data.put("success", true); data.put("filename", filename); data.put("url", "/path/to/photo/" + filename); return data; } catch (Exception e) { Map<String, Object> data = new HashMap<>(); data.put("success", false); data.put("message", e.getMessage()); return data; } } @RequestMapping(value = "/save_recording", method = RequestMethod.POST) public Object saveRecording(HttpServletRequest request, HttpServletResponse response, MultipartFile file) { String data = request.getParameter("data"); String filename = request.getParameter("filename"); try { File outputFile = new File("/path/to/recording", filename); FileOutputStream output = new FileOutputStream(outputFile); byte[] bytes = Base64.getDecoder().decode(data.replaceAll(".*?base64,", "")); output.write(bytes); output.flush(); output.close(); Map<String, Object> data = new HashMap<>(); data.put("success", true); data.put("url", "/path/to/recording/" + filename); return data; } catch (Exception e) { Map<String, Object> data = new HashMap<>(); data.put("success", false); data.put("message", e.getMessage()); return data; } } } 在这里,我们假设拍照API通过Robot类截屏并将结果保存为BufferedImage类型的图片,然后使用Scalr类将图片缩放到指定大小,最后将图片保存到服务器的/path/to/photo目录中。保存录像API将基于Base64编码的视频数据解码并写入到文件中,同时将文件保存到服务器的/path/to/recording目录中。 需要注意的是,这些示例代码并没有导入所需的依赖库,也没有进行安全验证等重要细节处理,使用时需要根据具体情况进行相应的扩展和修改。 通过该程序,您可以使用Ext JS 6调用电脑摄像头实现拍照录像且保存照片,保存录像。借助于前端和后端技术,您可以实现更为丰富的功能和交互体验,例如添加照片编辑、分享等功能,扩展应用场景和提升用户体验。
Ext.NET 是一款基于 ExtJS 和 ASP.NET 开发框架的强大 Web 应用程序开发工具。在使用 Ext.NET 进行 Web 应用程序开发过程中,经常需要实现弹窗穿参数的功能。弹窗穿参数,就是在弹窗页面中传递参数。其中,POST 方法是一种非常常见的实现方式。 在使用 Ext.NET 中实现弹窗穿参数功能时,首先需要创建一个弹窗页面。该弹窗页面可以使用 Ext.NET 自带的窗口组件,例如 Ext.NET 的 Window、Form、LinkButton 等组件都可以实现弹窗功能。然后,在传递参数时,我们可以通过POST方法将数据传递给弹窗页面。 具体实现过程如下: 1、在传递数据的页面(例如主页面)定义一个带有参数的 URL(统一资源定位符,即网页地址),并使用POST方法提交数据。代码示例为: Ext.Ajax.request({ url: '弹窗页面地址.aspx?id=' + record.data.id, method: 'POST', params: { name: record.data.name, age: record.data.age }, success: function (response) { // 处理返回的结果 } }); 其中,record 表示主页面上选择的数据记录。 2、在弹窗页面中获取参数。我们可以使用 C# 的 Request 对象来获取传递过来的参数,具体代码如下: var id = Request.QueryString["id"]; var name = Request.Form["name"]; var age = Request.Form["age"]; 其中,QueryString 是获取 URL 中的参数,而Form 是获取 POST 提交的参数。 3、在弹窗页面中使用获取到的参数。获取到参数后,我们可以通过所需的方式来使用它们。例如,我们可以将名称和年龄显示在弹窗页面的文本框中。代码示例为: var txtName = new TextField() { ID = "txtName", FieldLabel = "名称", Value = name }; var txtAge = new TextField() { ID = "txtAge", FieldLabel = "年龄", Value = age }; 通过以上步骤,我们就可以很方便地实现 Ext.NET 弹窗传递参数的功能。值得注意的是,POST 方法提交数据是一种相对较安全、可靠的传递数据方式,并且可以避免URL 中的敏感信息。因此,在进行网页开发的过程中,我们应该尽量使用 POST 方法来传递数据。
以下是一个完整的示例,用ExtJS 6.5编写,它演示了如何在Grid中编辑数据,并使用Ajax将更改保存到后端。 在这个例子中,我们将创建一个向后端服务器发送请求并接收响应的PHP脚本。它应该返回一个JSON编码的数组,我们将用来填充Grid数据。 PHP文件 fetchdata.php: php <?php // 模拟从服务器获取数据 $data = array( array('id'=>1, 'name'=>'张三', 'age'=>26), array('id'=>2, 'name'=>'李四', 'age'=>32), array('id'=>3, 'name'=>'王五', 'age'=>45), array('id'=>4, 'name'=>'赵六', 'age'=>18), array('id'=>5, 'name'=>'钱七', 'age'=>40) ); // 将数据返回为JSON格式 echo json_encode($data); ?> 下面是ExtJS代码,包括Grid和与服务器进行通信的Ajax请求: javascript Ext.onReady(function(){ // 创建数据模型 Ext.define('Person', { extend: 'Ext.data.Model', fields: [ 'id', 'name', 'age' ] }); // 创建存储 var store = Ext.create('Ext.data.Store', { model: 'Person', proxy: { type: 'ajax', url: 'fetchdata.php', reader: { type: 'json', rootProperty: '' } }, autoLoad: true }); // 创建列模型 var columns = [ { text: 'ID', dataIndex: 'id' }, { text: '姓名', dataIndex: 'name', editor: 'textfield' }, { text: '年龄', dataIndex: 'age', editor: 'numberfield' } ]; // 创建Grid var grid = Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), store: store, columns: columns, selModel: 'cellmodel', plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ], listeners: { // 在单元格编辑后立即保存更改 edit: function(editor, e){ Ext.Ajax.request({ url: 'savechanges.php', method: 'POST', jsonData: e.record.data, success: function(response, opts){ //console.log(response.responseText); var obj = Ext.decode(response.responseText); if(obj.success){ Ext.Msg.alert('成功', '数据已保存'); store.load(); } else { Ext.Msg.alert('错误', obj.error); } }, failure: function(response, opts){ Ext.Msg.alert('错误', response.statusText); } }); } } }); }); 注意: - CellEditing 插件可在单元格编辑时自动保存更改。 - 在保存更改时,我们使用Ajax请求将数据发送到名为 savechanges.php 的PHP文件。 - 在保存请求成功时,我们刷新存储以便更新Grid中的数据。 下面是PHP文件savechanges.php,我们稍后将用它来保存更改: php <?php // 获取POST数据 $data = json_decode(file_get_contents('php://input')); // 将更改保存到数据库 // 这里是我们自己的代码,为了演示,我们只返回成功。 $response = array('success'=>true); // 将响应数据转换为JSON格式并发送回来 echo json_encode($response); ?> 在本地web服务器上运行这些代码后,您应该会看到一个包含可编辑单元格的Grid。更改数据时,单元格的背景色将变为黄色,表示它们已更改但尚未保存。保存更改时,将出现保存状态或错误消息。 希望这个例子对你有所帮助!
回答: 当返回的success值为false时,根据引用中的示例,可以执行相应的代码来处理错误情况。在该示例中,如果success为false,则通过Ext.MessageBox.alert方法弹出一个提示框,提示错误信息。另外,根据引用中的示例,也可以使用try-catch语句来捕获错误,并执行相应的代码。在该示例中,可以在catch块中打印错误信息,以便进行调试和处理错误。123 #### 引用[.reference_title] - *1* [ExtJs后台返回success为false,Ext.ajax.request也用调用success方法,解决方法](https://blog.csdn.net/oPINGU/article/details/45648261)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Typora配置github图床踩坑记录:“success“:false,“message“:“upload error](https://blog.csdn.net/weixin_62012485/article/details/128460861)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [发送请求-请求状态码正确,但信息不正确,怎么解决](https://blog.csdn.net/qq_54669583/article/details/127489360)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

最新推荐

课程设计基于stm32的WIFI小车控制源代码.zip

【资源说明】 课程设计基于stm32的WIFI小车控制源代码.zip课程设计基于stm32的WIFI小车控制源代码.zip课程设计基于stm32的WIFI小车控制源代码.zip课程设计基于stm32的WIFI小车控制源代码.zip课程设计基于stm32的WIFI小车控制源代码.zip课程设计基于stm32的WIFI小车控制源代码.zip课程设计基于stm32的WIFI小车控制源代码.zip课程设计基于stm32的WIFI小车控制源代码.zip课程设计基于stm32的WIFI小车控制源代码.zip课程设计基于stm32的WIFI小车控制源代码.zip 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

航运行业深度分析:不畏短期扰动,油运供需基本面仍坚挺.pdf

行业深度报告

搜索链接Java网络爬虫(蜘蛛)源码-zhizhu

[搜索链接]Java网络爬虫(蜘蛛)源码_zhizhu

最新SketchUp教案.pdf

最新SketchUp教案.pdf

传媒互联网产业行业研究:估值逐步切换,关注业绩边际向上标的及AI、MR主线.pdf

研究机构/证券/投行的行业研究报告

数据结构1800试题.pdf

你还在苦苦寻找数据结构的题目吗?这里刚刚上传了一份数据结构共1800道试题,轻松解决期末挂科的难题。不信?你下载看看,这里是纯题目,你下载了再来私信我答案。按数据结构教材分章节,每一章节都有选择题、或有判断题、填空题、算法设计题及应用题,题型丰富多样,共五种类型题目。本学期已过去一半,相信你数据结构叶已经学得差不多了,是时候拿题来练练手了,如果你考研,更需要这份1800道题来巩固自己的基础及攻克重点难点。现在下载,不早不晚,越往后拖,越到后面,你身边的人就越卷,甚至卷得达到你无法想象的程度。我也是曾经遇到过这样的人,学习,练题,就要趁现在,不然到时你都不知道要刷数据结构题好还是高数、工数、大英,或是算法题?学完理论要及时巩固知识内容才是王道!记住!!!下载了来要答案(v:zywcv1220)。

特邀编辑特刊:安全可信计算

10特刊客座编辑安全和可信任计算0OZGUR SINANOGLU,阿布扎比纽约大学,阿联酋 RAMESHKARRI,纽约大学,纽约0人们越来越关注支撑现代社会所有信息系统的硬件的可信任性和可靠性。对于包括金融、医疗、交通和能源在内的所有关键基础设施,可信任和可靠的半导体供应链、硬件组件和平台至关重要。传统上,保护所有关键基础设施的信息系统,特别是确保信息的真实性、完整性和机密性,是使用在被认为是可信任和可靠的硬件平台上运行的软件实现的安全协议。0然而,这一假设不再成立;越来越多的攻击是0有关硬件可信任根的报告正在https://isis.poly.edu/esc/2014/index.html上进行。自2008年以来,纽约大学一直组织年度嵌入式安全挑战赛(ESC)以展示基于硬件的攻击对信息系统的容易性和可行性。作为这一年度活动的一部分,ESC2014要求硬件安全和新兴技术�

如何查看mysql版本

### 回答1: 可以通过以下两种方式来查看MySQL版本: 1. 通过命令行方式: 打开终端,输入以下命令: ``` mysql -V ``` 回车后,会显示MySQL版本信息。 2. 通过MySQL客户端方式: 登录到MySQL客户端,输入以下命令: ``` SELECT VERSION(); ``` 回车后,会显示MySQL版本信息。 ### 回答2: 要查看MySQL的版本,可以通过以下几种方法: 1. 使用MySQL命令行客户端:打开命令行终端,输入mysql -V命令,回车后会显示MySQL的版本信息。 2. 使用MySQL Workbench:打开MyS

TFT屏幕-ILI9486数据手册带命令标签版.pdf

ILI9486手册 官方手册 ILI9486 is a 262,144-color single-chip SoC driver for a-Si TFT liquid crystal display with resolution of 320RGBx480 dots, comprising a 960-channel source driver, a 480-channel gate driver, 345,600bytes GRAM for graphic data of 320RGBx480 dots, and power supply circuit. The ILI9486 supports parallel CPU 8-/9-/16-/18-bit data bus interface and 3-/4-line serial peripheral interfaces (SPI). The ILI9486 is also compliant with RGB (16-/18-bit) data bus for video image display. For high speed serial interface, the ILI9486 also provides one data and clock lane and supports up to 500Mbps on MIPI DSI link. And also support MDDI interface.

特邀编辑导言:片上学习的硬件与算法

300主编介绍:芯片上学习的硬件和算法0YU CAO,亚利桑那州立大学XINLI,卡内基梅隆大学TAEMINKIM,英特尔SUYOG GUPTA,谷歌0近年来,机器学习和神经计算算法取得了重大进展,在各种任务中实现了接近甚至优于人类水平的准确率,如基于图像的搜索、多类别分类和场景分析。然而,大多数方法在很大程度上依赖于大型数据集的可用性和耗时的离线训练以生成准确的模型,这在许多处理大规模和流式数据的应用中是主要限制因素,如工业互联网、自动驾驶车辆和个性化医疗分析。此外,这些智能算法的计算复杂性仍然对最先进的计算平台构成挑战,特别是当所需的应用受到功耗低、吞吐量高、延迟小等要求的严格限制时。由于高容量、高维度和高速度数据,最近传感器技术的进步进一步加剧了这种情况。0在严格的条件下支持芯片上学习和分类的挑战0性�