AJAX基本操作 + 登录 + 删除 + 模糊查询

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);
?>

模糊查询效果图