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

随机推荐

CocoaPods版本升级
和往常一样使用CocoaPods管理一个基于FMDB的项目类库命令行执行 $ pod install [!] The 'master' repo requires CocoaPods 0.32.1 ...
[Storm] 内部消息缓存
这篇文件翻译自 http://www.michael-noll.com/blog/2013/06/21/understanding-storm-internal-message-buffers/ 当进 ...
如何配置和使用Spring框架的bean
1. 首先在src目录下新建beans.xml文件,该文件名可更改. 2. 编辑xml文件如下,这里需要注意的是beans的表头中信息需要根据不同的版本对应的内容不同,本例中使用的spring的版本为 ...
读取XML文件
首先要确定好XML文件的位置,最好是放在程序的debug文件中,放在其他地方也可以,要写上绝对路径 using System; using System.Collections.Generic; us ...
获取MAC地址的几种方式
.NET 后台中 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...
Codeforces 260 C. Boredom
题目链接:http://codeforces.com/contest/456/problem/C 解题报告:给出一个序列,然后选择其中的一个数 k 删除,删除的同时要把k - 1和k + 1也删除掉, ...
Codeforces 260 A - A. Laptops
题目链接:http://codeforces.com/contest/456/problem/A 解题报告:有n种电脑,给出每台电脑的价格和质量,要你判断出有没有一种电脑的价格小于另一种电脑但质量却大 ...
在framework中打包xib
废话不多说,直接上图 1.Copy Bundle Resources 中加入相关xib 2.这里是重点,调用的时候不能直接写 [[NSBundle mainBundle] loadNibNamed:@ ...
CCActionManager
当CCnode执行runAction的时候,runAction会调用动作管理类的addAction方法将它自己执行的动作传递给动作管理类,动作管理类再将动作添加到自己的动作序列中. 动过管理类通过定时 ...
SSH-Struts第三弹：传智播客视频教程第一天上午的笔记
一. 框架概述1.三大框架 : 是企业主流 JavaEE 开发的一套架构 Struts2 + Spring + Hibernate 2. 什么是框架?为什么要学框架 ?框架是实现部分功能的代码 ( ...

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

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

随机推荐

热门专题