ExtJS5.1学习笔记9——Ext中的Ajax请求_ext.create 发送ajax

作者：你好赵伟 | 2024-03-27 05:53:18

踩

ext.create 发送ajax

下面的代码展示了在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，就返回登录成功的消息，否则返回登录失败的消息

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/322177?site