tesia
- 浏览: 32908 次
- 性别:
- 来自: 广州
-
最新评论
服务器端代码：loginServer.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String userName=request.getParameter("username");
String password=request.getParameter("password");
String msg="";
//服务端程序根据用户输入的用户名和密码判断是否合法，如果输入正确就返回成功
if(userName.equals("11")&& password.equals("11")){
msg="登录成功";
}else{
msg="登录失败";
}
response.getWriter().write(msg);//将登录信息写回客户端
%>
客户端代码：mylogin.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Ext.Ajax.request异步提交表单示例</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-all.js" ></script>
<script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="loginForm">
用户名：<input name="username" type="text">
密码：<input type="password" name="password" >
<input type="button" value="登录" onclick="login()">
</form>
<script type="text/javascript">
function login(){
var requestConfig={
url:'extajax/loginServer.jsp',//请求的服务地址
form:'loginForm', //指定要提交的表单Id
callback:function(options,success,response){ //回调函数 options是请求调用的参数
var msg=["请求是否成功:",success,"\n","服务器返回值:",response.responseText];
alert(msg.join(''));
}
}
Ext.Ajax.request(requestConfig);//发送请求
}
</script>
</body>
</html>
-------------------------------------
使用Ext.Ajax.request方法异步提交表单数据的方式，其中起到关键作用的是form配置项，该配置项指定了该方法将要提交的表单。
Ext.Ajax.request方式是客户端向服务端发送请求的重要方法。
调用格式：
request(Object options): Object
Options:包含请求参数及回调处理参数，可能的属性：
url: String/Function （可选）。请求服务器地址
params: Object/String/Function（可选） 包含请求参数的配置对象
method:String （可选）。指定HTTP请求方式，有效包括GET和POST，默认使用
Ext.Ajax.request对象中method配置项的值。
callback：Function（可选）指定接收到服务器响应后的处理函数。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String userName=request.getParameter("username");
String password=request.getParameter("password");
String msg="";
//服务端程序根据用户输入的用户名和密码判断是否合法，如果输入正确就返回成功
if(userName.equals("11")&& password.equals("11")){
msg="登录成功";
}else{
msg="登录失败";
}
response.getWriter().write(msg);//将登录信息写回客户端
%>
客户端代码：mylogin.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Ext.Ajax.request异步提交表单示例</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-all.js" ></script>
<script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="loginForm">
用户名：<input name="username" type="text">
密码：<input type="password" name="password" >
<input type="button" value="登录" onclick="login()">
</form>
<script type="text/javascript">
function login(){
var requestConfig={
url:'extajax/loginServer.jsp',//请求的服务地址
form:'loginForm', //指定要提交的表单Id
callback:function(options,success,response){ //回调函数 options是请求调用的参数
var msg=["请求是否成功:",success,"\n","服务器返回值:",response.responseText];
alert(msg.join(''));
}
}
Ext.Ajax.request(requestConfig);//发送请求
}
</script>
</body>
</html>
-------------------------------------
使用Ext.Ajax.request方法异步提交表单数据的方式，其中起到关键作用的是form配置项，该配置项指定了该方法将要提交的表单。
Ext.Ajax.request方式是客户端向服务端发送请求的重要方法。
调用格式：
request(Object options): Object
Options:包含请求参数及回调处理参数，可能的属性：
url: String/Function （可选）。请求服务器地址
params: Object/String/Function（可选） 包含请求参数的配置对象
method:String （可选）。指定HTTP请求方式，有效包括GET和POST，默认使用
Ext.Ajax.request对象中method配置项的值。
callback：Function（可选）指定接收到服务器响应后的处理函数。
- 大小: 14.8 KB
分享到：
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2052Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1344JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 924服务器端：loginServerXml.jsp 在lib下要有 ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 630<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 677<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 425<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 765<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 659<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 930<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1308<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 735Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 508<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 838<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 617函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 474<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 512<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 712<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 389Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 944<!DOCTYPE html PUBLIC " ... -
Ext.layout.container 标准布局类
2013-06-28 15:48 759<!DOCTYPE html PUBLIC " ...
相关推荐
在EXTJS框架中，`Ext.FormPanel`和`Ext.Ajax.request`提供了两种不同的异步提交方法，它们各自有其特点和适用场景。下面我们将详细探讨这两种方式的区别。 1. **Ext.FormPanel的异步提交** `Ext.FormPanel` 是...
Ext.Ajax.request 方法是 ExtJS 框架中用于执行 Ajax 请求的核心功能之一，它允许开发者轻松地向服务器发起异步请求并处理响应结果。此方法提供了非常丰富的配置选项，能够满足大多数情况下对于 Ajax 通信的需求。 ...
Ext.Ajax.request({ url: 'upload.php', // 文件上传的服务器端处理程序 method: 'POST', useXhrUpload: true, headers: { 'Content-Type': undefined }, // 必须取消Content-Type以让浏览器自动设置 params: ...
2. **Ajax提交表单**：当表单需要异步提交时，可以利用`Ext.Ajax.request`方法。这个方法接受一个配置对象，其中包含了URL、方法（GET或POST）、数据、成功和失败的回调函数等参数。在本例中，你可能将表单的提交...
在EXTJS中，Ext.AJAX和Ext.FormPanel是两个核心组件，它们分别用于异步与服务器进行数据交互和构建用户界面表单。本文将详细介绍如何使用这两个组件构建一个完整的登录案例，包括与MySQL数据库的交互。 **1. Ext....
1. **EXT的Form表单AJAX提交**：这是EXT中最常见的提交方式，它允许你在不刷新整个页面的情况下与服务器进行异步通信。通过使用`doAction`方法，你可以方便地触发表单的提交，并指定URL、HTTP方法以及额外的参数。...
通常，Ext JS的表单提交使用Ajax方式，这意味着它可以异步地将表单数据发送到服务器，无需页面刷新。这种方式提供了更好的用户体验，因为用户可以在数据提交的同时继续与应用交互。 在Ext JS中，表单（`Ext.form....
7. **Ajax请求**：使用`Ext.Ajax.request`方法发送异步请求到服务器获取JSON数据。在响应回调中，解析JSON并更新表单内容。 以下是一个基本的示例代码片段，展示了如何动态加载JSON数据到表单： ```javascript // ...
此外，EXTJS的`Ext.Ajax`对象还提供了其他方法，如`request()`、`load()`等，可以用于更复杂的异步通信需求。在实际开发中，开发者可以根据具体场景灵活运用这些功能，创建出高效、用户体验优秀的Web应用。
第二个示例展示了如何通过`Ext.Ajax.request`异步提交表单数据。在这个例子中，我们首先定义了一个简单的HTML表单，并为提交按钮绑定了一个`login`函数。当用户点击提交按钮时，`login`函数会被调用，从而触发Ajax...
创建了 **Ext.data.Connection** 实例后，可以调用 `request()` 函数来发送请求。该函数接受多个参数，如： - **url**: 请求的目标URL。 - **params**: 请求参数。 - **method**: 请求方法（GET、POST等）。 - **...
在ExtJS中，有多种方式可以实现Ajax异步提交，这里我们将详细探讨四种常见的方法。 1. **直接使用Ext.Ajax.request方法** 这是最基础的Ajax提交方式，适用于手动封装请求参数的情况。在`saveUser_ajaxSubmit1`函数...
在`saveUser_ajaxSubmit1`函数中，EXT JS提供了`Ext.Ajax.request`方法进行异步提交。你需要手动构建要传递的参数，并设置URL、请求方法（如POST或GET）。在`success`和`failure`回调函数中处理服务器响应。 2. **...
- `Ext.Ajax.request()`是最常用的发送异步请求的方法。例如，发送一个GET请求获取数据： ```javascript Ext.Ajax.request({ url: 'your/api/url', method: 'GET', success: function(response) { var data =...
8. **AJAX请求**: ExtJS提供了`Ext.Ajax`模块用于发送异步请求。登录时，可能使用`Ext.Ajax.request`方法向服务器发送POST请求，包含用户名和密码。 9. **JSON数据交互**: 服务器返回的响应通常是JSON格式，我们...
5. **高级功能**：涉及树形视图（Tree）、图表（Charts）、拖放（Drag & Drop）、Ajax请求（Ajax Request）等高级特性，帮助开发者构建更复杂的应用。 6. **性能优化**：分享最佳实践和技巧，以提高应用性能，如...
8. **表单提交**：EXT Ajax库可以直接处理表单数据，将表单内容编码为请求体，简化表单提交操作。 9. **错误处理**：当请求出错时，EXT Ajax库会触发错误事件，帮助开发者捕获和处理错误。 10. **示例和文档**：...
EXT提供`Ext.Ajax.request`方法来发送异步请求。当用户在密码字段失去焦点或达到特定字符数时，触发这个请求。请求的URL应指向服务器端的验证接口，该接口负责检查用户名是否已存在，密码是否符合安全策略。 例如：...