- 浏览: 32028 次
- 性别:
- 来自: 广州
最新评论
服务器端代码: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(可选)指定接收到服务器响应后的处理函数。
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2005Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1317JSON作为轻量级的数据传输格式,在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 880服务器端:loginServerXml.jsp 在lib下要有 ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 606<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 646<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 399<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 749<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 633<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 903<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1270<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 710Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 486<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 813<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 597函数一:Ext.onReady() Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 443<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 490<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 687<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 369Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 923<!DOCTYPE html PUBLIC " ... -
Ext.layout.container 标准布局类
2013-06-28 15:48 733<!DOCTYPE html PUBLIC " ...
相关推荐
NULL 博文链接:https://linwei-211.iteye.com/blog/1567277
NULL 博文链接:https://chun521521.iteye.com/blog/1935516
Ext.Ajax.request同步请求包 博文链接:https://lingf.iteye.com/blog/1195912
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别小结,需要的朋友可以参考下。
其中,我们可以看到Ext.Ajax可以实现动态与静态的方式提交到web服务器。从中可以看出,其实Ext框架可以非常方便的与现有网站集成。关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们...
NULL 博文链接:https://lingf.iteye.com/blog/1821225
主要介绍了ExtJs的Ext.Ajax.request实现waitMsg等待提示效果,需要的朋友可以参考下
Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理
Ext.ux.tree.treegrid异步加载,点击节点加载数据
EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar
EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...
1. Ext.form.NumberField 2. Ext.form.TextArea 3. Ext.form.TriggerField 4. Ext.form.DateField 5. Ext.form.ComboBox 6. Ext.form.TimeField
EXT dojochina文本框示例Ext.form.TextField.rar
org.restlet.ext.spring.jar
Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文
EXT dojochina 面板示例Ext.Panel.rar EXT dojochina 面板示例Ext.Panel.rar
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
运行Microsoft office时,vbe6ext.olb不能加载