1.ajax的基础知识

ajax是结合了jquery、php等几种技术延伸出来的综合运用的技术，不是新的内容。ajax也是写在<script>标签里面的。

如果使用ajax一定是要有1个处理页面的，处理页面只是操作数据库并且返回值，页面都是ajax处理的。

ajax的写法：

test.php

 <!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" />

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

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

 <!--引入jquery包-->

 <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的-->

 <style type="text/css">

 </style>

 </head>

 <body>

 <script type="text/jscript">

     $.ajax({//()里面是JSON数据，外层要加上{}。

         url:"chuli.php",//处理页面地址，表示ajax要用哪个页面处理

         data:{code:"n001"},//传递到处理页面的值，也是JSON数据，要用{}。如果传2个值就在{}里面加逗号，再写另外1个值。

         type:"POST",//传值方式，一般用POST方式，注意POST要大写。

         dataType:".TEXT",//返回值的类型。1.TEXT文本，字符串。2.JSON数据 3.XML可扩展标记语言，主要用在数据传递。

         success:function(data){//表示处理成功之后做什么,后面跟一个匿名函数。回调函数，表示处理页面处理完数据以后执行这个函数。data表示处理页面返回的值，用形参接收。

             },

         error:function(){//处理页面出错以后执行的函数。

             }

         });

 </script>

 </body>

 </html>

chili.php

 <?php

 $code = $_POST["code"];

 include("../DBDA.class.php");

 $db = new DBDA();

 $sql = "select name from nation where code='{$code}'";

 echo $db->StrQuery("$sql");//ajax的数据返回的话就直接输出

 ?>

2.用ajax做登录页面

denglu.php

 <!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" />

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

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

 </head>

 <body>

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

 <div>密码：<input type="text" id="pwd" /></div>

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

 </body>

 <script type="text/javascript">

 $(document).ready(function(e) {

     $("#btn").click(function(){//给按钮加点击事件

         //取用户名和密码

         var u = $("#uid").val();//取输入的用户名

         var p = $("#pwd").val();//取输入的密码

         //调ajax

         $.ajax({

             url:"dengluchuli.php",

             data:{u:u,p:p},//第二个u和p只是变量，可以随意写，dengluchuli.php里面的u和p都是第一个。

             type:"POST",

             dataType:"TEXT",

             success: function(data){

                     if(data.trim()=="OK")//要加上去空格，防止内容里面有空格引起错误。

                     {

                         window.location.href="main.php";//js跳转页面，要记住。

                     }

                     else

                     {

                         echo("用户名或密码错误");

                     }

                 }

             });

         })

 });

 </script>

 </html>

dengluchuli.php

 <?php

 $uid = $_POST["u"];

 $pwd = $_POST["p"];

 include("../DBDA.class.php");

 $db = new DBDA();

 $sql = "select password from login where username='{$uid}'";

 $mm = $db->StrQuery($sql);

 if($mm == $pwd && $pwd!="")

 {

     echo "OK";

 }

 else

 {

     echo "NO";

 }

 ?>

3.用ajax验证用户名是否可用

testuid.php

 <!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" />

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

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

 </head>

 <body>

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

 <span id="ts"></span>

 </body>

 <script type="text/javascript">

     $("#uid").blur(function(){//blur表示失去焦点时触发

         //取用户名

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

         //调ajax

         $.ajax({

             url:"uidchuli.php",

             data:{u:uid},

             type:"POST",

             dataType:"TEXT",

             success: function(data){

                     if(data>0)

                     {

                         $("#ts").html("该应户名已存在");

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

                     }

                     else

                     {

                         $("#ts").html("该应户名可用");

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

                     }

                 }

             });

         })

 </script>

 </html>

uidchuli.php

 <?php

 $uid = $_POST["u"];

 include("../DBDA.class.php");

 $db = new DBDA();

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

 echo $db->StrQuery($sql);

 ?>

4.动态调用数据库，搜索框里输入关键字，内容中含关键字的自动出现在输入框下面。

list.php

 <!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" />

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

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

 <style type="text/css">

 *{ margin:0px auto; padding:0px}

 .l{ width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; border-bottom:1px solid #60F}

 </style>

 </head>

 <body>

 <br />

 <div style="width:200px; height:35px; border:2px solid #60F">

     <input type="text" id="name" style="width:196px; height:31px" />

 </div>

 <div id="list" style="width:200px; height:500px; border:2px solid #60F; border-top:0px"></div>

 </body>

 <script type="text/javascript">

 $("#name").keyup(function(){

     //取名称

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

     if(n!="")

     {

         //调ajx

         $.ajax({

             url:"listchuli.php",

             data:{n:n},

             type:"POST",

             dataType:"TEXT",

             success: function(data){

                 var sz = data.split("|");

                 var str = "";

                 for(var i=0;i<sz.length;i++)

                 {

                     str = str+"<div class='l'>"+sz[i]+"</div>";

                 }

                 $("#list").html(str);

                 }

             });

         }

         else

         {

             $("#list").html("");

         }

     })

 </script>

 </html>

listchuli.php

 <?php

 $name = $_POST["n"];

 include("../DBDA.class.php");

 $db = new DBDA();

 $sql = "select areaname from chinastates where areaname like'%{$name}%'";

 echo $db->StrQuery($sql);

 ?>

ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库的更多相关文章

  1. 使用PHP中的ajax做登录页面、验证用户名是否可用、动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  2. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  3. 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  4. Ajax基础知识 浅析（含php基础语法知识）

    1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...

  5. Ajax基础知识《一》

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

  6. Ajax基础知识（二）

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

  7. ajax请求session失效重定向到登录页面

    在ajax请求的页面引入一个自定义的AjaxRedirect.js的文件 AjaxRedirect.js的代码如下: $(function(){ $.ajaxSetup({ type: 'POST', ...

  8. Ajax基础知识梳理

    Ajax用一句话来说就是无须刷新页面即可从服务器取得数据.注意,虽然Ajax翻译过来叫异步JavaScript与XML,但是获得的数据不一定是XML数据,现在服务器端返回的都是JSON格式的文件. 完 ...

  9. 【前端】之AJAX基础知识

    AJAX 简介 AJAX(Asynchronous JavaScript and XML),异步的JavaScript和XML AJAX不是编程语言,只是一种在无需重新加载整个网页的情况下能够更新部分 ...

随机推荐

  1. js 时间时间戳互换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  2. [原创]一种基于Python爬虫和Lucene检索的垂直搜索引擎的实现方法介绍

    声明:本文首发在博客园晨星落羽,Shulin_Cao和lvmememe首页,转载请注明出处. 前言 2016.5到2017.5,我们三人(lvmememe,Shulin_Cao,晨星落羽)共同完成了一 ...

  3. 蓝桥杯-凑算式-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  4. 小谈ThinkPHP

    ThinkPHP也是一个MVC框架,分视图.控制器和模型,和Yii框架相比相对较好理解,并且是轻量级的框架(相对于Yii来说),在使用Yii框架时候如果将框架放在项目文件中,用编辑器打开文件都比较慢, ...

  5. 前端 tips

    1.==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. 2.首次为变量赋值时务必使用var关键字,变量没有声明而直接赋值 ...

  6. [笔记]A*寻路算法初探

    写在开始之前 最近突然对各路游戏的寻路算法很感兴趣,于是去学习了下游戏里的AI们是如何寻路的.网上相关内容很多,但同时有些说法也不一,制作自己的A* 算法时也有因不同的说法而困惑.整理多方资料并自己实 ...

  7. wdc网站部署问题

    最近公司新买了一个服务器,将项目迁移到新服务器上,按照wdcp安装方法,部署了lnamp环境,具体方法如下: 安装方法1 只安装wdcp面板看看wget http://down.wdlinux.cn/ ...

  8. MySQL编译安装错误提示合集

    1>安装mysql在初始化的时候,出现/usr/local/mysql/bin/mysqld:error while loading shared libraries:libaio.so.1 : ...

  9. Java并发编程：Callable、Future和FutureTask的实现

    启动线程执行任务,如果需要在任务执行完毕之后得到任务执行结果,可以使用从Java 1.5开始提供的Callable和Future 下面就分析一下Callable.Future以及FutureTask的 ...

  10. VR全景加盟-了解VR就来全景智慧城市

    关于什么是真正的VR说了这么多,面对刚刚起步的VR,如何辨别判断一个真正的VR形式呢.除了我们所说几个参数或者大家关注的眩晕感.临场感,真正的VR究竟带给大家什么样的特性呢?这个就要从VR的本质谈起. ...