Ajax 概念分析举例

时间 2019-12-08

标签 ajax 概念分析举例栏目 Ajax 繁體版

原文原文链接

Ajax是结合了访问数据库，数据访问，Jquery 能够作页面局部刷新或者说是页面不刷新，我可让页面不刷新，仅仅是数据的刷新，没有频繁的刷页面，是如今比较经常使用的一种方式作页面
那么它是怎么实现页面无刷新的呢？接下来咱们一块儿看下原理javascript

先看下以前咱们刷新页面的方式原理php

再看下Ajax的原理css

Ajax最大的特色就是这个页面总体上所有使用的是JS 脚本语言或者是Jquery都行，这俩都是前端的语言，运行的时候不须要到服务器端运行，只要在浏览器下就能够执行，因此Ajax就利用了这一点，使用Jquery，JS来操做前端页面的数据。前端

好比说：作一个查询，我须要先取出用户给的数据，我JS取出来，而后发送到一个地方去，让另一个地方去处理，处理完后返回给我。而后JS拿这个数据把内容替换掉，因此全部的工做都是拿JS完成的java

这种模式执行的时候就不会有页面的刷新，由于这个页面没有从新请求，这个页面里仅仅变的是数据jquery

接下来咱们看一下Ajax怎么来实现ajax

举例：判断用户名是否在数据库里面存在sql

通常ajax是用Jquery来写，首先咱们先给Uid这个文本框加一个事件blur（失去焦点触发），接着取用户名，从数据库查，看是否能查到。取到用户名后下一步咱们就要查数据库，JS不能直接查，因此调ajax！！$.ajax()这是一个方法！！数据库

调这个方法的时候须要传一个参数，这个参数须要是JSON数据格式浏览器

JSON里面用逗号分割，不是分号

第一个参数就是url表明的是把数据传到哪一个页面处理，页面的地址是什么

第二个参数就是data表明的是我调用testchuli.php的时候我要传递什么数据给它，要求也是一个JSON格式，花括号里你传几条数据就写几个值，如今咱们要传一个

{名字 u : 传哪一个值 uid}冒号前面的就是个名字，冒号后边的会解析变量

第三个参数就是type表明的是传值的方式

第四个参数就是dataType 注意 T 要大写表明是返回数据的格式，

若是写XML返回数据类型必须是XML，若是写JSON返回数据类型必须是JSON

若是写TEXT返回数据必须是字符串都是大写

第五个参数就是success表明的是成功，当处理页面执行成功以后，必须跟个匿名函数

匿名函数里面必须有个参数，这个方法有个名词叫回调函数

<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">


</style>
</head>

<body>
<input type="text" id="uid"/>
<span id="tishi"></span>
</body>
<script type="text/javascript">
$("#uid").blur(function(){
         //取用户名
         var uid = $(this).val();
         //查数据库，调ajax
         $.ajax({
                 url:"testchuli.php",//处理页面地址
                 data:{u:uid},//要传递的数据(提交)
                 type:"POST", //提交方式
                 dataType:"TEXT", //返回数据格式
                 success:function(data){   //回调函数
                           var str = "";
            
                           if(data=="OK")
                           {
                              str = "该用户名可用";
                              $("#tishi").css("color","green");
                           }
                           else
                           {
                               str = "该用户名存在";
                               $("#tishi").css("color","red");
                           }
                           $("#tishi").text(str);
                     
                     }
             
             })
    
    })

    
</script>

接下来咱们作一下处理页面

<?php
include("FZL.class.php");
$db = new FZL();

$uid = $_POST["u"];
$sql = "select count(*) from login where username='{$uid}'";

$attr = $db->Query($sql);

if($attr[0][0]>0)
{
    echo "NO";
}
else
{
    echo "OK";
}

再作一个登陆的练习：

<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">


</style>
</head>

<body>
<div>帐号：<input type="text" id="uid"/></div>
<div>密码：<input type="password" id="pwd"/></div>
<input type="button" value="登陆" id="btn" />

</body>
<script type="text/javascript">
$("#btn").click(function(){
        //取用户名和密码
        var uid = $("#uid").val();
        var pwd = $("#pwd").val();
        //调ajax
        $.ajax({
              url:"logincl.php",
              data:{u:uid,p:pwd},
              type:"POST",
              dataType:"TEXT",
              success: function(data){
                      if(data.trim()=="OK")
                      {
                          window.location.href="test.php";
                      }
                      else
                      {
                          alert("用户名或密码错误");
                      }
                  }
            });
    
    })
         
</script>

再作一下处理页面

<?php
include("FZL.class.php");
$db = new FZL();
$uid = $_POST["u"];
$pwd = $_POST["p"];

$sql = "select count(*) from login where username='{$uid}'";
$attr = $db->Query($sql);
if(!empty($pwd) && !empty($attr) && $attr[0][0]==$pwd)
{
    echo "OK";    
}
else
{
    echo "NO";
}

经过最近的练习你们好出错的地方除了字母拼写，字母大小写，空格，符号容易出现错误，重要的还有文件路径，因此养成良好的整理文件路径也很重要

Ajax 概念 分析 举例

Ajax 概念分析举例