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. 如何将php数组或者对象传递给javascript

    在网上搜了一些方法,最后自己采用的是通过json字串的方式. 假设有一个php 数组 $arr,代码如下: 代码如下: <script> // html5中默认的script是javasc ...

  2. HTML 多媒体、Object 元素、音频、视频

    Web 上的多媒体指的是音效.音乐.视频和动画. 现代网络浏览器已支持很多多媒体格式. 什么是多媒体? 多媒体来自多种不同的格式.它可以是您听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动 ...

  3. Canvas drawImage API

    drawImage <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. [CSS3] 学习笔记-CSS3盒子样式

    1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...

  5. jq-实战之表格筛选

    css部分 .select{background: #ccc} html部分 table width="> <thead> <th>姓名</th> ...

  6. 性能优化之数据存储&DOM编程

    多读书多看报 数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员.   ·要理解变量的访问速度,就要理解作用域. ...

  7. Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSInvocation setArgument:atIndex:]: index (3) out of bounds [-1, 2]'

    这是相机调用方法的时候参数错误

  8. Python学习--17 进程和线程

    线程是最小的执行单元,而进程由至少一个线程组成.如何调度进程和线程,完全由操作系统决定,程序自己不能决定什么时候执行,执行多长时间. 进程 fork调用 通过fork()系统调用,就可以生成一个子进程 ...

  9. DBMS 的个人理解

    再看自己数据库时,感觉还是有点迷茫:数据库到底是怎们工作的呢?虽然之前把代码都弄了一遍,可是效果还是不太理想. 数据库到底是怎么连到用户的程序上的呢?它的内部到底是怎么运行的呢?我研究了一段时间,获得 ...

  10. Python 最大公约数的欧几里得算法及Stein算法

    greatest common divisor(最大公约数) 1.欧几里得算法 欧几里德算法又称辗转相除法,用于计算两个正整数a,b的最大公约数. 其计算原理依赖于下面的定理: 两个整数的最大公约数等 ...