今天讲了ajax的组成及使用方法：首先我们看看一个简单的ajax的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<input type="text" id="uid" />

<span id="tishi"></span>

</body>

<script type="text/javascript">

$("uid").blur(function(){

    //1.取内容

    var uid = $(this).val();

    //2.拿内容去数据库验证

    $.ajax({

        url:"chuli.php", //请求地址

        data:{yhm:uid},  //要提交的数据

        type:"POST",   //提交的方式

        dataType:"TEXT", //返回类型 TEXT字符串；JSON;XML

        success:function(data){//回调函数

            if(data==0)

            {

                $("#this").text("该用户名可用");

                $("#this").css("color","green");

            }

            else

            {

                $("#this").text("该用户名已存在");

                $("#this").css("color","red");

            }

            }

        })

    //3.给出提示

    })

</script>

</html>

我们可以看到里面有一些常用的类型：url,data,type,dataType,以及验证成功后的返回操作方法：success。上面都做了详细的注释，便于理解，下面是处理页面：

<?php

$uid = $_POST["yhm"];

include("DBDA.class.php");

$db = new DBDA();

$sql = "select count(*) from users where uid='{$uid}'";

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

echo $arr[0][0];

这里面没有任何的逻辑处理，只有简单的数据验证和处理。所有的逻辑处理都在客户端页面里面。

下面让我们做一个登陆的ajax页面：

首先看登录页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

</head>

<body>

<h1>登录页面</h1>

<div>用户名：<input type="text" id="uid" /></div>

<div>密&nbsp;码:<input type="text" id="pwd" /></div>

<input type="button" id="btn" value="登录" />

</body>

<script type="text/javascript">

$("btn").click(function(){

    //1.取数据

    //2.验证数据

    //3.提示

    var uid = $("#uid").val();

    var pwd = $("#pwd").val();

    $.ajax({

        url:"dlchuli.php",

        data:{uid:uid,pwd:pwd},

        type:"POST",

        dataType:"TEXT",

        success: function(data){

            //使用data之前，对data进行去空格处理

            if(data.trim()=="OK")

            {

                window.location.href = "main.php";

            }

            else

            {

                alert(用户名或密码错误);

            }

        }

        });

    })

</script>

</html>

显示效果如上图：

其次是处理页面：

<?php

include("DBDA.class.php");

$db = new DBDA();

$uid = $_POST["uid"];

$pwd = $_POST["pwd"];

$sql = "select pwd from users where uid='{$uid}'";

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

if($arr[0][0]==$pwd && !empty($pwd))

{

    echo "OK";

}

else

{

    echo "NO";

}

这样就能实现登陆处理页面，并且不会让用户访问数据库，大大增加了用户体验性和安全性。

ajax基础部分的更多相关文章

  1. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

  2. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  3. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  4. Ajax基础2

    什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...

  5. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  6. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

  7. jQuery基础---Ajax基础教程（二）

    jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...

  8. jQuery基础---Ajax基础教程

    jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...

  9. Ajax基础知识（二）

    接上一篇  Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...

  10. 原生AJAX基础讲解及兼容处理

    原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...

随机推荐

  1. 在发板实现24位jpg和bmp图片用手划动显示上一张与下一张图片

    arm-linux-gcc test.c -ljpeg -I /usr/local/libjpeg-8a/include/ -L /usr/local/libjpeg-8a/lib/ 这样编译 代码 ...

  2. U盘安装系统

    http://www.ushendu.com/usdpzxt/1566.html http://www.ushendu.com/plus/view.php?aid=1571 http://www.ud ...

  3. DNS没有生效的几个原因

    1.记录没有正确添加 请确认你的域名记录是否完全正确的添加.线路类型正确,记录类型正确 2.域名还没有生效 这个情况还会有另外一个现象,就是域名有时候可以ping,有时候不能ping. 这是因为你当地 ...

  4. 大型网站制作前端使用PHP后台逻辑用 Java

    对于网站团队,大概可以按照职责分为前端.后端.架构三种角色. 前端:负责所有和用户有交互的产品,包括 WEB以及手机客户端 后端:负责各种业务 API 的开发,以及服务器端其他系统的开发 架构:负责设 ...

  5. 《深度探索C++对象模型》笔记——Data语意学

    Data Member的绑定 inline member functin躯体之内的一个data member绑定操作会在整个class声明完成之后才发生. argument list中的名称还是会在它 ...

  6. 自用LogSystem入库分享

    .mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...

  7. 2017-01-27-hibernate环境搭建

    Hibernate的环境搭建(uid方式): 1:导入包 2:创建实体对象 3:hibernate的映射配置文件 4:hibernate的核心配置文件 5:创建测试类实现表的创建 2:创建实体对象-U ...

  8. 《JAVASCRIPT高级程序设计》节点层次和DOM操作技术

    DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息,每种类型都继承与Node接口,因此都共同享有一些属性和方法,同时,也拥有 ...

  9. 编写JQuery插件-1

    看到这篇文章的人相信大家都学会了jq,或者正在用jq,在这里简单介绍一下jq的插件封装: jQuery的插件主要分为3种类型: 1.封装对象方法的插件 这种插件是将对象的方法封装起来,用于对通过选择器 ...

  10. ASP.NET Core MVC 中设置全局异常处理方式

    在asp.net core mvc中,如果有未处理的异常发生后,会返回http500错误,对于最终用户来说,显然不是特别友好.那如何对于这些未处理的异常显示统一的错误提示页面呢? 在asp.net c ...