哈哈,找到一种方式来简单模拟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}
     ]
}

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

目录
相关文章
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
334 2
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
201 22
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
327 3
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
321 1
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
278 4
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
185 3
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
254 3
|
XML JSON 前端开发
JSON与AJAX:网页交互的利器
JSON与AJAX:网页交互的利器
168 0
|
3月前
|
弹性计算 运维 安全
阿里云轻量应用服务器与云服务器ECS啥区别?新手帮助教程
阿里云轻量应用服务器适合个人开发者搭建博客、测试环境等低流量场景,操作简单、成本低;ECS适用于企业级高负载业务,功能强大、灵活可扩展。二者在性能、网络、镜像及运维管理上差异显著,用户应根据实际需求选择。
340 10
|
3月前
|
运维 安全 Ubuntu
阿里云渠道商:服务器操作系统怎么选?
阿里云提供丰富操作系统镜像,涵盖Windows与主流Linux发行版。选型需综合技术兼容性、运维成本、安全稳定等因素。推荐Alibaba Cloud Linux、Ubuntu等用于Web与容器场景,Windows Server支撑.NET应用。建议优先选用LTS版本并进行测试验证,通过标准化镜像管理提升部署效率与一致性。