anyuan2002.com - vwin网

查找: 您的方位主页 > 电脑频道 > 编程代码 > 阅览资讯:Ajax根底与登入常识介绍

Ajax根底与登入常识介绍

2017-08-23 09:34:50 来历:www.anyuan2002.com 【

Ajax根底与登入常识介绍

Ajax 是 Asynchronous Javascript and XML的缩写。

Ajax的长处:

长处:减轻服务器的担负,按需取数据,最大程度的削减冗余恳求

部分改写页面,削减用户心思和实践的等待时间,带来更好的用户体会

根据xml规范化,并被广泛支撑,不需装置插件等

进一步促进页面和数据的别离

Ajax包括下列技能:

根据web规范(standards-based presentation)XHTML+CSS的表明;

运用 DOM(Document Object Model)进行动态显示及交互;

运用 Javascript 将一切的东西绑定在一起。

也便是说Ajax最大的特色便是能够完成动态不改写

运用Ajax:

比如:

在数据库中的一张表:

完成点击检查用户名是否可用:

主页面代码:

vwin娱乐场
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="jquery-1.11.2.min.js"></script>
 </head>
 <body>
  输入一个用户名:<input type="text" id="zhang" />
  <span id="tishi"></span>
 </body>
</html>
<script>
 //给文本框加上事情
 $("#zhang").blur(function(){
  //1取内容
  var zhang = $(this).val();
  //val取到表单元素、给变量
  //2将取到的内容内容区数据库验证
  //调用Ajax
  $.ajax({
   type:"POST",
   //提交办法
   url:"chuli.php",
   //恳求哪一个php文件(恳求地址)
   data:{yhm:zhang},
   //给zhang取名yhm,传曩昔,是一个json
   //恳求处理页面需不需要传数据曩昔,不需要传不必写
   dataType:"TEXT",
   //处理页面回来的类型:TEXT字符串 JSON,JSON,XML,只要三种类型
   success:function(data){
    //回调函数
//    data为回来的值
    //成功之后要调用的函数
    if(data==0)
    {
     //假如为0
     $("#tishi").text("该用户名为0;可用!");
     $("#tishi").css("color","green");
    }
    else
    {
     $("#tishi").text("该用户名已存在;不可用!");
     $("#tishi").css("color","brown");
    }
   }
  });
  //3给出提示
 })
</script>

接下来做处理页面:

<?php
$zhang = $_POST["yhm"];
//取值
include("db.class.php");
$db = new db();
$sql = "select count(*) from mydb where zhang = '{$zhang}'";
$arr = $db->Query($sql);
echo $arr[0][0];
//直接输出相当于回来
?>

图:

输入已存在用户名:

输入不存在的用户名:

再来写一个登入:

登入页面的代码:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>登入页面</h1>
<div>帐号<input type="text" id="zhang"/></div>
<div>暗码<input type="text" id="mi"/></div>
<input type="button" id="btn" value="登入"/>
</body>
</html>
<script>
 $("#btn").click(function(){
  //1取数据
  var zhang = $("#zhang").val();
  var mi = $("#mi").val();
  //2验证数据
  $.ajax({
   url:"drcl.php",
   data:{zhang:zhang,mi:mi},
   type:"POST",
   dataType:"TEXT",
   success:function (data) {
    //回调函数
    //判别回来值
    if(data=="ok")
    {
     window.location.href = "zym.php";
    }
    else
    {
     alert("用户名或暗码过错");
    }
   }
  });
  //提示
 })
</script>

接下来是登入处理页面:

<?php
include ("db.class.php");
$db = new db();
$zhang = $_POST["zhang"];
$mi = $_POST["mi"];
//取值
$sql = "select mi from mydb WHERE zhang = '{$zhang}'";
$arr = $db->Query($sql);
if($arr[0][0]==$mi && !empty($mi))
{
 echo "ok";
}
else
 {
  echo "no";
 }
?>

来看一下图,假如输入的不对 直接在本页面提示:

输入的对就跳转:

用Ajax写登入的优点便是提示过错的时分不必跳到其他页面。

以上所述是小编给咱们介绍的Ajax根底与登入教程,期望对咱们有所协助,假如咱们有任何疑问请给我留言,小编会及时回复咱们的。在此也非常感谢咱们对vwin网站的支撑!


本文地址:http://www.anyuan2002.com/bcdm/91465.html
Tags: 根底 ajax 登入
修改:vwin网
推行内容
引荐阅览
抢手引荐
引荐文章
关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部