看过一些抽红包的例子,之后总结了一下,写了这篇博客。
点击某红包之后效果:
这个是前端页面html部分代码
<div class="home-main">
<span class="btn_submit"><a href="javascript:void(0)">红包1</a></span>
<span class="btn_submit"><a href="javascript:void(0)">红包2</a></span>
<span class="btn_submit"><a href="javascript:void(0)">红包3</a></span>
<div id="test"></div>
</div>
这个是前端ajax代码
(强烈推荐用PHPstrom,或者两个编辑器切换着来用,其他的一些编辑器,对于符号以及括号的纠错较差,很可能在此部分出错,另外,如果代码没错,还是出问题,建议可以从头捋一捋符号是否少写了,或者多写了)
<script type="text/javascript">
$('.btn_submit').click(function(){
$.ajax({
type: "POST",
url: "{:U('Home/Choujiang/return')}",
//如果请求成功,返回数据。
success : function(data) {
value = jQuery.parseJSON(data);
//alert(value);
//接受信息,并将其展示在页面上
var html = "";
html ='<span style="color:red;">'+value+'</span>';
$("#test").html(html); //在html页面id=test的标签里显示html内容
}
});
})
</script>
这个是后端代码
//抽奖页面加载
public function index(){
return $this->fetch();
}
//返回抽奖的函数
public function return(){
$a1 = range(1,5);
$a2 = range(6,50);
$a3 = range(51,100);
$index = rand(1,100);
$info = '';
if(in_array($index,$a1))
{
$info = '获得一等奖';
}
if(in_array($index,$a2))
{
$info= '获得二等奖';
}
if(in_array($index,$a3))
{
$info = '获得三等奖';
}
$this->ajaxReturn($info);
}
另外,本人在写程序的时候要遇到过一个问题。由于,本人是PHP出身,前端了解不是很深,遇到了一些问题
后端返回的值,为json,但是是字符串型的json,需要前端进行处理
如果没有这句话,效果是这样的。
这个尤其需要处理一下,可以前端打印一下,在做相应的处理。
因为,我们之前写的例子,返回的值,只有一项,所以,怎么变都是string,我们变换一下,改变一下,返回值的结构
这样,前端的打印结果就不一样了
之前直接返回的是string类型的json,需要转换为对象类型的json才能被js处理。