ajax最大的好处就在于加载和删除的时候不会跳转页面，现在的网页大多都会选择用ajax来写，相比嵌入PHP代码来说减少了代码量，同时加载页面也会比较快，

 下面是用ajax以数据库fruit表为例写的加载页面和水果的删除，刚开始用ajax可能写起来还是会比较手生，就当是练习好了

这是fruit表

 下面就是首页的代码了，先建一个php文件 main.php

 <body>

 <h2>内容加载</h2>

 <table cellpadding="0" cellspacing="0" border="1" width="100%">

     <tr>

         <td>水果名称</td>

         <td>水果价格</td>

         <td>水果产地</td>

         <td>操作</td>

     </tr>

     <tbody id="tb">

     </tbody>

 </table>

 </body>

 我选择的是在页面只显示fruit表中的水果名称 价格和产地这三列，下面我们就要写加载的处理页面了，建一个php文件，jiazaiym.php

 <?php

 include("DADB.class.php");

 $db=new DADB();

 $sql="select * from fruit ";

 $arr=$db->Query($sql);

 $str="";

 foreach($arr as $v)

 {

   $str=$str.implode("^",$v)."|";  //每一行之间用“|”连接，这样最后就会多出一个“|”

 }

 $str=substr($str,0,strlen($str)-1); //把最后多出的“|”用截取字符串的方式删去

 echo $str;

 ?>

加载页面代码写完之后就可以正式的写ajax了,这些是要写在main.php中的

 <script type="text/javascript">

     $.ajax({

         url:"jiazaiym.php",

         dataType:"TEXT",

         success:function(data){

             var str = "";

             var hang = data.split("|");

             for(var i=0;i<hang.length;i++)

             {

                 var lie = hang[i].split("^");

                     str = str+"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td><input type='button'  ids='"+lie[0]+"' class='sc' value='删除'/></td></tr>"

             }

           $("#tb").html(str);

         }

     })

 </script>

注意：在写ajax的时候要特别注意里面的分号和逗号，我自己总是把逗号写成分号，结果无法输出，在检查一遍代码无误后，才发现是逗号写错了，这是件非常令人头疼的事情

写完加载页面之后我们要开始写删除页面了  建一个php文件 shanchu.php，删除页面是非常简单的 和之前直接嵌入php 是差不多的 

 <?php

 $ids=$_POST["ids"];

 include("DADB.class.php");

 $db=new DADB();

 $sql="delete from fruit where ids={$ids}";

 if($db->Query($sql,0))

 {

     echo"OK";

 }

 else{

     echo"flase";

 }

接下来在我要重新写一个ajax的时候会发现，写完之后不运行，因为在加载页面的时候删除里面的 class不识别，这就需要我把删除放到加载的ajax里面了 同时把加载封装成一个方法，删除的时候调用一下就可以

 <script type="text/javascript">

     Load();

     function Load() {

         $.ajax({

             url: "jiazaiym.php",

             dataType: "TEXT",

             success: function (data) {

                 var str = "";

                 var hang = data.split("|");

                 for (var i = 0; i < hang.length; i++) {

                     var lie = hang[i].split("^");

                     str = str + "<tr><td>" + lie[1] + "</td><td>" + lie[2] + "</td><td>" + lie[3] + "</td><td><input type='button'  ids='" + lie[0] + "' class='sc' value='删除'/></td></tr>"

                 }

                 $("#tb").html(str);

                 //删除页面

                 $(".sc").click(function(){

                     var ids=$(this).attr("ids");

                 $.ajax({

                     url: "shanchu.php",

                     data: {ids: ids},

                     type: "POST",

                     dataType: "TEXT",

                     success: function (aa) {    //去空格

                         if (aa.trim() == "OK") {

                             alert("删除成功");

                             Load();

                         }

                         else {

                             alert("删除失败");

                         }

                     }

                 })

                 })

             }

         })

     }

 </script>

这样写起来就没有问题了。

 

 

ajax 实现页面加载和内容的删除的更多相关文章

  1. PHP+Ajax点击加载更多内容 －这个效果好，速度快，只能点击更多加载，不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

  2. PHP+Ajax点击加载更多内容

    css样式: <style type="text/css"> #more{margin:10px auto;width: 560px; border: 1px soli ...

  3. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  4. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  5. PHP + JavaScript + Ajax 实现无刷新页面加载效果

    数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...

  6. ASP.NET MVC如何在页面加载完成后ajax异步刷新

    背景:之前已写过两篇有关Ajax的随笔,这一篇是单独针对在页面加载完成的Ajax操作.比如说打开学生列表页面,先加载页面,然后以Ajax的方式,从数据库中检索相应的学生信息,给浏览者更好的体验. 简单 ...

  7. layui 页面加载完成后ajax重新为 html 赋值 遇到的坑

    页面加载完毕后,通过 ajax 按照返回值,为部分 html 赋值: $(function(){ ..... }) 直接这样写,报错,$ 没有定义什么的,错位原因为 jquery 引入错误. layu ...

  8. Javascript在页面加载时的执行顺序【转】

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  9. Ajax动态滚动加载数据

    看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...

随机推荐

  1. js架构设计模式——前端MVVM框架设计及实现（二）

    前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...

  2. --@angularJS--自定义服务与后台数据交互小实例

    1.myService.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

  3. java调用webservice

    http://www.cnblogs.com/sun_moon_earth/archive/2009/02/03/1383308.html http://www.cnblogs.com/siqi/ar ...

  4. 如何估算网站日承受最大访问PV

    每个老板或客户都会问架构师这个问题. 你设计的网站能承受多大的日访问量. 程序员都会拍胸脯说出一个心理最大数字.说的时候很有信心.其实这个数字大多是猜的.作为一个理性的程序员怎么能用猜呢? 这里就介绍 ...

  5. Pomelo聊天室框架

    聊天室是验证服务器最典型的例子,Pomelo的运行架构: 在这个架构里,前端服务器也就是connector专门负责承载连接, 后端的聊天服务器则是处理具体逻辑的地方. 这样扩展的运行架构具有如下优势: ...

  6. loadrunner解决浏览器死机问题

    初次接触loadrunner时,遇到很多问题.浏览器崩溃以及录不到脚本就折磨了一周时间.最后终于解决 一.浏览器崩溃问题 1.退出安全卫士和防火墙 2.去掉IE第三方扩展.工具-Internet选项- ...

  7. docker - 容器里安装ssh

    docker安装ssh 通过命令行安装 pull ubuntu镜像 docker pull ubuntu:latest 启动并进入bash docker run -it -d ubuntu:laste ...

  8. 设置tableView的分割线填满cell的方式总结

    方式一:cell的底部添加一个UIView 1.在tableViewController的viewDidLoad中取消系统的分割线 // 取消系统的分割线 self.tableView.separat ...

  9. 关于nodejs express4.X框架不支持layout模板的问题解决

    网上有有种方法是安装express-partials模块,然后在 app.set(‘view engine’, ‘ejs’); 这句后面加上app.use(partials());但是,经过我的反复尝 ...

  10. Xamarin组件包 Xamarin.ToolKit

    一  简介 Xamarin.ToolKit是个人在使用xamrin.froms开发2年中,因实际项目需要所自定义的组件包.该组件包采用xamarin.froms方式封装,用户可像普通forms控件那样 ...