【ExtJs】ExtJs的Ajax_extjs ajax

作者：盐析白兔 | 2024-03-27 05:52:24

踩

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="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 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" "http://www.w3.org/TR/html4/loose.dtd">
<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;
?>

运行结果如下：

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】