网页之间传输的三种方式:TEXT、JSON、XML。

本章将讲解带有TEXT形势的ajax网页传输

第一:body部分代码

  1. <title>ajax中TEXT讲解并且带有删除功能的表格</title>
  2. <script src="jquery-2.0.0.min.js"></script>
  3. <style type="text/css">
  4. .sc
  5. {
  6. width:70px;
  7. height:30px;
  8. background-color:#3FF;
  9. color:#F00;
  10. text-align:center;
  11. line-height:30px;
  12. vertical-align:middle;
  13. font-size:20px;
  14. }
  15. .sc:hover
  16. {
  17. cursor:pointer;
  18. background-color:#096;
  19. }
  20. </style>
  21. </head>
  22.  
  23. <body>
  24. <input type="button" value="显示数据" id="btn"/>
  25. <table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0">
  26.  
  27. </table>
  28. </body>

  

第二:点击“显示数据”需要用到的chuli.php代码

  1. <?php
  2. include("DBDA.class.php");
  3. $db=new DBDA();
  4.  
  5. $sql="select * from info";
  6.  
  7. //自己写语句
  8. /*$attr=$db->Query($sql);
  9.  
  10. $str="";
  11. foreach($attr as $v)
  12. {
  13. $str=$str.implode("^",$v);
  14. $str=$str."|";
  15. }
  16.  
  17. $str=substr($str,0,strlen($str)-1); //截取最后的“|”*/
  18.  
  19. //调用封装类里面的函数
  20. $re=$db->StrQuery($sql);
  21.  
  22. echo $re;

  

AJAX调用返回字符串所引用的StrQuery()函数

  1. //AJAX调用返回字符串
  2. function StrQuery($sql,$type=0,$ku="mydb")
  3. {
  4. $db=new MySQLi($this->host,$this->uid,$this->pwd,$ku);
  5.  
  6. !mysqli_connect_error() or die ("连接失败");
  7.  
  8. $result=$db->query($sql);
  9.  
  10. //当为查询语句时
  11. if($type==0)
  12. {
  13. $attr=$result->fetch_all();
  14. $str="";
  15.  
  16. for($i=0;$i<count($attr);$i++)
  17. {
  18. for($j=0;$j<count($attr[$i]);$j++)
  19. {
  20. $str=$str.$attr[$i][$j];
  21. $str=$str."^";
  22. }
  23. $str=substr($str,0,strlen($str)-1);
  24. $str=$str."|";
  25. }
  26. $str=substr($str,0,strlen($str)-1);
  27.  
  28. return $str;
  29. }
  30. //增删改语句
  31. else
  32. {
  33. if($result)
  34. {
  35. return "OK";
  36. }
  37. else
  38. {
  39. return "NO";
  40. }
  41. }
  42. }

  

第三:JScript中运行的“显示数据”用到的js代码函数

  1. function Showall()
  2. {
  3. $.ajax({
  4.  
  5. async:false,
  6. url:"chuli02.php",
  7. dataType:"TEXT",
  8. success: function(data){
  9.  
  10. var str="<tr align='center'><td>代号</td><td>姓名</td><td>性别</td><td>民族</td><td>生日</td><td>操作</td><tr>";
  11.  
  12. var hang=data.split("|"); //以“|”截取
  13.  
  14. for(var i=0;i<hang.length;i++){
  15.  
  16. var lie=hang[i].split("^");
  17.  
  18. //str+="<tr align='center'><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><div class='sc' bs='"+lie[0]+"'>删除</div></td></tr>";
  19.  
  20. str+="<tr align='center'>";
  21.  
  22. for(var j=0;j<lie.length;j++)
  23. {
  24. str+="<td>"+lie[j]+"</td>";
  25. }
  26.  
  27. str+="<td><div class='sc' bs='"+lie[0]+"'>删除</div></td>";
  28.  
  29. str+="</tr>";
  30. }
  31.  
  32. $("#xianshi").html(str);
  33. }
  34. })

  

第四:表格中点击“删除”后台运行的代码delete.php

  1. <?php
  2. $code=$_POST["code"];
  3. include("DBDA.class.php");
  4. $db=new DBDA();
  5.  
  6. $sql="delete from info where code='{$code}'";
  7.  
  8. $r=$db->Query($sql,1); //1代表增删改,默认0代表查询
  9. if($r)
  10. {
  11. echo "OK";
  12. }
  13. else
  14. {
  15. echo "NO";
  16. }

  

第五:JScript中“删除”用到的js函数代码

  1. function BindCK(){
  2.  
  3. $(".sc").click(function(){
  4.  
  5. var code=$(this).attr("bs");
  6.  
  7. $.ajax({
  8.  
  9. url:"delete03.php",
  10. data:{code:code},
  11. type:"POST",
  12. dataType:"TEXT",
  13. success:function(data){
  14.  
  15. if(data=="OK"){
  16.  
  17. Showall();
  18. BindCK();
  19.  
  20. }
  21. else{
  22.  
  23. alert("删除失败!");
  24. }
  25.  
  26. }
  27. })
  28.  
  29. })
  30.  
  31. }

  

第六:JScript中两个函数代码整合在一起的调用的代码

  1. $("#btn").click(function(){
  2.  
  3. Showall();
  4.  
  5. BindCK();
  6.  
  7. })

  

ajax中网页传输(一)TEXT——带有删除功能的数据库表格显示练习的更多相关文章

  1. ajax中网页传输(三)XML——下拉列表显示练习

    XML:页面之间传递数据,跨平台传递 HTML:超文本标记语言,核心标签 XML的形势为 <xml version='1.0'> <Nation> <one> &l ...

  2. ajax中网页传输(二)JSON——下拉列表显示练习

    以json返回数据类型显示“民族下拉列表” 第一:body页面显示部分 <title>JSON下拉显示Nation表中的数据</title> <script src=&q ...

  3. jqGrid添加删除功能(不和数据库交互)

    jqGrid添加删除功能(不和数据库交互) 一.背景需求 项目中需要在前端页面动态的添加行,删除行,上下移动行等,同时还不和数据库交互.一直在用jqGrid展示表格的我们,从没有深入的研究过它,当然看 ...

  4. AJAX中的dataType(数据格式)-text、json

    因为经常使用数据格式,所以将它封装成类,J这样就不会用到时就写了,直接调用写好的类就可以了 (1)dataType数据格式为:TEXT格式的数据是字符串的数据,在"ajax对数据进行删除和查 ...

  5. Ajax中的JSON格式与php传输过程的浅析

    在Ajax中的JSON格式与php传输过程中有哪些要注意的小地方呢? 先来看一下简单通用的JSON与php传输数据的代码 HTML文件: <input type="button&quo ...

  6. ajax“显示弹窗详情”和“删除”功能练习

    1.查看详细信息,以弹窗的形式显示,使用ajax 2.批量删除 “查询”功能可以参考前面的文章,这里只讲解ajax“显示弹窗详情”和“删除”功能 第一:在body中的代码 <title>a ...

  7. 使用HTML5中postMessage实现Ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

  8. AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 《转》

    AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序 测试代码: 测试代码如下: <%@ Page Language="C#" AutoE ...

  9. Mvc音乐商店demo的ajax异步删除功能总结

    刚刚从学校出来参加工作,没啥工作经验,所以各位大神们不要嘲笑哈! 来公司后要进行培训,给我们的作业中有一个使用 dapper+mvc+ajax+SQL Server 2008,来实现一个音乐商店的de ...

随机推荐

  1. html5优势

    1.首先,强化了Web网页的表现性能.除了可描绘二维图形外,还准备了用于播放视频和音频的标签.2.其次,追加了本地数据库等Web应用的功能.3.HTML5(text/html)浏览器将在错误语法的处理 ...

  2. 关于前后台交互生成json区别

    如何返回[object{xx:{}}]这种数组型json在服务器端return $arr[]=m;像这种都可以产生[Object { 0="9", 1="8", ...

  3. sqlserver 四舍五入(转)

    select   cast(round(12.5,2)   as   numeric(5,2)) 解释: round()函数,是四舍五入用,第一个参数是我们要被操作的数据,第二个参数是设置我们四舍五入 ...

  4. Swift-07-析构器deinit

    析构器只适用于类类型,当一个类的实例被释放之前,析构器会被立即调用.析构器用关键字deinit来标识,类似于构造器用init来标识. 原理: Swift会自动释放不再需要的实例以释放资源.Swift通 ...

  5. iOS 时间戳

    时间戳用过一回,总结一下: 1.在Terminal下获得时间戳: date +%s 原来要在服务器端挂文档,方便开发商下载,用时间戳作为文件名称来区分. 2.在程序下获得时间戳: NSDate * n ...

  6. 【转】Http Cache最基本的一些东西

    Http Cache最基本的一些东西 Cache浏览器IEwebkitApache  Http的Cache机制总共有4个组成部分: Cache-Control: max-age=N(seconds)  ...

  7. 真不知道JavaScrip【数组】还有这么多东西....

    前段时间在频繁的用数组,但一直不知道JavaScript 数组还有这么多东西,收集了一下看看: 首先:数组是对象的特殊形式,接下来看看它有哪些方法.....push()在末尾增加一个或者是多个 uns ...

  8. iOS ASIHTTPRequest 请求https

    iOS 终端请求服务端数据时,为了保证数据安全,我们一般会使用https协议加密,而对于iOS的网络编程,我们一般会使用开源框架:ASIHTTPRequest,但是如果使用传统的http方式,即使忽略 ...

  9. Android各个版本 版本号对应关系表

    Platform Version API Level VERSION_CODE Notes Android 5.0 21 LOLLIPOP Platform Highlights Android 4. ...

  10. git的简单使用

    Git-csm.com 安装git  http://www.git-scm.com/download [liujianzuo@mylab ~]$ yum install git 已加载插件:faste ...