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

AJAX：

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

如果此页面用到了ajax方法，一定要在页面上端加上：

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

ajax基础语法：

<script type="text/javascript">

    $.ajax({

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

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

        type:"POST", //提交方式，一般用POST，大写

        dataType:"TEXT", //返回值的类型，TEXT要大写

        success:function(data){ //回调函数

                alert(data);//输出返回的值

            },

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

            }

        });

</script>

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>

<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:"dlchuli.php",

            data:{u:u,p:p},

            type:"POST",

            dataType:"TEXT",

            success: function(data){

                    if(data.trim()=="OK")

                    {

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

                    }

                    else

                    {

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

                    }

                }

            });

        })

});

</script>

</html>

<?php

$uid = $_POST["u"];

$pwd = $_POST["p"];

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

$db = new DBDA();

$sql = "select pwd from users where uid='{$uid}'";

$mm = $db->StrQuery($sql);

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

{

    echo "OK";

}

else

{

    echo "NO";

}

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

<?php

$uid = $_POST["u"];

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

$db = new DBDA();

$sql = "select count(*) from users where uid='{$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>

<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 style="width:196px; height:31px;" type="text" id="name" /></div>

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

</div>

<script type="text/javascript">

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

    //取名称

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

    if(n!="")

    {

    //调AJAX

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

</body>

</html>

<?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做用表格显示数据并增加操作列（删除）

<!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="1" cellpadding="0" cellspacing="0">

     <tr id="sj">

        <td>代号</td>

        <td>名称</td>

        <td>操作</td>

    </tr>

 <tbody id="tb"></tbody>

</table>

异步处理解决：1.变同步 2.放到执行返回值时的代码里面

<script type="text/javascript">

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

    $.ajax({

            url:"nationchuli.php",

            dataType:"TEXT",

            success: function(data){

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

                    var str = "";

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

                    {

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

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

                    }

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

                    //加事件

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

                        alert("aa");

                        })

                }

        });

    })

</script>

</body>

</html>

<?php

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

$db = new DBDA();

$sql = "select * from nation";

echo $db->StrQuery($sql);

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

2、Java 基础语法标识符、修饰符、变量、数组、枚举、关键字
Java 基础语法一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如 ...
Ajax 简述与基础语法
目录 Ajax 1. 原生 JS 实现 Ajax 2. 使用 Ajax 实现异步通信 a. Ajax 的基础语法 b. 用 Ajax 传递数据 i. 传递字符串数据 ii. 传递 JSON 数据 3. ...
第1天 Java基础语法
Java基础语法今日内容介绍 Java开发环境搭建 HelloWorld案例注释.关键字.标识符数据(数据类型.常量) Java开发环境搭建 Java概述众所周知Java是一门编程语言,编程语 ...
jQuery安装和基础语法
1.安装从 jquery.com 下载 jQuery 库 <script src="jquery-1.10.2.min.js"></script> 从 C ...
11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
11.10 （上午）开课二个月零六天（ajax基础，ajax做登录）
test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
使用PHP中的ajax做登录页面、验证用户名是否可用、动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

随机推荐

Ruby基本语法规则
1.Ruby常用数据类型 Numbers, Strings, Booleans my_num = 25 my_boollean = true (or false) my_string = " ...
umeng
http://bbs.umeng.com/thread-5408-1-1.html 微博分享 http://dev.umeng.com/social/ios/operation#2_2 http:// ...
Smarty缓存技术总结
大家应该都知道合理使用缓存能有效的减轻网站的服务器压力,php Smarty作为一个非常优秀的php模板引擎,它为我们提供了非常简单而多样化的缓存操作,下面就让我们学习一下smarty缓存操作方面的一 ...
bootstrap-tab
功能:点击时切换相应的内容或图片插件:tab.js 要点:tab标签用在导航条上,以data-toggle作被点击者, 以tab-content作内容显示 <!DOCTYPE html> ...
Aptana 中去掉“Missing semicolon”提醒
打开“窗口”下的“首选项” 然后找到“Aptana Studio”,在其下找到并点击Validation,在右侧窗口找到Javascript Syntax Validator,在下方的Options中 ...
用CSS画个三角形
<!DOCTYPE html> <html> <head> <style type="text/css"> #trangle { d ...
php删除字符串中的所有空格
function trimall($str)//删除空格 { $qian=array(" "," ","\t","\n" ...
[转载]PO BO VO DTO POJO DAO概念及其作用
原文链接:http://jeoff.blog.51cto.com/186264/88517/ POJO = pure old java object or plain ordinary java ob ...
Windows8笔记
一.WIN8 硬盘变为可弹出设备如果电脑使用的是nforce芯片组的主板和串口硬盘.在系统中安装好所有的硬件驱动程序后,会出现这种情况.这是nforce芯片组在安装了IDE-SW主板驱动以后,系统会 ...
maven项目部分知识
1.maven项目在pom.xml中用add dependencies加入jar包,搜索不到jar包的解决方案: Window --> Show View --> Other输入mave ...

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

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

随机推荐

热门专题