哈哈,找到一种方式来简单模拟EXTJS中与服务器的AJAX交互啦。

简介:

一直在测试客户端的EXTJS,但遇到服务器端就麻烦了,要建库,要写JSON,要有HTTP返回值。

今天测试了一个简单的方法,经过测试是OK了。

那,就是Python的SimpleHTTPServer模块作个简单的WEB服务器,然后,需要返回的值直接写个HTML即可啦。

指定目录的启动命令:

?
1
python -m SimpleHTTPServer

  

 

如果要测试如下EXTJS的AJAX请求:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<! DOCTYPE html>
< html >
< head >
     < title >ExtJs</ title >
         < meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     < link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
         < script type="text/javascript" src="ExtJs/ext-all.js"></ script >
         < script type="text/javascript" src="ExtJs/bootstrap.js"></ script >
         < script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></ script >
 
     < script type="text/javascript">
             Ext.onReady(function(){
         Ext.define('Person', {
           extend: 'Ext.data.Model',
           fields: ['name', 'age']
         });
         var store = Ext.create('Ext.data.Store', {
           model: 'Person',
           proxy: {
             type: 'ajax',
             url: 'source.html',
             reader: {
               type: 'json',
               root: 'users'
             }
           }
         });
         store.load({
           callback: function(records, operation, success) {
             if(success) {
               var msg = [];
               store.each(function(person){
                 msg.push(person.get('name') + ' ' + person.get('age'));
               });
               Ext.Msg.alert('notice', msg.join('< br />'));
             }
           }
         });
         var msg = [];
         store.each(function(person){
           msg.push(person.get('name') + ' ' + person.get('age'));
         });
         Ext.Msg.alert('notice', msg.join('< br />'));
       });
     </ script >
</ head >
< body >
< div id='tpl-table1'></ div >
< br >
< div id='tpl-table2'></ div >
</ body >
</ html >

  则可以在同级代码目录下,生成一个source.html文件,内容如下:

?
1
2
3
4
5
6
7
8
9
10
11
{
     users:[
         {name:'qeefee', age:1},
         {name:'chengang', age:18},
         {name:'sky', age:31},
         {name:'CK', age:65},
         {name:'GK', age:43},
         {name:'Bone', age:15},
         {name:'Tom', age:26}
     ]
}

  则运行效果如下:搞定!!:)

目录
相关文章
|
9天前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
37 2
|
2月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
40 5
|
2月前
|
XML 存储 前端开发
后端程序员的前后端交互核心-Ajax
后端程序员的前后端交互核心-Ajax
49 6
后端程序员的前后端交互核心-Ajax
|
5月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
2月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
51 3
|
2月前
|
XML JSON 前端开发
JSON与AJAX:网页交互的利器
JSON与AJAX:网页交互的利器
28 0
|
3月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
【7月更文挑战第15天】Python后端(Django/Flask)与前端通过AJAX或Fetch API实现异步交互,提升Web应用体验。Python提供强大的后端支持,AJAX用于不刷新页面的数据交换,Fetch API作为现代标准,基于Promise简化HTTP请求。结合两者,构建高效、流畅的交互系统,优化响应速度和用户体验,开启Web开发新篇章。
65 5
|
3月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
53 7
|
3月前
|
前端开发 JavaScript API
惊天揭秘!AJAX与Fetch API如何让你的前后端交互秒变‘神级操作’!
【7月更文挑战第15天】在Web开发中,AJAX和Fetch API革新了前后端交互,告别了表单提交带来的页面刷新。AJAX利用XMLHttpRequest实现部分页面更新,开启无刷新时代;Fetch API作为现代替代,以其简洁和Promise支持简化异步操作。从AJAX的先驱地位到Fetch API的进化,两者提升了Web应用的性能和用户体验,成为现代开发的必备技能。
42 2
|
3月前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
【7月更文挑战第14天】在Web开发中,AJAX和Fetch API扮演着关键角色,用于前后端异步通信。AJAX通过XMLHttpRequest实现页面局部更新,但回调模式和复杂API有一定局限。Fetch API作为现代替代,利用Promise简化异步处理,提供更丰富功能和错误处理。Python后端如Flask、Django支持这些交互,助力构建高性能应用。从AJAX到Fetch API的进步,结合Python,提升了开发效率和用户体验。
27 0
下一篇
无影云桌面