【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="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;
?>

运行结果如下:

时间: 2024-11-13 09:59:38

【ExtJs】ExtJs的Ajax的相关文章

ExtJS中Ext.Ajax.request与form1.getForm().submit的基本区别

相同点:都属于Ajax提交方式! 不同点:Ext.Ajax.request是Ext.data.connection的一个实例 form1.getForm().submit是BasicForm的一个实现方式 使用上的区别: 1.form1.getForm().submit常用在表单提交的时候,就是说要提交页面数据,比如新增和修改数据页面 2.Ext.Ajax.request常用在根据参数提交的时候,比如删除,我们把页面选中的ID进行遍历,封装在一个Array中,作为一个参数做Ajax的提交 例子:

ExtJs from和Ajax提交

// 方式1:加载编辑数据 loadData : function(id) { var className = portal.menu.EditPanel; // 清空原有的信息 className.fromPanel.getForm().reset(); // 查询加载数据 className.fromPanel.getForm().load({ url : 'menu/findById', method : 'POST', params : { id : id // 提交的数据参数 }, w

ExtJs 4.x Ajax简单封装

/** * Ajax 请求 */ Ext.define("SinoCloudAjaxRequestClass", { constructor : function () { var me = this; var viewport = me.getViewPort(); if(viewport){ window.sinoCloudAjaxRequestClassLoadingMak = new Ext.LoadMask(viewport, {msg:"处理中..."}

[extjs] extjs 5.1 API 开发 文档

官方博客发布了这个新版本说明,英文文章请戳下面 http://www.sencha.com/blog/announcing-sencha-ext-js-5.1/ 翻译版本请戳下面: http://extjs.org.cn/node/738 新版本下载地址: 官方下载地址: http://www.sencha.com/products/extjs/download/ext-js-5.1.0/3301 http://cdn.sencha.io/ext/gpl/ext-5.1.0-gpl.zip ex

extjs ajax请求与struts2进行交互

sencha extjs 5 增加一个struts2的配置,这样可以在设置好前台布局之后,与后台交互获取数据显示.现在有一个问题是struts2对于url的跳转action支 持比较良好,但是对于像Extjs这样,ajax请求的,无url跳转的实现,还是需要一点点技巧的.本文实例讲解一个Ext.Ajax.request 的请求实例,返回后台处理之后的结果. 步骤一:创建struts2的配置文件struts.xml <?xml version="1.0" encoding=&quo

[ExtJS5学习笔记]第三十二节 sencha extjs 5与struts2的ajax交互配置

本文地址:http://blog.csdn.net/sushengmiyan/article/details/43487751 本文作者:sushengmiyan ------------------------------------------------------------------------------------------------------------------------------------ sencha extjs 5 增加一个struts2的配置,这样可以在

ExtJS Ext.Ajax.request最好设为同步

ExtJS 中Ext.Ajax.request最好设为同步,即async: false,因为如果Ajax后面需要用到Ajax更新的数据的话,设置同步,后面才能用到最新的数据. function GetPatientOrder() { Ext.Ajax.request({ url: '/CommonAshx/Order.ashx', method: 'get', async: false, params: { gurd: "GetOrder", patientCardNo: Ext.ge

ExtJS基础知识总结

概述 最近一直在做相关ExtJs方面的项目,遇到了ExtJs使用方面的一系列问题,现在将使用技巧做个记录汇总,以便于下次能够快速使用.以下都是ExtJs控件的常用方法,做简单汇总,俗话说,好记星不如烂笔头,总一天会使用的. 基础控件使用技巧 1.Grid表格操作:获取Store的数据信息和操作列表行数据 //创建一个grid var rowPanel = Ext.create('Ext.grid.Panel', {}); //获取grid对应的Store的数据条数 rowPanel.getSto

Extjs GridPael用法详解

Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel的详细用法. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/

Extjs 表单提交送给新手

Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 1.表单ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的btn函数,按照表单的name进行提交.提交数据后根据后台的返回值不同来回调success或者failure函数(和单独ajax的提交不同),后台返回值的形式:[如果返回outputResult(“{success:true}”),则调用success的函数.如果返回:outputResult(“{success:false,reason: