ajax 是 asynchronous javascript and xml的缩写。其优点可以减轻服务器的负担,按需取数据,最大程度的减少冗余请求。接下来通过本文给大家介绍ajax基础与登入教程，需要的的朋友参考下
Ajax 是 Asynchronous JavaScript and XML的缩写。
Ajax的优点：
优点：减轻服务器的负担,按需取数据,最大程度的减少冗余请求
局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
基于xml标准化,并被广泛支持,不需安装插件等
进一步促进页面和数据的分离
Ajax包含下列技术：
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。
也就是说Ajax最大的特点就是可以实现动态不刷新
使用Ajax：
例子：
在数据库中的一张表：
实现点击查看用户名是否可用：
主页面代码：
nbsp;html>输入一个用户名： //给文本框加上事件 $("#zhang").blur(function(){ //1取内容 var zhang = $(this).val(); //val取到表单元素、给变量 //2将取到的内容内容区数据库验证 //调用Ajax $.ajax({ type:"POST", //提交方式 url:"chuli.php", //请求哪一个php文件（请求地址） data:{yhm:zhang}, //给zhang取名yhm，传过去，是一个json //请求处理页面需不需要传数据过去，不需要传不用写 dataType:"TEXT", //处理页面返回的类型:TEXT字符串 JSON,JSON，XML，只有三种类型 success:function(data){ //回调函数// data为返回的值 //成功之后要调用的函数 if(data==0) { //如果为0 $("#tishi").text("该用户名为0；可用！"); $("#tishi").css("color","green"); } else { $("#tishi").text("该用户名已存在；不可用！"); $("#tishi").css("color","brown"); } } }); //3给出提示 })
登录后复制
接下来做处理页面：
Query($sql);echo $arr[0][0];//直接输出相当于返回?>
登录后复制
图：
输入已存在用户名：
输入不存在的用户名：
再来写一个登入：
登入页面的代码：
nbsp;html>登入页面
帐号
密码
$("#btn").click(function(){ //1取数据 var zhang = $("#zhang").val(); var mi = $("#mi").val(); //2验证数据 $.ajax({ url:"drcl.php", data:{zhang:zhang,mi:mi}, type:"POST", dataType:"TEXT", success:function (data) { //回调函数 //判断返回值 if(data=="ok") { window.location.href = "zym.php"; } else { alert("用户名或密码错误"); } } }); //提示 })
登录后复制
接下来是登入处理页面：
Query($sql);if($arr[0][0]==$mi && !empty($mi)){ echo "ok";}else { echo "no"; }?>登录后复制
来看一下图，如果输入的不对 直接在本页面提示：
输入的对就跳转：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
jquery中ajax处理跨域的三大方式（图文教程）
实现ajax获取跨域数据（图文教程）
ajax中设置contentType: “application/json”的作用（图文教程）
以上就是Ajax基础与登入教程的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2759441.html
