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. NodeMCU之旅（二）：断线自动重连，闪烁连接状态

    事件监听器 NodeMCU采用了事件响应的方式.也就是说,只需为事件设置一个回调函数,当事件发生时,回调函数就会被调用. 注册事件监听器 wif.sta.eventMonReg() 开始监听 wifi ...

  2. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第六章：管理产品图片——多对多关系（上篇）

    在这章中,我们将学习如何创建一个管理图片的新实体,如何使用HTML表单上传图片文件,并使用多对多关系将它们和产品关联起来,如何将图片存储在文件系统中.在这章中,我们还会学习更加复杂的异常处理,如何向模 ...

  3. 简单js

    js是一门弱类型的语言,要是你学过c/c++,那么上手js是一件简单的事情. js的变量是通过 var 来声明的.例如:声明一个变量 num 是这样的: var num; 我们也可以直接用 num , ...

  4. Hadoop 的安装及配置

    Linux RedHat--CentOs     CentOs 6.4 Debian--Ubuntu   VMware 虚拟机 关于虚拟机实现上网的解决办法         NAT: 网络地址转换 当 ...

  5. (译)AngularJS1.3.0 开发者指南(四) -- 控制器

    理解Controllers 在AngularJS中, Controller是一个Javascript构造函数, 常常被用来扩展 Angular Scope 对象. 控制器通过 ng-controlle ...

  6. 地图学与GIS制图的基础理论（一）

    说到地图制作,很多人第一时间就会跟地图学进行挂钩.是的,地图学的很多理论和知道思想都非常适合基于GIS制图.可以说,利用GIS进行电子地图制作,其实也属于地图学的一小部分. 地图学是研究地图的理论.地 ...

  7. 【m元素集合的n个元素子集】

    /* m元素集合的n个元素子集 说明: 假设有个集合拥有m个元素,任意的从集合中取出n个元素,则这n个元素所形成的可能子集有那些? 解法: 假设有5个元素的集点,取出3个元素的可能子集如下: {1 2 ...

  8. linux上安装Oracle 11g R2 标准版 64位

    一.Oracle 安装前的准备 检查一下包,必须全部安装: binutils-2.20.51.0.2-5.43.el6.x86_64 compat-libstdc++-296-2.96-144.el6 ...

  9. java 非缓冲与缓冲数据写入比较

    //非缓冲计时package com.swust; import java.io.*; /* *功能:创建一个程序,写10000个随机双精度的数到一个文件中,同时测试运用缓冲和非缓冲技术 * 进行这种 ...

  10. nodejs笔记1 ----关于express不是本地命令

    1,npm install -g express安装express框架 2,npm install -g express-generator安装命令工具 3,express --help 安装完成