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. OAuth 2和JWT - 如何设计安全的API？

    OAuth 2和JWT - 如何设计安全的API? Moakap译,原文 OAuth 2 VS JSON Web Tokens: How to secure an API 本文会详细描述两种通用的保证 ...

  2. [Python设计模式] 第2章 商场收银软件——策略模式

    github地址: https://github.com/cheesezh/python_design_patterns 题目 设计一个控制台程序, 模拟商场收银软件,根据客户购买商品的单价和数量,计 ...

  3. RHEL下修改市区

    针对中国时区,修改操作如下 1.   修改文件 /etc/sysconfig/clock内容: ZONE=Asia/ShanghaiUTC=falseARC=false 2.     rm /etc/ ...

  4. 【PMP】项目和运营的区别

    运营管理关注产品的持续性生产和服务的持续运作. 项目与运营会存在产品生命周期的不同时点交叉,例如: 在产品开发.产品升级或提高产量时: 在改进运营或产品开发流程时: 在产品生命周期结束阶段: 在每个收 ...

  5. JS 动态生成JSON对象

    JS 动态生成JSON对象,一般用到JSON传递参数的时候,会用到. function onGeneratedRow(columnsResult) { var jsonData = {}; colum ...

  6. ASP.NET Web API(MVC API)

    ASP.NET Web API是​​一个框架,可以很容易构建达成了广泛的HTTP服务客户端,包括浏览器和移动设备.是构建RESTful应用程序的理想平台的.NET框架. 上面是微软对Web API给出 ...

  7. 【Linux高级驱动】平台设备驱动机制的编程流程与编译进内核

    [平台设备驱动机制的编程流程] [如何将驱动静态的编译进内核镜像] 1.添加资源(dev-led.c) 1.1:一般来说,系统习惯上将资源放在arch/arm/plat-samsung/目录中 cp ...

  8. 【iCore1S 双核心板_ARM】例程五：IWDG看门狗实验——复位ARM

    实验原理: STM32内部包含独立看门狗,通过看门狗可以监控程序运行,程序错误 时,未在规定时间喂狗,自动复位ARM.本实验通过按键按下,停止喂狗, 制造程序运行 错误,从而产生复位 . 实验现象: ...

  9. 【iCore1S 双核心板_FPGA】例程五：Signal Tapll 实验——逻辑分析仪

    核心代码: //--------------------Module_Signal_TapII-------------------// module Signal_TapII( input CLK_ ...

  10. Extjs4.2x与富文本框编辑器KindEditor的整合

    Extjs4本身的HtmlEditor编辑器,太鸡肋了,简单的html能够应付一下,稍加复杂的就无能为力了. 对于Extjs的HtmlEditor扩展主要有三个方向,一个是扩展其本身的htmlEdit ...