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. Smarty基础

    smarty将php代码和HTML代码分开,形成两个页面,通过在php页面引用smarty配置文件,利用php控制HTML页面显示 1,libs文件夹,放入需要使用的文件夹下面 2,配置文件:init ...

  2. Ubuntu 14 安装Java(JRE、JDK)

    JRE vs OpenJDK vs Oracle JDK JRE(Java Runtime Environment),它是你运行一个基于Java语言应用程序的所正常需要的环境.如果你不是一个程序员的话 ...

  3. data_quick 进度

    20131118  加入xml对L8卫星波段控制: 纠正波段顺序 QVProc20131125.7z: 完成L8的增强 以后的程序会添加ZY3号解析模块 QVProc20131126.7z: 新增 粗 ...

  4. iOS开发——UI进阶篇(十六)Quartz2D实战小例子

    一.画线 只有在drawRect中才能获取到跟view相关联的上下文 - (void)drawRect:(CGRect)rect {} 一条线 // 1.获取跟当前View相关联的layer上下文(画 ...

  5. UOJ52——【UR #4】元旦激光炮

    1.题目大意:就是给你三个数组啦,然后让你找到其中的第K大,但是,不可以直接访问数组,必须通过一种函数,最后的分数 是看调用几次这个函数,100次以内10分,2000以内6分.... 2.分析:最开始 ...

  6. BZOJ4196——noi2015软件包管理器

    1.题目大意:讲道理,就是让你有两个修改一个是把一个点到根的路径上的点权值全部变成1,另一个是把一个子树全部变成0 然后让你输出每次修改,改变的哪些节点的值 2.分析:就是一个树剖,树剖是满足dfs序 ...

  7. http://debugjs.com/

    浏览器内调试js代码,这篇文章介绍了作者的开发心路 http://amasad.me/2014/01/06/building-an-in-browser-javascript-vm-and-debug ...

  8. Swift初学有一点难理解的东西,整理了一下,想明白了。

      func makeIncrementer() -> (Int -> Int) {      func addOne(number: Int) -> Int {           ...

  9. [转载]localhost与127.0.0.1的区别

    原文链接:http://blog.csdn.net/xifeijian/article/details/12879395 很多人会接触到这个ip地址127.0.0.1.也许你会问127.0.0.1是什 ...

  10. 极客DIY:如何用Siri与树莓派“交互”

    苹果在2014年推出的HomeKit智能家居平台的确给人眼前一亮的感觉.随着时间的推移,国外的黑客对HomeKit该逆向的逆向,结果也都汇总到了git.本着折腾到死的极客心态,从网上淘了一块树莓派进行 ...