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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<! 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.QuickTips.init();
 
         var productForm = Ext.create('Ext.form.Panel', {
           title: 'Sample',
           frame: true,
           height: 300,
           width: 600,
           renderTo: Ext.getBody(),
           bodyPadding: 5,
           fieldDefaults: {
             labelSeparator: ': ',
             labelWidth: 100,
             width: 400,
             labelAlign: 'left'
           },
           items: [{
             fieldLabel: '产品名称',
             xtype: 'textfield',
             name: 'productName',
             value: 'U盘'
           },{
             fieldLabel: '金额',
             xtype: 'numberfield',
             name: 'price',
             value: '100'
           },{
             fieldLabel: '生产日期',
             xtype: 'datefield',
             format: 'Ymd',
             name: 'date',
             value: new Date()
           },{
             xtype: 'hidden',
             name: 'productId',
             value: '001'
           },{
             fieldLabel: '产品简介',
             name: 'introduction',
             xtype: 'textarea'
           }],
           buttons: [{
             text: '加载简介',
             handler: loadIntroduction
           }]
         });
         function loadIntroduction(){
           var params = productForm.getForm().getValues();
           productForm.getForm().load({
             params: params,
             url: 'source.html',
             method: 'GET',
             success: function(form, action){
               Ext.Msg.alert('notice', '产品简介加载成功');
             },
             failure: function(form, action){
               Ext.Msg.alert('error', 'load failure');
             }
           });
         }
       });
     </ script >
</ head >
< body >
< div id='tpl-table1'></ div >
< br >
< div id='tpl-table2'></ div >
</ body >
</ html >

  source.html

?
1
{success: true, data: {introduction: '本产品美观实用,售后服务优秀'}}

  

目录
相关文章
|
8天前
|
XML 前端开发 JavaScript
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
本文介绍了在PHP中如何使用Ajax进行登录表单的数据提交,并利用jQuery的$.post()方法与后端通信,以及使用layer.msg进行前端提示。
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
|
2月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
64 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
12月前
|
存储 前端开发 JavaScript
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
HTTP进阶,Cookie,响应的回报结果含义,ajax,form表单,不同状态码代表的结果
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
73 0
|
JSON 前端开发 数据格式
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
109 0
|
前端开发 Java API
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(上)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(上)
167 0
|
SQL 前端开发 数据库
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
105 0
|
数据采集 SQL 前端开发
【jquery Ajax 】form表单教学+评论案例
【jquery Ajax 】form表单教学+评论案例
152 0
【jquery Ajax 】form表单教学+评论案例
|
前端开发
js-base64转换为file对象,ajax提交表单FormData
js-base64转换为file对象,ajax提交表单FormData
244 0
|
前端开发
pbootcms使用Ajax无刷新提交留言及表单
pbootcms使用Ajax无刷新提交留言及表单
468 0