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

?>

模糊查询效果图

AJAX基本操作 + 登录 + 删除 + 模糊查询的更多相关文章

jquery select 列表 ajax 动态获取数据模糊查询分页
最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...
ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列
AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ...
Springmvc+Myabtis+Ajax实现异步分页emp+dept（全部查询及模糊查询）
1.在项目中创建如下目录 2.创建实体类Dept package com.entity; import java.io.Serializable; /** * 部门表 * @author Admini ...
ajax 判断账户密码调取数据模糊查询时钟
一.判断账户密码 <Login.html> <head> <meta http-equiv="Content-Type" content=" ...
Mybatis框架的模糊查询（多种写法）、删除、添加（四）
学习Mybatis这么多天,那么我给大家分享一下我的学习成果.从最基础的开始配置. 一.创建一个web项目,看一下项目架构二.说道项目就会想到需要什么jar 三.就是准备大配置链接Orcl数据库 & ...
StackExchange.Redis加载Lua脚本进行模糊查询的批量删除和修改
前言使用StackExchange.Redis没有直接相关的方法进行模糊查询的批量删除和修改操作,虽然可以通过Scan相关的方法进行模糊查询,例如:HashScan("hashkey&qu ...
lucene5学习 - 索引基本操作（创建，查询，更新，删除，分页）
package lucene5; import java.io.IOException; import java.nio.file.Paths; import java.text.SimpleDate ...
SQL模糊查询与删除多条语句复习
string IDlist="1,2,3"; 批量删除数据 StringBuilder strsql=new StringBuilder(); strSql.Append(&quo ...
Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> <title>We ...

随机推荐

Android 自定义TextView 实现文本间距
Android系统中TextView默认显示中文时会比较紧凑,不是很美观.为了让每行保持一定的行间距,可以设置属性android:lineSpacingExtra或android:lineSpacin ...
oradim新建服务后，登录数据库报ORA-12560错误
> oradim -new -sid mydb 实例已创建. > sqlplus /nolog SQL*Plus: Release 11.2.0.4.0 Production on 星期二 ...
SNF快速开发平台MVC-高级查询组件
1. 高级查询在我们做项目的时候经常想要按名称.编号进行查询数据,可在开发时会把最常用的查询条件写上,不常用的就不写了,也是因为把所有字段都写上太多了,布局不好看而且不实用.还有些查询条件几百年 ...
ASP.NET CORE下用盛派微信SDK取微信openid
用CORE做项目用到微信的相关东西,听说那个盛派微信SDK很火,自己弄了下,只是简单的用用,用户访问页面取微信openid
【XMPP】XMPP协议之原理篇
XMPP协议简介 XMPP协议(Extensible Messaging and Presence Protocol,可扩展消息处理现场协议)是一种基于XML的协议. 目的是为了解决及时通信标准而提出 ...
【转】Error:JAVA_HOME is not set and could not be found
如果stop-dfs.sh也报了这个错,把$HADOOP_HOME/libexec/hadoop-config.sh中的如下内容之前加上 export JAVA_HOME=/home/lqr/Tool ...
【iCore1S 双核心板_FPGA】例程二：GPIO输入实验——识别按键输入
实验现象: iCore1s 双核心板上与FPGA相连的三色LED(PCB上标示为FPGA·LED),按键按下红灯点亮,松开按键红灯熄灭. 核心源代码: module KEY( input CLK_12 ...
Docker for Windows 代理设置（linux container）
https://blog.csdn.net/mzhangsf/article/details/79747979
laravel项目composer安装
1.下载 Composer (https://pkg.phpcomposer.com/#how-to-install-composer) 安装前请务必确保已经正确安装了 PHP.打开命令行窗口并执行 ...
[Bayes] Multinomials and Dirichlet distribution
From: https://www.cs.cmu.edu/~scohen/psnlp-lecture6.pdf 不错的PPT,图示很好. 伯努利分布和多项式分布 Binomial Distribu ...

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

AJAX基本操作 + 登录 + 删除 + 模糊查询的更多相关文章

随机推荐

热门专题