ajax基础部分
今天讲了ajax的组成及使用方法：首先我们看看一个简单的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" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head> <body>
<input type="text" id="uid" />
<span id="tishi"></span>
</body>
<script type="text/javascript">
$("uid").blur(function(){
//1.取内容
var uid = $(this).val();
//2.拿内容去数据库验证
$.ajax({
url:"chuli.php", //请求地址
data:{yhm:uid}, //要提交的数据
type:"POST", //提交的方式
dataType:"TEXT", //返回类型 TEXT字符串；JSON;XML
success:function(data){//回调函数
if(data==0)
{
$("#this").text("该用户名可用");
$("#this").css("color","green");
}
else
{
$("#this").text("该用户名已存在");
$("#this").css("color","red");
}
}
})
//3.给出提示
})
</script>
</html>
我们可以看到里面有一些常用的类型：url,data,type,dataType,以及验证成功后的返回操作方法：success。上面都做了详细的注释，便于理解，下面是处理页面：
<?php
$uid = $_POST["yhm"];
include("DBDA.class.php");
$db = new DBDA();
$sql = "select count(*) from users where uid='{$uid}'";
$arr = $db->Query($sql);
echo $arr[0][0];
这里面没有任何的逻辑处理，只有简单的数据验证和处理。所有的逻辑处理都在客户端页面里面。
下面让我们做一个登陆的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" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head> <body>
<h1>登录页面</h1> <div>用户名：<input type="text" id="uid" /></div>
<div>密 码:<input type="text" id="pwd" /></div>
<input type="button" id="btn" value="登录" />
</body>
<script type="text/javascript">
$("btn").click(function(){
//1.取数据
//2.验证数据
//3.提示 var uid = $("#uid").val();
var pwd = $("#pwd").val(); $.ajax({
url:"dlchuli.php",
data:{uid:uid,pwd:pwd},
type:"POST",
dataType:"TEXT",
success: function(data){
//使用data之前，对data进行去空格处理
if(data.trim()=="OK")
{
window.location.href = "main.php";
}
else
{
alert(用户名或密码错误);
}
}
});
})
</script> </html>
显示效果如上图：
其次是处理页面：
<?php
include("DBDA.class.php");
$db = new DBDA();
$uid = $_POST["uid"];
$pwd = $_POST["pwd"]; $sql = "select pwd from users where uid='{$uid}'";
$arr = $db->Query($sql);
if($arr[0][0]==$pwd && !empty($pwd))
{
echo "OK";
}
else
{
echo "NO";
}
这样就能实现登陆处理页面，并且不会让用户访问数据库，大大增加了用户体验性和安全性。
ajax基础部分的更多相关文章
- 史上最全的Ajax基础详解
同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- Ajax基础2
什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...
- ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列
AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ...
- Ajax基础--JavaScript实现
ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...
- jQuery基础---Ajax基础教程（二）
jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...
- jQuery基础---Ajax基础教程
jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...
- Ajax基础知识（二）
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- 原生AJAX基础讲解及兼容处理
原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...
随机推荐
- 阿里云上给的防止跨站和xss攻击的代码
文档说明: 1.将waf.php传到要包含的文件的目录 2.在页面中加入防护,有两种做法,根据情况二选一即可: a).在所需要防护的页面加入代码require_once('waf.php');就可以做 ...
- 去除 MyEclipse updating index
去除 MyEclipse updating index http://zhidao.baidu.com/link?url=OfHjTTxnNRoijnsaweBl3K3UTlnlFGdtHEQIvEW ...
- ASP.NET\MVC 解决C#上传图片质量下降，图片模糊，水印有杂点的问题
对图片处理这一块不是很懂,自己写不出来,这些年一直没有停止找一个上传图片质量不下降,加水印不会导致模糊和水印周边产生杂点的代码. 网上基本上99.9%的代码处理图片质量都是下面这两句: //设置质量 ...
- 基于Casperjs的网页抓取技术【抓取豆瓣信息网络爬虫实战示例】
CasperJS is a navigation scripting & testing utility for the PhantomJS (WebKit) and SlimerJS (Ge ...
- Javascript/js的相等和不等运算符（= 、== 、===）
"=="和"==="运算符用于比较两个值是否相等,当然它们对相等的定义不尽相同.两个运算符允许任意类型的操作数,如果操作数相等则返回tru,否则返回false. ...
- Awesome Chrome 插件集锦
子曾曰:"工欲善其事,必先利其器.居是邦也."--语出<论语·卫灵公>:其后一百多年,荀子也在其<劝学>中倡言道:"吾尝终日而思矣,不如须臾之所学 ...
- 笑谈ArcToolbox (1) ArcToolbox 的发展方向
笑谈ArcToolbox (1) ArcToolbox 的发展方向 by 李远祥 ArcGIS工具箱ArcToolbox具有非常多的工具,相信用过的人都非常惊叹,其功能完备并且强大,种类繁多,总能找到 ...
- 今日头条- iOS客户端 启动速度优化实践
版权声明 作者:今日头条iOS团队 原文:https://techblog.toutiao.com/2017/01/17/iosspeed/ 应用启动时间,直接影响用户对一款应用的判断和使用体验.头条 ...
- 11G内存设置一例
11G的内存设置参数有memory_target.memory_max_target.sga_target.pga_aggregate_target等. 一个特别繁忙的数据库,前期内存设置较低,物理内 ...
- block之---内存管理
首先简单说下MRC和ARC MRC: 手动管理内存,需要自己去释放内存, 如果对象的引用计数器为0时对象就会被释放. 属性修饰策略:assign, retain, copy ARC: ARC是编译器特 ...