登陆功能:ajax的简单应用

前端之家收集整理的这篇文章主要介绍了登陆功能:ajax的简单应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近在w3school上学习web相关的知识,感觉很有意思。发现最好的学习方法就是多写代码,所以构思用学到的知识做一个小网站。

网站首先要实现登陆。登陆的验证功能使用Javascript在前端实现。当验证成功时提交到后台后台进行访问数据库并验证用户名和密码。而前端和后台的交流就用ajax来实现。ajax是一种不用重新加载整个页面而更新部分网页的技术。

在前端通过ajax可以将用js得到的前端表单数据传到后台PHP页面,然后后台PHP页面进行验证并且通过echo打印出验证结果传递到前台

Jquery真的是大大简化了前端编程过程。在引入jquery库后,ajax其实就是两个简单的函数,$.post()和$.get().分别为使用post和get方法传递数据。而区别就是get方法通过url传递数据,数据为大家可见;而post方法通过http协议传递数据,较为安全。

post方法传递数据:

$.post("url",{json},callback(function(result){}));
其中url为数据接收的PHP页面,json为要传递的数据,格式为{name:John,password:******,......}

PHP页面的返回值为result,当得到返回值后触发callback函数

下面是代码

HTML页面

input type="text" name="name" id="name" placeholder="User_Name">
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
<button type="submit" id="submit" class="btn btn-success">Sign_In</button>

JS代码
$.post("check_ajax.PHP",{name:lname,password:lpassword},function(result){
flag=result;
if(flag=="200")//接收后台验证成功的消息,并@R_300_404@面
{
alert("Welcome "+lname);
location.href="library.PHP";
}
if(flag=="404")
{
alert("Sorry,this name doesn`t exist");
}
if(flag=="666")
{
alert("Wrong password");
}
});



PHP代码
<?PHP
	$name=$_POST['name'];//从POST数组中的到前端传递的数据
	$password=$_POST['password'];	
	error_reporting(E_ALL ^ E_DEPRECATED);//设置报警级别。当连接数据库时,用MysqL_xxx语句会报警报
	$con=MysqL_connect("localhost","root","1234","MysqL");
	if(!$con){die(MysqL_error());}
	MysqL_select_db("library",$con);
	$result=MysqL_query("select * from user where name='".$name."'",$con); //查询数据库
	$row=MysqL_fetch_array($result);
	if(MysqL_num_rows($result)==0)
	{
		echo "404";//对前端返回查询信息
	}
	else
	{
		$check=(string)$row['password'];
		if($check==$password)
		{
			echo "200";
		}
		else {
			echo "666";
		}
	}
	MysqL_close($con);//关闭数据库
	
 ?>
原文链接:https://www.f2er.com/ajax/162424.html

猜你在找的Ajax相关文章