需要注意的是,调用的封装的数据库,和jQuery的保存地址

一、注册

(1)写文本框来进行用户名的验证

<input type="text" id="uid" />
<span id="tishi"></span> //这个使用来显示提示信息的

(2)用jQuery语句写:用户名存在不能使用,用户名可以使用

$("#uid").blur(function(){
  //取用户名
  var uid = $(this).val();
  //查数据库,调ajax
  $.ajax({  //ajax方法中必须是json格式
  url: "zhucecl.php",  //处理页面的地址
  data:{u:uid},  //这里是Json的格式:u是起的个名字,uid才是值
  type:"POST", //数据提交方式
  dataType:"TEXT",  //返回的数据格式:字符串格式
  success:function(data){  //成功的话返回匿名函数(回调函数)
      //执行处理页面成功后的语句
      var str = "";
                 
      if(data=="OK")
      {
        str = "用户名可以使用";
        $("#tishi").css("color","green");
      }
      else
      {
        str = "已有用户名";  
        $("#tishi").css("color","red");
      }
      $("#tishi").text(str);
      }
      });     
})

(3)注册的处理页面:写了很多遍的了,不再一句句解释

<?php
//调封装好的类:注意保存位置
include("DBDA.class.php");
$db = new DBDA();
 
//传的值起的名字
$uid = $_POST["u"];
$sql = "select count(*) from renyuan where username='{$uid}'";
 
//调用封装的函数
$attr =$db->Query($sql);
 
//判断用户名是否存在
if($attr[0][0]>0)
{
  echo "NO"; //有重复的用户名
}
else
{
  echo "OK";  //没有重复的用户名
}
 
?>

二、登录

(1)写文本框和登录按钮

<div>账号:<input type="text" id="uid" /></div>
<div>密码:<input type="password" id="pwd" /></div>
<input type="button" value="登录" id="btn" />

(2)写jQuery的语句  

$("#btn").click(function(){
  var uid=$("#uid").val(); //找到用户
  var pwd=$("#pwd").val(); //找到密码
 
  //调ajax方法,里面要用json格式
  $.ajax({
  url:"denglucl.php", //登陆的处理页面
  data:{uid:uid,pwd:pwd}, 
  type:"POST",
  dataType:"text",
  success: function(data)
  {
    if(data.trim()=="OK")
    {
      window.location.href="zhuce.php" rel="external nofollow" ; //用户名密码正确,进入一个页面
    }
    else
    {
      alert("用户名密码输入错误");
    }
  }
  })
       
})

(3)登陆的处理页面:写了很多遍的了,不再一句句解释

<?php
include("DBDA.class.php");
$db = new DBDA();
 
$uid = $_POST["uid"];
$pwd = $_POST["pwd"];
 
$sql = "select mima from huiyuan where yonghu='{$uid}'";
$attr = $db->Query($sql);
 
if(!empty($pwd) && !empty($attr) && $attr[0][0]==$pwd) //密码不为空,数组不为空,输入密码和查出的密码是否相同
{
  echo "OK";  
}
else
{
  echo "ON";  
}

  

登录成功 :

三、ajax的数据处理

(1)先把名称行显示出来,正常编辑就可以,想显示的内容

<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>价格</td>
    <td>产地</td>
    <td>库存</td>
    <td>操作</td>
  </tr>
</table>

(2)再写个显示内容的表

<tbody id="bg">
  //里面放遍历的某个表中的数据内容
</tbody>

(3)写jQuery,页面加载完成后再执行

$(document).ready(function(e) {
  $.ajax({
  url:"xianshicl.php",  
  dataType:"TEXT",
  success: function(data){
    //处理页面处理完成后执行的
       });

(4)编写显示数据处理页面(两种方法)

include("DBDA.class.php"); //调用封装好的类:注意存在位置
$db = new DBDA(); //造新对象
   
$sql = "select * from fruit"; //写sql语句
   
echo $db->StrQuery($sql);  //1.调用封装好的拼接数组为字符串的方法
/* //2.
$attr = $db->Query($sql); //调用封装类中的方法来执行sql语句
$str = "";
foreach($attr as $v)
{
  $str .= implode("^",$v)."|"; //拼接数组为字符串
}
       
echo substr($str,0,strlen($str)-1); //截取字符串:最后的拼接符不显示<br>*/

(5)处理页面结束后,在主页面的ajax中的成功方法中写入处理页面结束后的语句

success: function(data){
  var hang = data.split("|"); //拆分字符“|”串:显示行
           
  var str = "";
  for(var i=0;i<hang.length;i  )
  {
  var lie = hang[i].split("^"); //拆分字符串“^”:显示列
  str  = "<tr><td>" lie[0] "</td><td>" lie[1] "</td><td>" lie[2] "</td><td>" lie[3] "</td><td>" lie[5] "</td><td>操作</td></tr>";  //显示的行和单元格
  }
           
  $("#bg").html(str);
}

这样就显示了:

以上这篇关于ajax的使用方法_例题、ajax的数据处理就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持Devmax。

关于ajax的使用方法_例题、ajax的数据处理的更多相关文章

  1. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  2. 使用 Swift语言进行 Hadoop 数据流应用程序开发

    如果您发现了问题,或者希望为改进本文提供意见和建议,请在这里指出.在您开始之前,请参阅目前待解决的问题清单.简介本项目包括两类Hadoop流处理应用程序:映射器mapper和总结器reducer。如上所示,在Hadoop上编写流处理程序是一个很简单的工作,也不需要依赖于特定的软件体系。

  3. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  4. Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

  5. Ajax跨域问题的解决办法汇总(推荐)

    本文给大家分享多种方法解决Ajax跨域问题,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧

  6. ajax编写简单的登录页面

    这篇文章主要为大家详细介绍了ajax编写简单登录页面的具体代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. ajax从JSP传递对象数组到后台的方法

    今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  8. 解决ajax返回验证的时候总是弹出error错误的方法

    这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法,感兴趣的小伙伴们可以参考一下

  9. 使用AJAX完成用户名是否存在异步校验

    这篇文章主要介绍了使用AJAX完成用户名是否存在异步校验的相关资料,需要的朋友可以参考下

  10. ajax实现无刷新省市县三级联动

    这篇文章主要为大家详细介绍了ajax实现无刷新省市县三级联动的相关资料,利用三层架构实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部