js与php的ajax交互（以zbp为例）-教程、积累-涂涂研版

ajax的json方式：

（1）前台文件代码：

<div class="post-contenta"><a id="dianji">1525</a></div>
<div class="post-content123" data-postid='12' >我的数据</div>

（2）前台js文件代码内容：

jQuery(document).ready(function($){ 
$(document).delegate("#dianji","click",function(event) {
//var postid=$(this).attr("data-postid");
var p =$('.post-content123');
//var postid=$(".post-content").attr("data-postid");
var postid=$(".post-contenta").html();
$.ajax({
type:'post',
async:true,
url:bloghost + "zb_users/plugin/shili/save2.php?"+new Date(),
 
data:{
postid:postid
},
dataType:'json',
success:function(data){
     alert("成功！");  
p.html(data);  
},
error:function(data){
   alert("失败！");     
}
});
});
});

（3）后台Php文件代码：

<?php
require '../../../zb_system/function/c_system_base.php';
require '../../../zb_system/function/c_system_admin.php';
$zbp->Load();
if (!$zbp->CheckPlugin('shili')) {$zbp->ShowError(48);die();}
$postid=GetVars("postid","POST");
$abc=json_encode($postid);
print_r($abc);
?>

（4）前台点击#dianji的时候会立即显示如下图：

点击确认后显示如下：

这就实现了交互。

ajax的html方式：

（1）前台html和之前一样。

（2）前台js文件代码内容：

jQuery(document).ready(function($){ 
$(document).delegate("#dianji","click",function(event) {
//var postid=$(this).attr("data-postid");
var p =$('.post-content123');
//var postid=$(".post-content").attr("data-postid");
var postid=$(".post-contenta").html();
$.ajax({
type:'post',
async:true,
url:bloghost + "zb_users/plugin/shili/save2.php?"+new Date(),
 
data:{
postid:postid
},
dataType:'html',
success:function(data){
     alert("成功！");  
p.html(data);  
},
error:function(data){
   alert("失败！");     
}
});
});
});

（3）后台php代码：

<?php
require '../../../zb_system/function/c_system_base.php';
require '../../../zb_system/function/c_system_admin.php';
$zbp->Load();
if (!$zbp->CheckPlugin('shili')) {$zbp->ShowError(48);die();}
$postid=GetVars("postid","POST");
print_r($postid);
?>

（4）效果与前面的一样。