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. jQuery 获取和设置type为hidden的input的值

    HTML代码 <input type="hidden" name="type" id="type" value="1&quo ...

  2. 浅谈Socket长连+多线程[原创，欢迎指点]

    前戏 [PS:原文手打,转载说明出处] [PS:博主自认为适用于云平台设备管控,且适用于IM主控] 好久没来了,13年时还想着多写一些博客,这都17年过年,年前也写一写Scoket+多线程,不足之处, ...

  3. 从svn上回滚版本

    转载地址:http://blog.csdn.net/happyqyt/article/details/7107039 提交SVN后想回滚到旧版本. 选择TortoiseSVN→Repo-browser ...

  4. WUI->ACE权限

    Configuration & Implementation of CRM Access Control Engine (ACE)-Part 1 https://blogs.sap.com/2 ...

  5. IIS 之 在IIS7、IIS7.5中应用程序池最优配置方案

    找到Web站点对应的应用程序池,"应用程序池" → 找到对应的"应用程序池" → 右键"高级设置..." 一.一般优化方案 1.基本设置 [ ...

  6. datagridview数据绑定操作数据库实现增删改查

    DataSet数据集,数据缓存在客户端内存中,支持断开式连接.DataGridView控件绑定DataSet时,它自动的改变的DS的行的状态,而且在做增删改查的时候,可以借助SqlCommandBui ...

  7. 读书笔记 effective c++ Item 5 了解c++默认生成并调用的函数

    1 编译器会默认生成哪些函数  什么时候空类不再是一个空类?答案是用c++处理的空类.如果你自己不声明,编译器会为你声明它们自己版本的拷贝构造函数,拷贝赋值运算符和析构函数,如果你一个构造函数都没有声 ...

  8. IP分类以及特殊IP

     一.IP分类 点分十进制数表示的IPv4 地址分成几类,以适应大型.中型.小型的网络.这些类的不同之处在于用于表示网络的位数与用于表示主机的位数之间的差别.IP地址分成五类,用字母表示:       ...

  9. jenkins全局安全设置

    如何进入安全设置界面          在Jenkins的主界面,点击 configure Global Security 选项,进入Jenkins的系统安全设置界面.安全界面如下图.在这里我们分别介 ...

  10. IP数据报格式 及路由转发算法

    ip数据报分首部和数据两部分组成: 首部分为固定部分和可变部分 版本--占 4 位,指 IP 协议的版本 目前的 IP 协议版本号为 4 (即 IPv4) 首部长度--占 4 位,可表示的最大数值 是 ...