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. php代码效率小常识

    1, 尽量不要使用@来进行抑制错误,效率很低 2,能使用单引号时不要使用双引号 3,echo的效率比print要高,同时echo可以输出多个变量 4,使用include,require时候最好使用绝对 ...

  2. [原创]ssget过滤动态块的方式

    Autocad在2006增加了新的动态块功能,方便了对块的动态修改,但是修改动态块后,块名会变成一个匿名块,导致无法通过块名来快速过滤. 明经论坛上有人通过全选块后再来遍历筛选,我通过研究简化了这个问 ...

  3. GBDT与LR融合提升广告点击率预估模型

    1GBDT和LR融合      LR模型是线性的,处理能力有限,所以要想处理大规模问题,需要大量人力进行特征工程,组合相似的特征,例如user和Ad维度的特征进行组合.      GDBT天然适合做特 ...

  4. NodeJS+Express+MongoDB 简单实现数据录入及回显展示【适合新人刚接触学习】

    近期在看NodeJS相关 不得不说NodeJS+Express 进行网站开发是很不错,对于喜欢玩JS的来说真是很好的一种Web开发组合 在接触NodeJS时受平时Java或者C#中API接口等开发的思 ...

  5. 使用fontawesome图标

     我每次找图标时都是在阿里的开源图标库中找的,但是使用起来不是很方便.而我发现了fontawesome之后,觉得实在不错,所以分享给大家.  这是一些参考的文档. fontawesome下载与使用介绍 ...

  6. VR全景：互联网与实体店的完美结合

     VR元年已过,VR项目.VR创业潮转为理性,VR行业分为两个方向:硬件和内容.硬件又分为VR头显和辅助设备,内容又分为VR全景和VR虚拟内容,如游戏.娱乐.根据行业划分为VR+购物,VR+教育,VR ...

  7. Oracle 12C 新特性之表分区带 异步全局索引异步维护（一次add、truncate、drop、spilt、merge多个分区）

    实验准备:-- 创建实验表CREATE TABLE p_andy(ID number(10), NAME varchar2(40))PARTITION BY RANGE (id)(PARTITION ...

  8. JAVA printWriter中write()和println()区别

    PrintWriter 的Write()方法和println()方法有何细微的区别? 最近学习JAVA网络编程,在服务器端和客户端产生一个Socket 后, 两边各自用getIputStream()和 ...

  9. Swift 中 String 取下标及性能问题

    Swift 中 String 取下标及性能问题 取下标 String String 用 String.Index 取下标(subscript)得到 Character,String.Index 要从 ...

  10. Linux C 程序的开发环境

    1.开发环境的构成 编辑器 vim,vi 编译器 gcc 调试器 gdb 函数库glibc 系统头文件glibc_header 2.gcc编译器 功能强大.性能优越的多平台编译器,gcc可以将c.c+ ...