Extjs-lesson7

简介: Extjs-lesson7


1.1 展示

Ajax

1.2 代码

前端 js 代码

Ext.onReady(function () {
    //创建panel
    var panel = new Ext.Panel({
        title: 'Ajax与数据显示',
        width: 476,
        height: 374,
        resizable: true,
        frame: true
    });
    //创建数据显示模板
    var template = new Ext.XTemplate(
                '<table  id="template">',
                   '<tr><td>编号:</td><td>{id}</td></tr>',
                   '<tr><td>姓名:</td><td>{name}</td></tr>',
                   '<tr><td>生日:</td><td>{brithday}</td></tr>',
                   '<tr><td>身高:</td><td>{height}</td></tr>',
                   '<tr><td>性别:</td><td>{sex}</td></tr>',
                   '<tr><td valign="top">描述:</td><td>{discribe}</td></tr>',
                '</table>'
            );
    //获取数据
    Ext.Ajax.request({
        url: '/demo/people/',
        method: 'post',
        params: { id: 1 },
        success: function (response, options) {
            for (i in options) {
                alert('options参数名称:' + i);
                alert('options参数[' + i + ']的值:' + options[i]);
            }
            var responseJson = Ext.util.JSON.decode(response.responseText);
            template.compile();
            template.overwrite(panel.body, responseJson);
        },
        failure: function () {
            alert('系统出错,请联系管理人员!');
        }
    });
    //创建窗体
    var win = new Ext.Window({
        title: '窗口',
        id: 'window',
        width: 476,
        height: 374,
        resizable: true,
        modal: true,
        closable: true,
        maximizable: true,
        minimizable: true,
        items: [panel]
    });
    win.show();
});

后端 python 代码:更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

from django.http import JsonResponse
from django.shortcuts import render
from django.shortcuts import render_to_response
# url:/demo/people/
def getPeople(request):
    id = request.POST.get('id')
    if id == 1:
        return JsonResponse({"id": 1, "name": '小闫同学', "brithday": "2001-05-21", "height": 180, "sex": '0', "discribe": '小闫同学是一名全栈开发工程师<br>欢迎关注公众号:全栈技术精选。'})
# url:/demo/index
def index(request):
    return render_to_response('test_ajax/index.html')
相关文章
|
10月前
|
存储 SQL 分布式计算
别让你的数据“裸奔”!大数据时代的数据隐私保护实战指南
别让你的数据“裸奔”!大数据时代的数据隐私保护实战指南
454 19
|
5月前
|
人工智能 机器人
智能体来了|AI智能体时代的趋势与机会(2025趋势解读)
智能体不是AI终点,而是人与智能共生的起点。2025年,AI从工具进化为“行动伙伴”,重塑工作与学习方式。「智能体来了」推动全民智能体教育,助力个人转型、企业升级,抢占未来红利。
|
存储 机器学习/深度学习 SQL
大数据处理与分析技术
大数据处理与分析技术
1054 138
|
6月前
|
传感器 人工智能 安全
AR 巡检在工业的应用|阿法龙XR云平台
AR巡检技术广泛应用于电力、石化、制造、交通等行业,通过AR眼镜或平板实时叠加设备参数、历史数据及操作指引,提升巡检效率与准确性。支持远程协作、自动记录分析,并可在高危环境实现无人巡检,大幅降低安全风险,推动智能化运维升级。
|
12月前
|
人工智能 前端开发 算法
Vibe Draw:涂鸦秒变3D模型!开源AI建模神器解放创意生产力
Vibe Draw 是一款基于AI技术的开源3D建模工具,通过Next.js和FastAPI构建,能将用户绘制的2D草图智能转化为3D模型,并支持文本提示优化和场景构建。
797 35
Vibe Draw:涂鸦秒变3D模型!开源AI建模神器解放创意生产力
|
传感器 存储 机器学习/深度学习
物联网(IoT)简介:定义、技术与应用
【5月更文挑战第30天】物联网(IoT)是将物品通过嵌入式系统、传感器及通信技术连接至互联网,实现物物、物人交互和数据共享的技术。其关键包括传感器、通信、嵌入式系统、云计算和人工智能技术。物联网应用于智能家居、智慧城市、工业自动化、农业和健康医疗等领域,通过Arduino等平台可实现简单数据传输。随着技术发展,物联网将深远影响人们生活和工作方式。
6394 3
|
算法 图形学
LabVIEW程序框图保存为图像
LabVIEW程序框图保存为图像
335 1
使用uniapp开发微信小程序的人脸采集功能/人脸识别功能
使用uniapp开发微信小程序的人脸采集功能/人脸识别功能
3273 0
|
数据可视化 网络安全 开发工具
【新人必会】远程开发可视化 - VSCode篇
【新人必会】远程开发可视化 - VSCode篇
456 0

热门文章

最新文章