7.16 原生JS AJAX GET与原生JS AJAX POST 请求数据 - HTML&CSS&JS

首页 > 博客列表 > 7.16 原生JS AJAX GET与原生JS AJAX POST 请求数据

博主信息

博文 36

粉丝 4

访问量 39066

专题推荐

更多>

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>7.16原生js的AJAX-GET</title>
	</head>
	<body>
		<div class="wrap">
			<label for="user_id">用户名</label>
			<input type="text" name="user_id" id="user_id" value="" />
			<p id='tips'></p>
			
			
		</div>
		<script type="text/javascript">
			//获取输入框元素
			var input=document.getElementById('user_id');
			//获取提示框元素
			var tips=document.getElementById('tips');
			
			//1 创建请求对象
			var XHR=new XMLHttpRequest();
			//给input添加键盘事件
			input.addEventListener('keypress',getUserInfo,false);
			//事件函数
			function getUserInfo (ev) {
				if (ev.key==='Enter') {
					//根据用户输入内容进行判断
					switch (true){
						case input.value.length===0:
						    tips.innerHTML='<span style="color:red>">ID不能为空</span>'
							return false;
						case isNaN(input.value):
						    tips.innerHTML='<span style="color:red>">ID必须是正整数</span>'
							return false;
						default:
							// 2 监听 成功回调 break;
							XHR.addEventListener('readystatechange',successCallback,false);
							// 3 设置请求参数
							// 格式XHR.open(请求类型,请求的服务器上的处理脚本,是否异步请求)
							//因为是get请求所有参数在url上 但是参数转码才安全 所以先进行转码
							var data=encodeURIComponent(input.value);
							XHR.open('GET','php/user_info.php?user_id='+data,true);
							
							//4 发送：异步请求
							XHR.send(null);
					}
				}	
			}
			//成功回调函数
			function successCallback (ev) {
				//查看请求过程的状态
				console.log(ev.target);
				if(XHR.readyState===4){
					//查看确定返回值是否正确
					console.log(XHR.responseText)
					//把返回值插入到页面上 dom操作
					tips.innerHTML=XHR.responseText
				}
			}
			//添加一个input的事件 只要内容有变化就清空tips的提示信息。
			input.addEventListener('input',function(ev){
				tips.innerHTML=null;
			},false);
		</script>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

服务器端php部分

<?php
$userId = isset($_GET['user_id']) ? $_GET['user_id'] : null;

$userInfo = [
    ['user_id'=>1, 'username'=>'苍老师', 'gender'=>'女', 'age'=>26],
    ['user_id'=>2, 'username'=>'波老师', 'gender'=>'女', 'age'=>23],
    ['user_id'=>3, 'username'=>'黑老师', 'gender'=>'男', 'age'=>33],
];

$res = '';
foreach ($userInfo as $user) {
    if ($user['user_id'] === intval($userId)) {
        $res .= $user['user_id'].'---'.$user['username'].'---'.$user['gender'].'---'.$user['age'];
    }
}

echo empty($res) ? '<span style="color: red;">没有找到该用户名</span>' : $res;
exit;

-------------------------------------------------------------------------分割线

ajax post 流程分为4个不能乱！
1 创建ajax请求对象（xhr对象名字你喜欢就好随便起）

var XHR=new XMLHttpRequest();

2 监听成功回调（失败了也得有个结果哈）

XHR.addEventListener('readystatechange', successCallback, false);

successCallback函数名可以自定义其他是固定格式

3 设置请求参数（键值对的方式传递需要拼接）

XHR.open('POST', '/php/check.php', true);

//因为是post发送，需要设置请求头。键值对

XHR.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=utf-8');

4 发送异步请求

先收集要发送的数据
var data = 'username='+username+'&password='+password+'&email='+email+'&remember='+remember;
发送数据
XHR.send(data);

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>7.16原生js的AJAX-POST</title>
	</head>
	<body>
		<div class="wrap">
			<h2>用户登录</h2>
			<form action="" method="post" name="login">
				<p>
					<label for="username">用户名 </label><input type="text" name="username" id="username" value="" />
				</p>
				<p>
					<label for="password">密   码 </label><input type="password" name="password" id="password" value="" />
				</p>
				<p>
					<label for="email">邮   箱 </label><input type="text" name="email" id="email" value="" />
				</p>
				<p>
					<label for="remember">级   别</label>
					<select name="remember" id="remember">
						<option value="1" name="day">一天</option>
						<option value="7" name="week">一星期</option>
						<option value="30" name="month">一个月</option>
					</select>
				</p>
				<input type="button" name="submit" value="提交" />
			</form>
			<script type="text/javascript">
				//获取需要处理的表单login
				var login=document.forms.namedItem('login');
				//获取到按钮
				var btn=login.submit;
				// 1 AJAX 创建  请求对象
				var XHR=new XMLHttpRequest();
				
				
				//前端开始啦 前端先验证数据 绑定事件来触发验证 。当输入域失去焦点 (blur) 
				login.username.addEventListener('blur',isEmpty,false);
				login.password.addEventListener('blur',isEmpty,false);
				login.email.addEventListener('blur',isEmpty,false);
				
				//非空验证
				function isEmpty(ev){
					if(ev.target.value.length===0){
						console.log(ev.target)
						//来验证非空提示
						if (ev.target.nextElementSibling===null) {
							var tips=document.createElement('span');
							tips.style.color='red';
							
							//判断一下那个为空 来提示
							switch (ev.target.name){
								case 'username':
									tips.innerText='用户名不存在';
									break;
								case 'password':
									tips.innerText='密码不能为空';
									break;
								case 'email':
								    tips.innerText='邮箱不能为空';
								    break;
								default:
									tips.innerText='未知错误 *** 写bug的大灰狼QQ12345'
									break;
							}
							//把错误提示添加到 追加到父元素的里面的后面
							ev.target.parentNode.appendChild(tips);
						} 
						//如果 失去焦点的元素内容为空 再次指定焦点到元素上
						ev.target.focus();
					}
				}
				
				//当input内容有改变 清空提示信息 先添加事件
				login.username.addEventListener('input',clearTips,false);
				login.password.addEventListener('input',clearTips,false);
				login.email.addEventListener('input',clearTips,false);
				
				//clearTips 清除提示函数
				function clearTips(ev){
					//拿到tips元素
					var tips=ev.target.nextElementSibling;
					if (tips!==null) {
						//移除提示信息 
						tips.remove();
					}
				};
				
				//4 ajax事件
				btn.addEventListener('click',check,false);
				
				//事件函数
				function check (ev) {
					//让数据调用方便一点 
					var username=login.username.value;
					var password=login.password.value;
					var email=login.email.value;
					var remember=login.remember.value;
					
					//当有必填框为空禁止提交
					if (username.Length===0 || password.length ===0 || email.length ===0) {
						//不让点击 应该移除点击事件
						btn.removeEventListener('click',check,false);
						//因为是空 所以模拟失去焦点 让焦点到输入框
						var blueEvent=new Event('blur');
						login.username.dispatchEvent(blueEvent);
						return false;
					}
					
					//2 监听 成功回调
					XHR.addEventListener('readystatechange', successCallback, false);
					
					//3 设置 请求的参数
					XHR.open('POST', '/php/check.php', true);
					
					//因为是post发送，需要设置请求头。 键值对
					XHR.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=utf-8');
					    
					
					//4 发送：异步请求
					var data = 'username='+username+'&password='+password+'&email='+email+'&remember='+remember;
					XHR.send(data);
				}
				
				//成功回调函数
				function successCallback (ev) {
					if (XHR.readyState === 4) {
						console.log(XHR.responseText)
					}
				}
				
			</script>
		</div>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

服务器端php部分

<?php
session_start();

// 获取表单提交的数据
$username = $_POST['username'];
$email = $_POST['email'];
$password = sha1($_POST['password']);
$remember = $_POST['remember'];

// 为简化代码,不用数据表验证,使用硬编码,只验证邮箱与密码
if ($email === 'admin@php.cn' && $password === sha1('123456')) {
    $_SESSION['username'] = $username;
    $_SESSION['email'] = $email;
    echo json_encode(['status'=>1, 'message'=>'验证成功']);
} else {
    echo json_encode(['status'=>0, 'message'=>'验证失败']);
}
exit;

批改状态：合格

老师批语：写得不错, 课堂案例多看看

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

2条评论

大灰狼 2019-09-18 23:26:02

3Q。貌似你是第一个评论de~

2楼

荼谧故人 2019-07-19 07:23:10

凌晨两点发的啊！保重身体啊！

1楼

作者最新博文

7.10 dom常见操作方法

2019-07-12 16:06:53