【ExtJs】ExtJs的Ajax

这东西非常简单,只要你会用aspx,jsp,php等任意一种服务器语言或者框架,知道怎么获取页面传递参数就行了。

ExtJs的Ajax甚至比Jquery的还要简短。

一、基本目标

就比如如下图的一个极其简单的例子,Ajax.html有一个按钮,一点击,传递a=10与b=20这两个值去Helloworld.jsp或者Helloworld.php,然后Helloworld.jsp或者Helloworld.php向前台返回信息:

二、Jsp版的ExtJs的Ajax

1、首先在Eclipse for JavaEE新建一个Dynamic Web Project,然其自动生成web.xml,并删去这个web.xml中无关紧要的东西,,如下:

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi=""xmlns=""xsi:schemaLocation=" http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"id="WebApp_ID" version="3.0"></web-app>之后把ExtJs4中所需要的css,js拷贝到WebContent文件夹下,这东西在《【ExtJs】ExtJs4.2.1的配置与Helloworld》(点击打开链接)已经讲过,之后的目录结构如下图,lib中没有任何东西,无须任何额外的jar包。

2、新建Ajax.html如下,里面有一个id为btn1的按钮,关键是引入了ExtJs资源之后的那段脚本,很简单的,指明btn1被点击之后的动作,向Helloworld.jsp这个页面,传递参数a=10,b=20然后以POST的方式传递,Helloworld.jsp返回的东西是去除HTML标签的纯文本response.responseText,一般Ajax只传Json与文本

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax</title><script type="text/javascript" src="js/ext-all.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><script type="text/javascript" src="js/ext-lang-zh_CN.js"></script><link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" ></head><body><button id="btn1" type="button" >请求Helloworld.html</button></body></html><script>Ext.onReady(function(){Ext.get("btn1").on("click", function () {Ext.Ajax.request({url: 'Helloworld.jsp',params: { a: 10, b: 20 },method: 'POST',success: function (response, options) {Ext.MessageBox.alert('成功', response.responseText);},failure: function (response, options) {Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号:' + response.status);}});});});</script>3、Helloworld.jsp这个页面更加简单,仅仅就是JSP版的获取参数,然后这把个参数打印出来。JSP刚入门的都会。

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Helloworld</title></head><body><%String a=request.getParameter("a");String b=request.getParameter("b");%>Helloworld,传过来的A为:<%=a%>,传过来的B为:<%=b%></body></html>三、php版的ExtJs的Ajax

1、php更加简单了,连web.xml与WebContent这些烦人的东西都没有,其目录结构如下,与上面的基本一样的

2、Ajax.html就把响应页面从Helloworld.jsp改成Helloworld.php,其余一字未改

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ajax</title><script type="text/javascript" src="js/ext-all.js"></script><script type="text/javascript" src="js/bootstrap.js"></script><script type="text/javascript" src="js/ext-lang-zh_CN.js"></script><link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" ></head><body><button id="btn1" type="button" >请求Helloworld.html</button></body></html><script>Ext.onReady(function(){Ext.get("btn1").on("click", function () {Ext.Ajax.request({url: 'Helloworld.php',params: { a: 10, b: 20 },method: 'POST',success: function (response, options) {Ext.MessageBox.alert('成功', response.responseText);},failure: function (response, options) {Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号:' + response.status);}});});});</script>3、Helloworld.php也是php刚入门的童鞋都会的,简单的获取参数,然后这把个参数打印出来

<?php$a=$_REQUEST["a"]; $b=$_REQUEST["b"];echo "helloworld,传过来的a为:".$a.",传过来的b为:".$b;?>运行结果如下:

学做任何事得按部就班,急不得

【ExtJs】ExtJs的Ajax

相关文章:

你感兴趣的文章:

标签云: