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. EzHttp 流传输调用代码示例

    EzHttp框架提供的内置接口,用于文件流等传输 流传输调用代码示例 内置接口: public interface IEzStreamHandler { Task<byte[]> GetD ...

  2. 关于Content-Type的问题

    今天我在编写html表单提交到 php时,出现了一个很奇怪的现象. 为了让php文件的字符编码与html一致,我在php文件加了一句 header("Content-Type:html/te ...

  3. H5万能选择器：iosselect

    iosselect是个什么东西? 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个选择器组件来统一各端下各种浏览器的展示.下面是 ...

  4. 读入一个自然数n，计算其各位数字之和，用汉语拼音写出和的每一位数字。 输入格式：每个测试输入包含1个测试用例，即给出自然数n的值。这里保证n小于10的100次幂。 输出格式：在一行内输出n的各位数字之和的每一位，拼音数字间有1 空格，但一行中最后一个拼音数字后没有空格。 输入样例： 1234567890987654321123456789 输出样例： yi san wu

    这是PAT中的一道练习题 刚开始的时候我想着直接定义正整数n,结果走了很大的弯路,因为题目中要求n小于10的100次幂,即最大的正整数n有100位,而C语言中整型数字最大占8个字节的存储空间,如果按无 ...

  5. LESS的一点自己的理解（1）

    写前端的时间也不短了,Less也用过几次,都是现学现用,没有仔细的梳理过,今天就有条理的梳理下.参考文章是一篇不错的哦.下面会附上链接的,废话不多说,开始正题. 首先应该说下什么是Less,Less是 ...

  6. WebGIS开源解决方案之矢量数据导入

    前几篇介绍了开源WebGIS开发环境的搭建,本篇开始陆续介绍这些软件的使用,WebGIS的开发,首要的问题是解决数据来源,本篇主要介绍矢量数据在开源空间数据库PostgreSQL中的存储.后续篇幅中再 ...

  7. UI基础控件—UIView

    1. 什么是UIView?     UIView :代表屏幕上的一个矩形区域,管理界面上的内容; 2. 创建UIview a.开辟空间并初始化视图(初始化时,给出视图位置和大小) b.对视图做一些设置 ...

  8. 解决U盘容量变小问题

    今天又想重新给电脑刷刷kali linux新版本了貌似N久没更,直接重新刷系统吧...然后发现USB容量变小,这就尴尬了,接着总结了个小方法. 解决方法:1.先把u盘插好,运行cmd,2.输入disk ...

  9. .Net程序员学用Oracle系列(25)：触发器详解

    1.触发器理论 1.1.触发器的应用场景 1.2.触发器的类型 1.3.DML 触发器的触发顺序 2.触发器实战 2.1.创建触发器 2.1.1.创建 DML 触发器 2.1.2.创建 DDL 触发器 ...

  10. springcloud(四)：熔断器Hystrix

    说起springcloud熔断让我想起了去年股市中的熔断,多次痛的领悟,随意实施的熔断对整个系统的影响是灾难性的,好了接下来我们还是说正事. 熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基 ...