ExtJS5.1學習筆記9——Ext中的Ajax請求

阿新 • • 發佈：2019-01-13

下面的程式碼展示了在Ext中使用Ajax的方法：

首先是html檔案的程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 下面是三個必須引入的檔案 -->
		<link rel="stylesheet" type="text/css" href="../../build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
		<script src="../../build/ext-all.js"></script>
		<script src="../../build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

		<script type="text/javascript">
			Ext.onReady(function(){
				var form = Ext.create('Ext.form.Panel', {
					renderTo: 'form',
					frame: true,
					title: 'Login',
					width: 300,
					height: 250,
					layout: 'form',
					bodyPadding: 20,
					fieldDefaults: {
						labelSeparator: '：',
						labelWidth: 50,
						labelAlign: 'left'
					},
					items: [{
						fieldLabel: '姓名',
						xtype: 'textfield',
						name: 'username'
					}, {
						fieldLabel: '密碼',
						xtype: 'textfield',
						inputType: 'password', //加上該屬性後，輸入框變為密碼框
						name: 'password'
					}],
					buttons: [{
						text: '登入',
						handler: login
					}]
				});
				
				function login(){
					var formValues = form.getForm().getValues();//獲取表單中的所有欄位的值
					//分別獲取username和password的值
					var username = formValues['username'];
					var password = formValues['password'];
					var config = {
						url: 'login.php',//請求的URL
						params: {//請求引數
							username: username,
							password: password
						},
						method: 'post',//指定post請求
						callback: function(options, success, response){//請求完成的回撥函式
							Ext.Msg.alert('message', response.responseText);
						}
					};
					Ext.Ajax.request(config);//傳送請求
				}
			});
		</script>
	</head>
	<body>
		<div id="form"></div>
	</body>
</html>

在瀏覽器中的效果如下圖：

點選登入按鈕後，會發送請求給login.php頁面，該頁面的程式碼如下：

<?php
	$username = $_POST["username"];
	$password = $_POST["password"];
	if($username == 'zhangsan' && $password == '123456'){
		echo '登入成功';
	}else{
		echo '登入失敗';
	}
?>

在這個頁面中，只是簡單的判讀了使用者名稱和密碼如果是zhangsan和123456，就返回登入成功的訊息，否則返回登入失敗的訊息

ExtJS5.1學習筆記9——Ext中的Ajax請求

下面的程式碼展示了在Ext中使用Ajax的方法：首先是html檔案的程式碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 下面是三個必

ExtJS5.1學習筆記7——表單的提交和載入

在學習ExtJS的表單提交時，遇到了一些問題，現在記錄如下： 1、ExtJS的表單提交分為兩種：Ajax方式的提交和標準方式的提交我們在普通的html表單中提交資料時，預設會跳轉到新的頁面，但是使用ExtJS的Ajax方式提交時，是不會跳轉到新的頁面的，使用標準方式才會跳

sqlite學習筆記9：C語言中使用sqlite之插入數據

name article void num mes cut cpp content int 前面創建了一張表，如今給他插入一些數據。插入數據跟創建表差點兒相同，不過SQL語言不一樣而已，完整代碼例如以下： #include <stdio.h> #inclu

Linux學習筆記4-CentOS7中redis3.2.9安裝教程

錯誤 img make .gz 需要 down images red pre redis下載地址：http://www.redis.cn/download.html 1、將下載過來的redis-3.2.9.tar.gz文件復制到/usr/local文件夾下 2、tar x

Docker技術入門與實戰第二版-學習筆記-9-Docker Compose 專案-1-舉例說明

Docker Compose 是 Docker 官方編排(Orchestration)專案之一，負責快速在叢集中部署分散式應用 Compose 通過一個配置檔案來管理多個Docker容器，在配置檔案中，所有的容器通過services來定義，然後使用docker-compose

OpenCv學習筆記(七)---OpenCv中的基本繪圖函式,圓，橢圓，線段，矩形，多邊形的繪製(1)

(一)本節教程的目的本節你將學到: 1--如何使用Point在影象中定義2D點 2--如何以及為何使用Scalar 3--用OpenCv的函式Line繪直線 4--用OpenCvd的函式ellipse繪製橢圓 5--用OpenCv的函式rectangle繪矩形

Android中Telephony學習筆記(9)-Phone相關類

PhoneNumberUtils 提供多種方法工具處理電話號碼字串，工具類。 Constants FORMAT_JAPAN：日本區號列表 FORMAT_NANP：北美洲電話區號列表 FORMAT_UNKNOWN：未知地區 PAUSE TOA_International

python學習筆記9.1-系統互動介面

本文主要主要介紹python語言user與作業系統的互動介面，主要包括直接輸入或者系統引數兩種輸入方式，輸出主要就是print函式和format()表示式了，前面已經詳細的說過了，參閱部落格： python學習筆記2.2-print函式以及格式化輸出 1

Android:日常學習筆記(9)———探究廣播機制

ora rri enabled cas 管理 encoding protect 其他 acc Android:日常學習筆記(9)———探究廣播機制引入廣播機制 Andorid廣播機制　　廣播是任何應用均可接收的消息。系統將針對系統事件（例如：系統啟動或設備開始充電時）傳

【學習筆記】Java中生成對象的5中方法

目標獲得 cti com pre lan except 我們 highlight 概述：本文介紹以下java五種創建對象的方式： 1.用new語句創建對象，這是最常用的創建對象的方式。 2.使用Class類的newInstance方法 3.運用反射手段，調用java.la

python學習筆記9：正則表達式

使用引入常用常用的正則表達式需要 style pan 表達式 span 一、簡介　　正則表達式就是用來查找字符串的；用來匹配一些比較復雜的字符串。　　使用正確表達式需要引入re模塊（regular定期的有規律的）　　二、匹配字符串的方法

python學習筆記9：面向對象編程，類

數據相同屬性技術 -o 必須是把 oop ack 繼承一、面向對象編程　　面向對象--Object Oriented Programming，簡稱oop，是一種程序設計思想。　　還有另一種程序設計思想——面向過程編程。面向過程的思想是把一個項目、一件事情按照一定

Android 學習筆記--9妹圖片+代碼混淆+打包

文件名打包 andro span apk 使用背景透明學習筆記 tro 一、Android Studio 創建.9文件註：找一張背景透明的png圖片，將文件名改成 " xxxx.9.png " 然後放到drawable文件中，雙擊註：有一種

LR學習筆記9-回放測試腳本

參數 run es2017 show 篩選器結果 idt bsp rand 主要學習內容如下：--設置run time settings --實時觀察回放的圖像 --回放腳本 --查看results 1.設置run time settings，具體設置如下：路徑在：Vu

Jmeter學習筆記9-性能測試實踐_FTP程序

-- csharp sharp arp code common open 打開還要【1】需求：上傳一個文件到服務器（put）下載一個文件到本地（get）【2】演示示例：從CRMS_Xshell_FTP中的/crmsfs/bank/

43、我的C#學習筆記9

c#特殊運算符：is運算符is運算符用於檢查變量是否為指定的類型。如果是，返回真；否則，返回假。比如：創建一個控制臺應用程序，判斷整型變量i是否為整數類型。代碼如下：int i=0;bool result=(i is int);Console.WriteLine(result);Console.ReadLin

【知了堂學習筆記】java中常用集合的理解

style out hset 篩選 arraylist list 內容必備 foreach 　　最近學習了java中常用集合類的一些知識，在這裏作為一只小白，我來談談我的理解，順帶總結知識點。引入：在沒有接觸之前，聽到集合，給我感覺是想到了數學中的集合一樣，裏面存放著一

[離散時間信號處理學習筆記] 9. z變換性質

ali nbsp tro mat ack 卷積結果 n-1 學習筆記 z變換描述 $x[n] \stackrel{\mathcal{Z}}{\longleftrightarrow}X(z) ,\quad ROC=R_x$ 序列$x[n]$經過z變換後得到復變函數$X(z)

Mysql DBA 高級運維學習筆記-刪除表中數據

全部邏輯 ase 學習大於 del dep 記錄 rom 9.11 刪除表中數據命令語法：delete from 表名 where 表達式實踐：（1）刪除表student中編號為3的記錄 mysql> use zbf Database changed m

python 3.x 學習筆記9 (面向對象)

表現技術發展計算多種實現類方法 run spa col 對數 1.面向對象面向對象是一種對現實世界理解和抽象的方法，是計算機編程技術發展到一定階段後的產物。 2.類(class): 一個類即是對一類擁有相同屬性的對象的抽象、藍圖、原型。在類中定義了這些

ExtJS5.1學習筆記9——Ext中的Ajax請求

相關推薦