1.代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!--ExtJs框架开始-->
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<!--
<script type="text/javascript" src="study/helloWorld.js"></script>
<script type="text/javascript" src='study/window.js'></script>
<script type="text/javascript" src='study/formPanel.js'></script>
<script type="text/javascript" src='study/textField.js'></script>
<script type="text/javascript" src='study/button.js'></script>
<script type="text/javascript" src='study/login.js'></script>
-->
<!--调用/study/ajax.js -->
<script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js-->
<script type="text/javascript" src="study/kindeditor/kindeditor.js"></script>
<script type="text/javascript" src='study/ajax.js'></script>
<style type="text/css">
.loginicon
{
background-image: url(study/login.gif) !important;
}
</style>
<style type='text/css'>
.x-form-unit
{
height:22px;
line-height:22px;
padding-left:2px;
display:inline-block;
display:inline;
}
</style>
</head>
<body>
<!--------------------- 上层 -->
<!-- 这里使用ContainerLayout: 垂直方式布局 -->
<div id='ContainerLayout' style='float:left;width:300px'></div>
<!-- padding-left 是用来填充间隔,如果没有则两个容器/组件会完全挨着 -->
<div id='hello' style='float:left;width:300px;padding-left: 10px'></div>
<div id='right-upward' style='float:left;width:700px;padding-left:15px'></div>
<!--------------------- 中间------------------------------------>
<div id='BorderLayout' style='padding: 20px 0px 0px 0px;clear:both'></div>
<!--------------------- 底层------------------------------------>
<div id='accordionLayout' style='float:left;padding:20px 0px;width:300px;height:200px'></div>
<!-- 两个Panel渲染同一div,不会相互覆盖,会上下依次显示 -->
<div id='fitLayout' style='float:left; padding:20px 0px 0px 20px;height:30px'></div>
<!-- 表格布局 -->
<div id='tableLayout' style='float:left; padding:20px 0px 0px 20px;height:30px;width:100px'></div>
</body>
</html>
2. ajax.js 代码如下：
Ext.onReady(function(){
//创建Panel
var panel = new Ext.Panel({
title:'Ajax与数据显示',
width:400,
height:350,
style:'margin:30px',
bodyStyle:'padding: 10px 0px 10px 30px',
frame:true
});
/*
* 配置项URL:
* url:'./study/sample.json', //这里原本应该请求地址,如:/../ajax.do ,为了快速学习,暂时先指定一个json文件,我是通过看EXT3.0 API url: 'ajax_demo/sample.json', 学习的:-D
* 这里的url的值不能是声明的变量(如url:urlData 或url:'urlData')！必须是地址路径!
*
*
* 配置项PARAMS:
* params: { id: 1 }参数，我们在做内容页时，经常会这样使用“根据编号取出详细信息”，这个参数在本例中并没有实际意义，在这里只显示用法。
*
*
* 配置项SUCCESS:
* success: function (response, options) {}成功时执行方法。这里有两个参数:
* (1)response：服务端返回的数据，通过response.responseText来获得XMLHttpRequest的数据，并通过Ext.util.JSON.decode方法把字符串转换成json对象。
* (2)options：向服务端发送的对象。
*
*
*<--------------以下是对日常函数里的参数是什么,怎么查看该参数做出解析------------------------->
* 我们在开发中，经常会遇到这样的问题，就是不知道参数是做什么用的，传的是什么，当我们 alert(parm)的时候，弹出的是[Object]或是[Object][Object]。
* 那么我们怎么样知道他到底传的是什么呢？我在上页的代码中写了这样的程序：
* for (i in options) {
* alert('options参数名称:' + i);
* alert('options参数[' + i + ']的值：' + options[i]);
* }
* 对象我们不知道的对象 options 我们用 for 语句进行遍历，看看对象里存的是什么，这样就可以判断对象是什么了。
* for(){}：不知属性个数时,用于对某个对象的所以属性进行循环操作,返回字符串形式的属性名，获取属性值方式。
* 那如果，我们的子对象还是 Object 怎么办？
* for (i in options) {
* alert('options参数名称:' + i);
* alert('options参数[' + i + ']的值：' + options[i]);
* //方式一，判断子对象类型，如果是object则继续遍历子对象
* if (typeof (options[i]) == 'object') {
* for (j in options[i]) {
* alert('子对象名称：' + j);
* alert('子对象值：' + options[i][j]);
* }
* }
* }
* //方式二，options[i].toSource()，查看对象源码。
* //语法：object.toSource() 注：该方法在 Internet Explorer 中无效。
* <----------------------------------结束----------------------------------------->
*
*/
//var urlData = {id:1,name:'张三',brithday:2001-01-01,height:178,sex:'0',discribe:'张三是一个.net软件工程师<br />现在正在学习ExtJs。'}
//获取数据
Ext.Ajax.request({ //创建一个AJAX请求! //系统加载时就会调用它！不受Window组件影响, 所以不需要New
url:'./study/sample.json',
method: 'post',
params: {id:1},
success: function (response, options) { //成功时执行的函数！
// alert(response)
// for (i in response) { //完全可以没有以下for循环, 只为让自己和大家看清楚,Ajax是在页面加载时就会被优先加载进来
// alert('options参数名称:' + i);
// alert('options参数[' + i + ']的值：' + response[i]);
// if(typeof(response[i])=='object'){
// for(j in response[i]){
// alert('子对象:'+j);
// alert('子对像['+j+']的值:' + response[i][j]);
// }
// }
// }
var responseJson = Ext.util.JSON.decode(response.responseText); //把字符串转换成json对象
alert(responseJson);
template.compile(); //编译模板。
template.overwrite(panel.body, responseJson); //把数据填充到模板中。
},
failure:function(){
alert('系统出错,请联系管理人员...'); //当url找不到路径及函数里面出错时会在这里提示给用户
}
});
//创建模板对象，常用于数据显示，也就是我们在开发中提到的“内容页或详细页”。
var template = new Ext.XTemplate(
'<table id="template">',
'<tr><td>Number:</td><td>{id}</td></tr>', //中间的{id}占位符要和我们在后台输出 json 对象对应。
'<tr><td>Name:</td><td>{name}</td></tr>',
'<tr><td>Birthday:</td><td>{brithday}</td></tr>',
'<tr><td>Height:</td><td>{height}</td></tr>',
'<tr><td>Sex:</td><td>{sex}</td></tr>',
'<tr><td valign="top">Discribe</td><td>{discribe}</td></tr>',
'</tabel>'
);
new Ext.Window({
title:'Window',
id:'window',
width:476,
height:476,
modal:true,
closable:true,
minimizable:true,
maximizable:true,
items:[panel] //注这里也可直接写items:panel,因为只一个参数,当两个参数时items:[panel,xxx]
}).show();
});
3. 效果如下：
注1, 当url值错误时页面：
Ext.Ajax.request({ //创建一个AJAX请求! //系统加载时就会调用它！不受Window组件影响, 所以不需要New
url:'./study/sample.json', //如果这里url的值不是路径,而是一个具体值时的结果如下：
注2， 查看参数时的页面：
日常函数里的查看参数是什么,怎么查看该参数？
alert('options参数名称:' + i);
alert('options参数[' + i + ']的值：' + response[i]);
相关推荐
在"无废话ExtJS系列教程十八[继承：Extend]"中，我们主要关注的是ExtJS中的类继承机制，这是一个核心特性，它允许开发者创建可复用和可扩展的组件结构。在JavaScript中，继承是通过原型链实现的，而在ExtJS中，它被...
《无废话ExtJs系列教程十五：树：TreePanel》 ExtJs是一个强大的JavaScript库，用于构建富客户端Web应用。在本教程中，我们将深入探讨一个重要的组件——TreePanel，它是ExtJs用来展示层次结构数据的工具，常用于...
本教程将深入探讨ExtJS中的Combobox组件，包括其基本用法、配置选项、事件处理和自定义功能。 1. **Combobox的基本结构** - Combobox由两个主要部分组成：文本输入框和下拉列表。用户可以在输入框中键入文字，或者...
在"无废话ExtJS 系统教程十四[列表：GridPanel]"中，我们将会深入探讨如何有效地使用GridPanel来创建高效的、功能丰富的数据列表。 GridPanel是ExtJS中的核心组件之一，它允许用户以表格形式展示大量数据，并支持...
NULL 博文链接：https://huiqinbo.iteye.com/blog/2217105
总之，"无废话ExtJs 系统教程十九[动态复选框：RemoteCheckboxGroup]"是一个帮助开发者掌握如何在ExtJS应用中实现动态复选框组件的资源。通过学习和实践，你可以创建出更加灵活和高效的用户界面，同时利用源码和工具...
标题中的“经验总结-Extjs(一)数据交互设计”表明了本文主要关注的是ExtJS框架在实现数据交互方面的设计和实践经验。ExtJS是一个流行的JavaScript库，用于构建富客户端Web应用，尤其以其强大的数据管理、组件化和...
1. **Ajax技术**：Ajax（Asynchronous JavaScript and XML）允许在不刷新整个页面的情况下与服务器进行数据交换。在ExtJS中，`Ext.Ajax` 类提供了一系列方法，如`request`、`get`、`post`等，用于发起Ajax请求。...
【标题】"无废话ExtJs 教程十二[员工信息表Demo：AddUser]"是一个针对初学者和进阶者设计的教程，旨在帮助他们更好地理解和应用ExtJS框架创建员工信息管理系统的添加用户功能。在本教程中，我们将深入探讨如何使用...
前端负责展示和处理用户交互，通过Ajax异步请求将数据发送到后端；而后端则主要负责数据的存储和逻辑处理，通过响应HTTP请求来返回数据或执行数据库操作。理解并熟练掌握这一过程，对于开发高效、动态的Web应用程序...
本教程主要讲解如何使用EXTJS的AJAX方法向后台服务器发送数据，这对于实现动态交互和数据同步至关重要。 一、EXTJS AJAX基础 EXTJS中的AJAX调用通过Ext.Ajax对象来实现，它提供了一系列的方法，如`request`、`post...
在前后台数据交互中，ExtJs 起着至关重要的作用，它可以与服务器端进行异步通信，实现数据的获取、更新、删除等操作。本文将详细介绍如何使用ExtJs 进行前后台数据交互，并修复可能出现的问题。 首先，理解ExtJs的...
在"extjs后台交互完整示例"中，我们可以看到如何使用ExtJS与服务器进行数据交换，这对于创建动态和数据驱动的应用程序至关重要。 首先，我们要理解ExtJS的数据模型和存储机制。它提供了Store对象，作为客户端数据的...
这个中文教程涵盖了ExtJS的核心概念、组件和Ajax技术的使用，同时也涉及到与Java后端的交互。让我们深入探讨这些知识点。 首先，ExtJS提供了丰富的UI组件，如表格、面板、窗口、菜单等，这些组件都是基于组件化设计...
1. **ExtJS的数据交互**：ExtJS通过Ajax方式与服务器进行数据通信。它使用Store组件来管理数据，并通过Proxy组件定义与服务器的通信协议。通常，我们可以配置Proxy为`Ajax`类型，设置URL指向后台Servlet，然后通过`...
- Extjs中使用Ajax进行异步数据交互的方法。 - **实战案例**： - 展示如何使用Extjs内置的Ajax请求方法发起请求，并处理响应。 #### 第九讲：Extjs 4.0的core包和Ext类 - **core包和Ext类**： - core包包含了一...
在“Extjs和后台数据库交互的程序，增删改查”项目中，我们将探讨如何利用ExtJS与后台数据库进行数据的添加、删除、修改和查询操作。 1. **ExtJS的数据模型（Model）** 在ExtJS中，数据模型定义了对象的结构，包括...
本文将深入探讨一个使用ExtJS与Servlet进行数据交互的实际例子，这对于初学者理解这两者如何协同工作非常有帮助。 首先，我们来看Servlet的部分。Servlet是Java平台上的一个标准接口，用于扩展服务器的功能，特别是...