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个处 ...

随机推荐

文件操作 fopen() fclose()
#define _CRT_SECURE_NO_DEPRECATE /*取消scanf,printf不安全之类的错误提示*/ /* fopen example */ #include <stdio ...
数论只会GCD。。。
一些关于GCD的代码.... #include <iostream> #include <cstdio> #include <cstring> using name ...
XML文件数据操作
#region XML序列化文件和反序列化 /// <summary> /// 通用类的保存函数,可以将已经声明过可序列化的类以文件方式保存起来. /// 保存格式分为 XML明文式和二 ...
HDU 5053 the Sum of Cube
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5053 解题报告:用来陶冶情操的题,求a到b的三次方的和. #include<stdio.h> ...
iOS开发——UI基础-懒加载，plist文件，字典转模型，自定义view
一.懒加载只有使用到了商品数组才会创建数组保证数组只会被创建一次只要能够保证数组在使用时才创建, 并且只会创建一次, 那么我们就称之为懒加载 lazy - (void)viewDidLoad 控 ...
mysql 按距离今日时间最近排序
xxx order by abs(DATEDIFF(time_start,now()))
C++ stringstream
C++ 引入了ostringstream.istringstream.stringstream这三个类,这三个类包含在sstream.h头文件中.三个类中 1)istringstream类用于执行C+ ...
win32程序组成
程序代码+UI资源——RC编译器整合——>EXE档案. UI资源:二进制代码(借助工具产生,并以各种扩展名的文件存在),程序员必须在资源描述文档(.rc)中描述他们. RC编译器(RC.EXE) ...
web服务器页面错误代码集
HTTP 1xx-信息提示这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个1xx响应. 100-继续. 101-切换协议. 2xx-成功这类状态代码表明服务器成功地接受了 ...
CCP浅谈
说明如果想详细了解CCP,可以下载AN-AMC-1-102_Introduction_to_CCP.pdf或者ccp211.pdf 本文不涉及到专业的知识讲解,如果想查看更加专业的知识可以选择看完以 ...

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

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

随机推荐

热门专题