Ext Js 3.2中Ext.ajax.request方法详解

最新推荐文章于 2024-03-09 15:36:06 发布

波哥的技术积累

最新推荐文章于 2024-03-09 15:36:06 发布

阅读量2w

点赞数 2

分类专栏： Ext Js 文章标签： ext xmlhttprequest string ajax button login

本文链接：https://blog.csdn.net/woshisap/article/details/7019380

版权

Ext Js 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

1：Ext.Ajax.request([Object options]):Number

options中的一些属性和含义如下：

url：指定请求的服务端url

params：指定要传递的参数，可以是一个包含参数名称及值的对象，也可以是类似于name=xx&birthday=1978-1-1的url编码字符串，或者是一个能返回上述两种内容

的函数

method：指定发送Ajax请求使用的method，可以是GET或者POST方式，默认情况下，如果请求中没有传递任何参数，则使用GET，否则使用POST

callback：指定Ajax请求的回调函数，该函数不管是调用成功还是失败，都会执行。传递给回调函数的参数有三个，第一个参数options表示执行request方法时的

参数，第二个参数表示success请求是否成功，第三个参数表示response用来执行Ajax请求的XMLHttpRequest对象

success：指定当Ajax请求执行成功后返回的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequest对象，第二个参数

表示执行request方法时的options对象

failure：指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequest对象，第二个参数表示执行request

方法时的options对象

scope：指定回调函数的作用域，默认为浏览器Window

form：指定要提交的表单id或者表单数据对象

isUpload：指定要提交的表单是否是文件上传表单，默认情况下会自动检查。

headers：指定要请求的Header信息

xmlData：指定用于发送给服务器的xml文档，如果指定了该属性，则其他地方设置的参数将无效

jsonData：指定需要发送给服务器端的JSON数据，如果指定了该属性，则其他地方设置的要发送的参数值将无效

disableCaching：表示是否禁止cache

2：实例代码

<%@ 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="ext3.2/resources/css/ext-all.css"></link>
	<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext3.2/ext-all.js"></script>
	<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
	
	<script type="text/javascript">
	     function login() {
	    	 var reqeustConfig = {
	    		 url: 'login.action',
	    		 form: 'loginForm',
	    		 callback: function(options, success, response) {
	    		      var msg = ['请求是否成功:', success, '\n', '服务器返回值：', response.responseText];
	                  alert(msg.join(''));
	    		 }
	    	 };
	    	 Ext.Ajax.request(reqeustConfig);
	     }
	</script>
  </head>
  <body>
     <form id="loginForm" method="post">
                   用户名:<input name="username" type="text" /><br/>
                        密码:<input name="password" type="password"/><br/>
         <input type="button" name="button" id="button" value="提交" οnclick="login();"/>
         <input type="reset" name="button" value="重置"/>
     </form>
  </body>
</html>

LoginAction接收的方法login为：

package com.capinfotech.action;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;

import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport implements ServletRequestAware,
		ServletResponseAware {

	private static final long serialVersionUID = -2251501394276835795L;
	
	private HttpServletRequest request;
	private HttpServletResponse response;

	private String username;
	private String password;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public void setServletRequest(HttpServletRequest request) {
		this.request = request;
	}

	public void setServletResponse(HttpServletResponse response) {
		this.response = response;
	}

	public void login() {
		String msg = " ";
		if (username != null && username.equals("admin") && password != null
				&& password.equals("admin")) {
			msg = "恭喜你登录成功！";
		} else {
			msg = "登录失败";
		}

		try {
			response.getWriter().write(msg);
			response.getWriter().flush();
		} catch (IOException e) {
			
		}
	}
}

3：程序效果图

图：登录成功的情况

图：登录失败的情况

波哥的技术积累

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
Ext Js 3.2中Ext.ajax.request方法详解

1：Ext.Ajax.request([Object options]):Number options中的一些属性和含义如下： url：指定请求的服务端url params：指定要传递的参数，可以是一个包含参数名称及值的对象，也可以是类似于name=xx&birthday=1978-1-1的url编码字符串，或者是一个能返回上述两种内容
复制链接

扫一扫