手把手教学:通过ajax+layui+js+php创建一个吐槽大会网站
由于篇幅所限,这里我们只展示如何使用ajax、layui和php创建一个简单的发送吐槽内容的功能。
首先,我们需要一个HTML表单来输入屎话:
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">屎话</label>
<div class="layui-input-block">
<input type="text" name="shit" required lay-verify="required" placeholder="请输入屎话" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">发送</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
然后是JavaScript代码,使用ajax发送数据到后端:
layui.use(['form', 'jquery'], function(){
var form = layui.form
,$ = layui.jquery;
form.on('submit(formDemo)', function(data){
$.ajax({
url: 'shit.php', //后端处理程序
type: 'post',
data: data.field, //获取表单数据
dataType: 'JSON', //返回数据格式
success: function(data){
//根据返回的数据进行操作
if(data.status == 1){
layer.msg(data.msg,{icon:1,time:2000},function(){
//关闭当前窗口
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
} else {
layer.msg(data.msg,{icon:2,time:2000});
}
},
error: function(data){
layer.msg('发送失败',{icon:2,time:2000});
},
});
return false; //阻止表单自动提交
});
});
最后是PHP代码,用于接收和处理数据:
<?php
// shit.php
header('Content-Type:application/json;charset=utf-8');
$status = 0;
$msg = '发送失败';
if(!empty($_POST['shit'])){
// 这里可以将屎话内容保存到数据库
// ...
$status = 1;
$msg = '发送成功';
}
echo json_encode(array('status'=>$status,'msg'=>$msg));
?>
这个简单的例子展示了如何使用ajax、layui和php创建一个简单的发送内容的功能。在实际应用中,你需要添加更多的安全处理,例如防止SQL注入、XSS攻击等。
评论已关闭