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. pureMVC简单示例及其原理讲解一(开篇)

    pureMVC是一个MVC框架,皆在最大限度的减少MVC间的耦合性.本人刚刚接触pureMVC时感到一头雾水,不知从何入手,也不知道从何学习.好在本人有耐性且能看懂英文技术文档,面向对象的编程能力也比 ...

  2. Eclipse Sort Members默认之后恢复的方法

    alt+shift+s -- > m CRLF 默认一种排序之后,对话框就再也出不来了: 使用这样的方法: window - preference - Java | Java dialogs | ...

  3. mac下sublime 配置使用markdown

    Sublime Text作为一个优秀的文本编辑器,拥有很多的扩展插件.我们可以利用这些插件为Sublime Text 增加扩展的功能.mac常用编辑器强烈推荐sublime,当前出到Sublime T ...

  4. HDU5057(分块)

    Argestes and Sequence Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  5. 学习计划（一）——JavaScript

    一:与前端之缘 大一时除了上课和社团外不知道要学点什么,但是又不想睡觉打游戏,常常就是啥都想学,photoshop,premiere,After Effects都学,但始终没有明确的目标. 大二时一直 ...

  6. MVC分页控件

    1.下载MvcPager.dll文件并引用到MVC项目中 2.在控制器中引用命名空间using Webdiyer.WebControls.Mvc; 3.获取数据集合,数据的总记录数(数据集合有多少条数 ...

  7. Jenkins的插件

    Jenkins不仅自己为大家提供了很多功能,而且还支持插件.用户可以根据自己的需要安装插件,或者是自己开发插件. 这里说一下Jenkins的插件的安装方法: 首先,打开Jenkins首页,选择Jenk ...

  8. excel表格的特殊需求引发的Java思考

    前言: 前些天遇到了这样的一个需求,将下图: 将表格中货号-前面部分一致的行合成一行,并且将第二行,第三行的价格添加到第一行中为价格二,价格三.如图: 接到这样的需求,我的第一感觉是直接手动合并(暗暗 ...

  9. SQL极限函数limit()详解<分页必备>

    limit含义: limit英语中的含义是限制,限定的意思.小日本曾上映过一个电影就是叫limit是由漫画改编的电影,剧情很变态,但不可否认小日本由于地狭人稠的原因,在观念上的资源危机意识还是很强的哈 ...

  10. plugman创建cordova插件

    一.安装plumam npm install -g plugman 二.安装完之后,就可以创建plugin plugman create --name --plugin_id --plugin_ver ...