ajax怎么实现页面加载和内容删除

  介绍

小编给大家分享一下ajax怎么实现页面加载和内容删除,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

ajax最大的好处就在于加载和删除的时候不会跳转页面,现在的网页大多都会选择用ajax来写,相比嵌入PHP代码来说减少了代码量,同时加载页面也会比较快,下面是用ajax以数据库水果表为例写的加载页面和水果的删除,刚开始用ajax可能写起来还是会比较手生,就当是练习好了。

这是水果表:

 ajax怎么实现页面加载和内容删除

,下面就是首页的代码了,先建一个PHP文件主要。php

& lt; body>      & lt; h3>内容加载& lt;/h3>   & lt; table 单元格边距=?”,单元格间距=?”,边境=?“,宽度=啊?00%;比;   ,& lt; tr>   & lt;才能td>水果名称& lt;/td>   & lt;才能td>水果价格& lt;/td>   & lt;才能td>水果产地& lt;/td>   & lt; td>才能操作& lt;/td>   ,& lt;/tr>   ,& lt; tbody  id=皌b"比;      ,& lt;/tbody>   & lt;/table>   & lt;/body>

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

, php & lt; ?   包括(“DADB.class.php");   $ db=new  DADB ();   $ sql=皊elect  *,得到fruit “;   $ arr=$ db→查询($ sql);   $ str=?“;   foreach (arr 美元;as  v)美元   {   ,str=str.implode美元(“^“,v)美元!”|“,,//每一行之间用“|”连接,这样最后就会多出一个“|”   }   美元$ str=substr (str 0 strlen (str)美元1);,//把最后多出的“|”用截取字符串的方式删去   echo  str美元;   祝辞;

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

& lt; script 类型=拔谋?javascript"比;   ,. ajax({美元   url:才能“jiazaiym.php",   数据类型:才能“TEXT",   成功:函数才能(数据){   ,,var  str =,““   ,,var  hang =, data.split (“|“);      ,,(var 我=0;i & lt; td>“+躺[1]+“& lt;/td> & lt; td>“+躺[2]+“& lt;/td> & lt; td>“+躺[3]+“& lt;/td> & lt; td> & lt; input  type=& # 39;按钮# 39;,id=& # 39;“+躺[0]+“& # 39;,类=& # 39;sc # 39; https://www.yisu.com/zixun/, value='删除'/> "      }   $(" #结核病”). html (str);   }   })   

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

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

& lt; php ?   $ id=$ _POST [“ids"];   包括(“DADB.class.php");   $ db=new  DADB ();   $ sql=癲elete 得到fruit  where  id={$ id}“;   如果($ db→查询($ sql, 0))   {   ,echo" OK";   }   其他{   ,echo" flase";   }

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

& lt; script 类型=拔谋?javascript"比;   ,负载();   ,function 负荷(),{   . ajax({美元才能   ,,,url:“jiazaiym.php",   ,,,数据类型:“TEXT",   ,,,成功:function (数据),{   ,,,var  str =,““   ,,,var  hang =, data.split (“|“);      ,,,for  (var 小姐:=,0;,小姐:& lt;, hang.length;,我+ +),{   ,,,,var  lie =,挂[我].split (“^“);   ,,,,str =, str  +,“& lt; tr> & lt; td>“, +,谎言[1],+,“& lt;/td> & lt; td>“, +,谎言[2],+,“& lt;/td> & lt; td>“, +,谎言[3],+,“& lt;/td> & lt; td> & lt; input  type=& # 39;按钮# 39;,id=& # 39;“, +,谎言[0],+,“& # 39;,类=& # 39;sc # 39;, value=& # 39;删除& # 39;/祝辞& lt;/td> & lt;/tr>“      ,,,}   ,,,美元(“# tb") . html (str);   ,,,//删除页面   ,,,$ (“.sc") .click(函数(){   ,,,,var  id=$(这).attr (“ids");   ,,,. ajax({美元   ,,,,url:,“shanchu.php",   ,,,,数据:,{id: id},   ,,,,类型:,“POST",   ,,,,数据类型:,“TEXT"   ,,,,成功:,function  (aa),{,//去空格   ,,,,,if  (aa.trim (),==,“OK"), {   ,,,,,,警报(“删除成功“);   ,,,,,,负载();   ,,,,,}   ,,,,,else  {   ,,,,,,警报(“删除失败“);   ,,,,,}   ,,,,}   null   null   null   null   null   null

ajax怎么实现页面加载和内容删除