代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AJAX-留言板</title>
<link href="./assets/css/bootstrap.min.css" rel="stylesheet">
<script src="./assets/js/vue.min.js"></script>
<script src="./assets/js/axios.min.js"></script>
<style>
a{
color:#333333;
text-decoration: none;
}
a:hover{
color:#3339;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>AJAX-留言板</h1>
<hr/>
<div id="comment_operation">
<label for="comment">评论</label>
<input type="text" class="form-control" id="comment" name="comment" placeholder="WDNMD" v-model="comment" required>
<br>
<div class="form-inline">
<div class="form-group">
<label for="vistor-name">姓名</label>
<input type="text" class="form-control" id="vistorname" name="vistorname" placeholder="7gugu" v-model="vistorname" required>
</div>
<div class="form-group">
<label for="email">电子邮箱</label>
<input type="email" class="form-control" id="email" placeholder="gz7gugu@qq.com" v-model="email" required>
</div>
<button type="submit" class="btn btn-info" id="button_send" v-on:click="sendcomment()" v-bind:disabled="button_dis">发表评论</button>
</div>
</div>
<hr/>
<div id="comment_show">
<!--状态提示-->
<template v-if="alert_state=='info'">
<div class="alert alert-info" role="alert">{{alert_data}}</div>
</template>
<template v-else-if="alert_state=='warning'">
<div class="alert alert-warning" role="alert">{{alert_data}}</div>
</template>
<template v-else-if="alert_state=='success'">
<div class="alert alert-success" role="alert">{{alert_data}}</div>
</template>
<template v-else-if="alert_state=='danger'">
<div class="alert alert-danger" role="alert">{{alert_data}}</div>
</template>
<div v-if="comment_state">
<div name="comment_show" v-for="(comment,i) in comments">
<div class="col-md-2">
<img v-bind:src="avatar_link" alt="avatar" class="img-thumbnail" />
</div>
<div class="col-md-10">
<h2><a href="mailto:{{comment[2]}}">{{comment[1]}}</a></h2>
<h6>{{comment[4]}}</h6>
<p>{{comment[3]}}</p>
</div>
</div>
<nav style="float:right;">
<ul class="pagination">
<template v-if="show_pre">
<li id="previous">
<a v-on:click="page(pre_num);" id="previous_link" name="previous_link">
<span aria-hidden="true">«</span>
</a>
</li>
</template>
<template v-else>
<li id="previous" class="disabled">
<a id="previous_link" name="previous_link" disabled=true>
<span aria-hidden="true">«</span>
</a>
</li>
</template>
<template v-if="show_next">
<li id="next">
<a v-on:click="page(next_num);" id="next_link" name="next_link">
<span aria-hidden="true">»</span>
</a>
</li>
</template>
<template v-else>
<li id="next" class="disabled">
<a id="next_link" name="next_link" >
<span aria-hidden="true">»</span>
</a>
</li>
</template>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</body>
<footer style="text-align:center;margin-left:auto;margin-right:auto;">
Power By 7gugu
</footer>
<script>
var formdata;
var vue = new Vue({
el:"#comment_show",
data:{
alert_state:0,
alert_data:"评论装填中,请稍候..",
comment_state:false,
avatar_link:"https://secure.gravatar.com/avatar/8088cc2320104c3134031f33c98c592c?s=100&d=retro&r=x",
comments:[],
show_pre:true,
show_next:true,
pre_num:0,
next_num:0,
},
methods:{
page:function(num){
formdata = new window.FormData()
formdata.append("getcomment",num);
axios.post('ajax.php',formdata,{headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}})
.then(function(response){
if(response.data.status=="success"){
vue.comment_state=true;
for(var i=0;i<response.data.response.length;i++){
Vue.set(vue.comments,i,response.data.response[i]);
}
vue.alert_state='';
}else if(response.data.status=="danger"){
vue.alert_state='warning';
vue.alert_data="无评论,快来当楼主吧!";
vue.comment_state=false;
}
}).catch(function (error) {
// 请求失败处理
console.log(error);
});
formdata = new window.FormData()
formdata.append("getpage",num);
axios.post('ajax.php',formdata,{headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}})
.then(function(response){
if(response.data.status=="success"){
vue.pre_num=response.data.previous;
vue.next_num=response.data.next;
}else if(response.data.status=="danger"){
vue.pre_num=0;
vue.next_num=0;
}
vue.init();
}).catch(function (error) {
// 请求失败处理
console.log(error);
});
},
init:function(){
if(this.pre_num==0){this.show_pre=false;}else{this.show_pre=true;}
if(this.next_num==0){this.show_next=false;}else{this.show_next=true;}
},
getcomment:function(){
formdata = new window.FormData()
formdata.append("getcomment",this.pre_num+1);
axios.post('ajax.php',formdata,{headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}})
.then(function(response){
if(response.data.status=="success"){
vue.comment_state=true;
for(var i=0;i<response.data.response.length;i++){
Vue.set(vue.comments,i,response.data.response[i]);
}
vue.alert_state='';
}else if(response.data.status=="danger"){
vue.alert_state='warning';
vue.comment_state=false;
vue.alert_data="无评论,快来当楼主吧!";
}
}).catch(function (error) {
// 请求失败处理
console.log(error);
});
},
getpage:function(){
formdata = new window.FormData()
formdata.append("getpage",this.pre_num+1);
axios.post('ajax.php',formdata,{headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}})
.then(function(response){
if(response.data.status=="success"){
vue.pre_num=response.data.previous;
vue.next_num=response.data.next;
}else if(response.data.status=="danger"){
vue.pre_num=0;
vue.next_num=0;
}
vue.init();
}).catch(function (error) {
// 请求失败处理
console.log(error);
});
}
},
mounted (){
axios.interceptors.request.use(function (config) {
vue.alert_state='info';
return config;
});
this.getcomment();
this.getpage();
}
});
var op = new Vue({
el:"#comment_operation",
data:{
comment:"",
vistorname:"",
email:"",
button_dis:false,
},
methods:{
sendcomment:function(){
console.log(this.comment);
if(this.comment==""){
vue.alert_state='warning';
vue.alert_data="请输入评论!";
return;
}
if(this.vistorname==""){
vue.alert_state='warning';
vue.alert_data="请输入姓名!";
return;
}
if(this.email==""){
vue.alert_state='warning';
vue.alert_data="请输入邮箱地址!";
return;
}
vue.alert_state='';
vue.alert_data="";
formdata = new window.FormData();
formdata.append("sendcomment","true");
formdata.append("comment",this.comment);
formdata.append("vistorname",this.vistorname);
formdata.append("email",this.email);
vue.alert_data="评论发送中...";
op.button_dis=true;
axios.interceptors.request.use(function (config) {
vue.alert_state='info';
return config;
});
axios.post('ajax.php',formdata,{headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'}})
.then(function(response){
if(response.data.status=="success"){
vue.alert_state='success';
vue.alert_data="评论发送成功!";
setTimeout(function(){
vue.alert_state='';
vue.alert_data='评论装填中,请稍候..';
vue.pre_num=0;
vue.getcomment();
},3000);
}else if(response.data.status=="danger"){
vue.alert_state='danger';
vue.alert_data="评论发送失败!";
}
op.button_dis=false;
});
},
}
});
</script>
<!-- 两个BUG鸣翠柳，一行代码上西天。 -->
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。