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. 线下市场，选择微信小程序从未显得如此重要

    2017 年 1 月 9 日,小程序正式上线,到今日,3 月 8 号,这个新产品面世刚好满两个月.小程序刚推出便受到全球关注,腾讯股价当天即创逾一个月高位,但关注度先是急速上涨,不久便迅速降温,甚至在 ...

  2. vector介绍

    vector(向量,也可称为容器): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. 1.1  ...

  3. MD5加密。

    MD5 是把文件用open打开,然后对内容hash后的值,所以和文件名无关,和位置无关,和修改时间无关,只与文件内容有关.

  4. 图论算法-Dijkstra

    原理 Dijkstra是一个神奇的最短路径算法,它的优点在于它可以稳定的时间内求出一张图从某点到另一点的距离.它的工作原理非常简单,思路类似于广搜.在搜索前,将每个点的颜色设为白色,第一次将源点Ins ...

  5. 记录下一个C++初始化的方式（很少有人这么用，但是却是一个使代码更加简洁的方式）

    很多时候,在一个类创建的时候给它初始化,一般呢,99%的人都会这么用: //A.h Class CA { int a; char* p; int getValue(); }; //A.cpp CA:: ...

  6. PowerDesigner 12.5破解方法

    PowerDesigner 12.5破解方法 创建于 2017-05-07 22:18:04   一.下载   1 . PowerDesigner 12.5 官方下载地址  http://downlo ...

  7. 数据转换d2d.js

    d2d.js what? d2d是data2data的简写,用来转换为符合需求的data. why? 我们在开发中定义好了的接口字段,后端工程可能因某些原因修改了字段, 或者我们用的插件或组件用到的数 ...

  8. 产品经理学Python：for循环、while循环

    Python中有两种循环,分别为:for循环和while循环. 1. for循环 for循环可以用来遍历某一对象(遍历:通俗点说,就是把这个循环中的第一个元素到最后一个元素依次访问一次).for循环的 ...

  9. Potato(邪恶土豆)–windows全版本猥琐提权

    工作原理: Potato利用已知的Windows中的问题,以获得本地权限提升,即NTLM中继(特别是基于HTTP > SMB中继)和NBNS欺骗.使用下面介绍的技术,它有可能为一个非特权用户获得 ...

  10. linux下MongoDB客户端shell基本操作

    MongoDB 是一款NoSql数据库,没有固定的模式,即同一个集合中的不同文档结构可以不同,如:第一条记录{name:”xiaoming”},第二条记录:{name:”xiaoli”,age:15} ...