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做用表格显示数据并增加操作列的更多相关文章

  1. 2、Java 基础语法标识符、修饰符、变量、 数组、枚举、关键字

    Java 基础语法 一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如 ...

  2. Ajax 简述与基础语法

    目录 Ajax 1. 原生 JS 实现 Ajax 2. 使用 Ajax 实现异步通信 a. Ajax 的基础语法 b. 用 Ajax 传递数据 i. 传递字符串数据 ii. 传递 JSON 数据 3. ...

  3. 第1天 Java基础语法

    Java基础语法 今日内容介绍 Java开发环境搭建 HelloWorld案例 注释.关键字.标识符 数据(数据类型.常量) Java开发环境搭建 Java概述 众所周知Java是一门编程语言,编程语 ...

  4. jQuery安装和基础语法

    1.安装 从 jquery.com 下载 jQuery 库 <script src="jquery-1.10.2.min.js"></script> 从 C ...

  5. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  6. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  7. 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  8. 11.10 (上午)开课二个月零六天(ajax基础,ajax做登录)

    test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  9. 使用PHP中的ajax做登录页面、验证用户名是否可用、动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

随机推荐

  1. firefox浏览器不能使用window.close的解决方案

    javascript中window.close()函数用来关闭窗体,而且IE.google.firefox浏览均支持,但由于firefox浏览器dom.allow_scripts_to_close_w ...

  2. Eclipse经常报Unhandled event loop exception的原因

    在公司的电脑上,Eclipse经常报Unhandled event loop exception 错误,非常频繁,通过搜索发现是因为电脑上安装了百度杀毒导致的.... 无语 另外 teamviewer ...

  3. Mac Pro 安装 Adobe Photoshop CC for mac V2014 破解版

    一.下载 Photoshop CC for mac V2014 原版(.dmg 文件): 百度网盘下载1 百度网盘下载2 百度网盘下载3 百度网盘下载4 百度网盘下载5 百度网盘下载6 百度网盘下载7 ...

  4. InnoDB为什么要使用auto_Increment

    在Mysql表设计中,通常会使用一个与业务无关的自增列做为主键.这是因为Mysql默认使用B-Tree索引,你可以简单理解为"排好序的快速查找结构".如下是一个B-Tree的结构图 ...

  5. Lvs原理

    官方文档: http://www.linuxvirtualserver.org/zh/lvs1.html http://www.linuxvirtualserver.org/zh/lvs2.html ...

  6. django的分页--不全也未实现

    一.Django内置分页 Paginator 二.自定义分页 分页功能在每个网站都是必要的,对于分页来说,其实就是根据用户的输入计算出应该在数据库表中的起始位置. 1.设定每页显示数据条数 2.用户输 ...

  7. treeiso

    主要包括了一些树同构的代码和一些树图生成器... download

  8. phpcms导航中添加内部链接

    phpcms中栏目有3中类型 1.普通栏目 2.单网页 3.外部链接 其中如果想添加本站的内部链接,可以使用3,然后在添加链接的地方填入剩下的地址即可(需要以/开头) 如: /index.php?m= ...

  9. 腾讯云环境配置之PHP5.6.3 + redis扩展 稳定版

    腾讯云环境配置之PHP5.6.3 + redis扩展 稳定版 时间:2015-01-18 01:41来源:linux.it.net.cn 作者:IT   #由于上文装过yum groupinstall ...

  10. IPC---信号量

    一.什么是信号量 信号量的使用主要是用来保护共享资源,使得资源在一个时刻只有一个进程(线程) 所拥有. 信号量的值为正的时候,说明它空闲.所测试的线程可以锁定而使用它.若为0,说明 它被占用,测试的线 ...