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

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

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

</head>

<body>

<script type="text/javascript">

    $.ajax({

        url:"lianxi_chuli.php",//url处理页面的地址

        data:{code:"n001"},//data传递的数据:"提交的数据"

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

        dataType:"TEXT",//返回值的类型，还有XML    ,和JSON类型

        success:function(data){//先执行到提交方式，跳到处理页面访问到数据库找到这个值的条件后返回TEXT值的类型，进去循环，毁掉函数。

            alert(data);

            },

        errof:function(){//处理出错执行

            },

        });

</script>

</body>

</html>

AJAX练习处理页面

<?php

$code = $_POST["code"];//同样用POST提交方式接收要查询的列

include("../DBDA.class.php");//引用封装好的类

$db = new DBDA();  //造连接对象

$sql = "select name from nation where code='{$code}'";//根据提供的【n001】值找想要找的【汉族】内容

echo $db->StrQuery($sql);//$db用返回字符串StrQuery方式，执行$sql,echo输出

?>

效果图

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

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

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

</head>

<!--关键语句：window.location.href="要跳转到那个页面"-->

<!--关键字： .trim去空格-->

<!--写代码是注意事项！代码一定认真写，有时候少了个字母，或写错代码，或忘记$符号！！！-->

<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:"DL_chuli.php",//url跳转处理页面

            data:{u:u,p:p},//data:{用户输的名 : 数据库传来的值 , 用户输入的密码 : 数据库输出的值}，

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

            dataType:"TEXT",//返回值的类型，还有XML    ,和JSON类型

            success:function(data){

                if(data.trim()=="OK"){//进循环if判断用户输入正确执行跳转主页面

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

                    }else{

                        alert("用户名或密码有误");

                        }

                },

            });

        })

});

</script>

</html>

ajax登录处理页面

<?php

$uid = $_POST["u"];//同样用POST提交方式接收用户输的用户名

$pwd = $_POST["p"];//同样用POST提交方式接收用户输的密码

include("../DBDA.class.php");//引用封装好的类

$db = new DBDA();//造连接对象

$sql = "select nation from info where name='{$uid}'";//根据客户输入的uid用户名找相应的密码

$mm = $db->StrQuery($sql);  //$db用返回字符串StrQuery方式，执行$sql,$mm接收

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

    echo "OK";//一致就输出ok

    }else{

        echo "NO";//错误就输出on

        }

?>

简单的登录页面效果图

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

<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(){

    //取用户名

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

    //调AJAX

    $.ajax({

        url:"ceshi_chuli.php",

        data:{u:uid},

        type:"POST",

        dataType:"TEXT",

        success: function(data){

            if(data>){

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

                $("#ts").css("color","red");//给提示设置一个红字体颜色

                }else{

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

                    $("#ts").css("color","green");//给提示设置一个绿字体颜色

                    }

            }

        });

    });

</script>

</html>

ajax登录判断处理页面

<?php

$uid = $_POST["u"];

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

$db = new DBDA();

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

echo $db->StrQuery($sql);

?>

登录判断效果图

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

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

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

</head>

<body>

<input type="button" value="显示" id="btn" />

<table width="100%" border="" cellpadding="" cellspacing="">

<tr id="sj">

<tr>代号</tr>

<td>名称</td>

<td>操作</td>

</tr>

<tbody id="td">

</tbody>

</table>

<script type="text/javascript">

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

    $.ajax({

        url:"caozuo_chuli.php",

        dataType:"TEXT",

        success:function(data){

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

            var str = "";

            for(var i=;i<hang.length;i++){

                var lie = hang[i].split("^");

                str = str+"<tr><td>"+lie[]+"</td><td>"+lie[]+"</td><td><span class='sc' bs='"+lie[]+"'>删除</span></td><tr>";

                }

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

                //加事件

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

                    alert("aa");

                    })

            }

        });

    })

</script>

</body>

</html>

ajax操作删除处理页面

<?php

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

$db = new DBDA();

$sql = "select * from nation";

echo $db->StrQuery($sql);

?>

点击删除跳出个aa

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

<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>

<br />

<body>

<div style="width:200px; height:35px; border:2px solid #60f"><input style="width:196px; height:31px;" type="text" id="name" /></div>

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

</body>

<script type="text/javascript">

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

    //取名称

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

    if(n!=""){//判断输入框里是否为空

        //调AJAX

        $.ajax({

            url:"mohu_chuli.php",

            data:{n:n},

            type:"POST",

            dataType:"TEXT",

            success:function(data){

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

                var str = "";

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

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

                    }

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

                }

            });    

        }else{

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

            }

    });

</script>

</html>

ajax模糊查询

<?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基本操作 + 登录 + 删除 + 模糊查询的更多相关文章

  1. jquery select 列表 ajax 动态获取数据 模糊查询 分页

    最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的 这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...

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

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

  3. Springmvc+Myabtis+Ajax实现异步分页emp+dept（全部查询及模糊查询）

    1.在项目中创建如下目录 2.创建实体类Dept package com.entity; import java.io.Serializable; /** * 部门表 * @author Admini ...

  4. ajax 判断账户密码 调取数据模糊查询 时钟

    一.判断账户密码 <Login.html> <head> <meta http-equiv="Content-Type" content=" ...

  5. Mybatis框架的模糊查询（多种写法）、删除、添加（四）

    学习Mybatis这么多天,那么我给大家分享一下我的学习成果.从最基础的开始配置. 一.创建一个web项目,看一下项目架构 二.说道项目就会想到需要什么jar 三.就是准备大配置链接Orcl数据库 & ...

  6. StackExchange.Redis加载Lua脚本进行模糊查询的批量删除和修改

    前言 使用StackExchange.Redis没有直接相关的方法进行模糊查询的批量删除和修改操作,虽然可以通过Scan相关的方法进行模糊查询,例如:HashScan("hashkey&qu ...

  7. lucene5学习 - 索引基本操作（创建，查询，更新，删除，分页）

    package lucene5; import java.io.IOException; import java.nio.file.Paths; import java.text.SimpleDate ...

  8. SQL模糊查询与删除多条语句复习

    string IDlist="1,2,3"; 批量删除数据 StringBuilder strsql=new StringBuilder(); strSql.Append(&quo ...

  9. Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中

    功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> <title>We ...

随机推荐

  1. Python操作redis系列之 列表（list） (五)

    # -*- coding: utf- -*- import redis r =redis.Redis(host=,password=") 1. Lpush 命令将一个或多个值插入到列表头部. ...

  2. top命令详析及排查问题使用演示

    1. top基本使用 top命令运行图 第一行:基本信息 第二行:任务信息 第三行:CPU使用情况 第四行:物理内存使用情况 buff/cache: buffers 和 cache 都是内存中存放的数 ...

  3. [转载]从100PV到1亿级PV网站架构演变

    原文地址:http://www.uml.org.cn/zjjs/201307172.asp 一个网站就像一个人,存在一个从小到大的过程.养一个网站和养一个人一样,不同时期需要不同的方法,不同的方法下有 ...

  4. AirServer for Mac（Airplay 终端实用工具）破解版安装

    1.软件简介    AirServer 是一款 Mac 上的 AirPlay 终端,通过这款软件,利用 AirPlay 技术,iPhone 或 iPad 就可以无线连接到 Mac 上,不需要在 iPh ...

  5. 如何禁止VS显示“You have mixed tabs and spaces. Fix this?”

    如何禁止VS显示“You have mixed tabs and spaces. Fix this?” VS2013 版本的解决方案: Vs2013  IDE下,编辑C++的工程源码,在打开文件的时候 ...

  6. Docker 使用Docker知识简易部署一个LNMP平台

    1.自定义网络 docker network create lnmp 2.创建Mysql数据库容器(这里我们首先得创建一个mysql-vol数据卷) docker volume create mysq ...

  7. 2.Swift快速浏览

    传统认为,在一个新的语言的第一个程序要在屏幕上显示“Hello world!”.在Swift,可以用一行代码来完成: println("Hello, world!") 如果你已经在 ...

  8. BitSet的用法

    1,BitSet类    大小可动态改变, 取值为true或false的位集合.用于表示一组布尔标志. 此类实现了一个按需增长的位向量.位 set 的每个组件都有一个 boolean 值.用非负的整数 ...

  9. 挖坑:handoop2.6 开启kerberos(全流程学习记录)

    目录: 1.涉及插件简介 2.安装步骤 3.日志错误查看 1.kerberos是什么东西 度娘指导: Kerberos 是一种网络认证协议,其设计目标是通过密钥系统为 客户机 / 服务器 应用程序提供 ...

  10. vue.js是什么

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习, ...