微信小程序?qū)崿F(xiàn)評論功能
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)評論功能的具體代碼,供大家參考,具體內(nèi)容如下
前端
<textarea class='the_prw_in' bindinput='bindblur' cursor-spacing="130" placeholder='說點(diǎn)什么吧...' maxlength="76">
</textarea>
<view class='the_prw_btn' bindtap='btn_send'>
留言
</view>
<view>評論內(nèi)容:</view>
<block wx:for="{{pl_list}}" wx:key="index">
<view class='the_msg' wx:if='{{item.input_value!=null}}'>
<!-- <view class='msg_left'>
<view class='msg_avatar_v'>
<image class='msg_avatar' src='{{msg_data.avatar}}'></image>
</view>
</view> -->
<view class='msg_right'>
<!-- <view class='msg_right_name'>
{{msg_data.nicename}}
</view> -->
<view class='msg_right_text'>
<text>{{item.input_value}}</text>
</view>
<view class='gap'>
</view>
</view>
</view>
</block>
js: 默認(rèn)展示歷史評論,評論后也刷新頁面,連帶此次評論內(nèi)容一起展示。
var bindblur ;
Page({
bindblur:function(e){
console.log('1111111:', e.detail.value)
bindblur = e.detail.value;
},
onLoad: function (a) {
var that = this;
actid = a.id;
// 查詢評論fetch
wx.request({
url: 'https://m.yishushe.net/addons/up_text.php',
method: 'POST',
header: {
'content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
data: {
act_id: actid
},
success: function (result) {
that.setData({
pl_list: result.data.reverse(),
})
},
fail: res => {
wx.showToast({
title: '網(wǎng)絡(luò)不好喲',
image: '/image/wrong.png',
duration: 3000
})
}
})
},
btn_send: function () {
var that = this
//添加評論
console.log('文章id:act_id :', actid);
console.log('用戶緩存id:user_id :', user_id);
console.log('文本輸入框: input_value :', bindblur);
wx.request({
url: 'https://m.yishushe.net/addons/up_text.php',
method: 'POST',
header: {
'content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
data: {
act_id: actid,
user_id: user_id,
input_value: bindblur
},
success: function (result) {
that.setData({
pl_list: result.data.reverse(),
input_value: "",
})
},
fail: res => {
wx.showToast({
title: '網(wǎng)絡(luò)不好喲',
image: '/image/wrong.png',
duration: 3000
})
}
})
}
})
后端php 源碼:
<?php
header("Content-Type:text/html;charset=utf8");
header("Access-Control-Allow-Origin: *"); //解決跨域
header('Access-Control-Allow-Methods:POST');// 響應(yīng)類型
header('Access-Control-Allow-Headers:*'); // 響應(yīng)頭設(shè)置
$link=mysql_connect("localhost","root","root");
mysql_select_db("weiqing", $link); //選擇數(shù)據(jù)庫
mysql_query("SET NAMES utf8");//解決中文亂碼問題
//$username = $_POST['username'];
//$avatarUrl = $_POST['avatarUrl'];
$act_id = $_POST['act_id'];
if($_POST['input_value']){
$user_id = $_POST['user_id'];
$input_value = $_POST['input_value'];
//echo $avatarUrl."----time:". $time."----iv:".$iv."----inputValue:". $inputValue;
//插入數(shù)據(jù)到數(shù)據(jù)庫
$strsql = "insert into pinglun (act_id,user_id,input_value) values('$act_id','$user_id','$input_value')";
//mysql_query() 函數(shù)執(zhí)行一條 MySQL 查詢。SELECT,SHOW,EXPLAIN 或 DESCRIBE 都需要用這個(gè)函數(shù)執(zhí)行
$result = @mysql_query($strsql);
}
$q = "SELECT * FROM pinglun"; //SQL查詢語句 SELECT * FROM 表名
$rs = mysql_query($q); //獲取數(shù)據(jù)集
if(!$rs){die("數(shù)據(jù)庫沒有數(shù)據(jù)!");}
//循環(huán)讀取數(shù)據(jù)并存入數(shù)組對象
$dlogs;$i=0;
while($row=mysql_fetch_array($rs))
{
if($act_id ==$row["act_id"]){
$dlog["act_id"]=$row["act_id"];
$dlog["user_id"]=$row["user_id"];
$dlog["input_value"]=$row["input_value"];
}
//$dlog["avatarUrl"]=$row["avatarUrl"];
//$dlog["username"]=$row["username"];
$dlogs[$i++]=$dlog;
}
//以json格式返回html頁面
echo urldecode(json_encode($dlogs));
?>
如果php返回報(bào)錯(cuò)就找到php-ini 配置文件 ,把
display_errors = On
改為
display_errors = Off
禁止php報(bào)錯(cuò)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)瀑布流圖片效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)瀑布流圖片效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行
又一個(gè)動(dòng)態(tài)控制表格的效果,用JavaScript動(dòng)態(tài)生成表格行、表格列,以及還可動(dòng)態(tài)刪除這些行列,行等,運(yùn)行代碼后,點(diǎn)擊對應(yīng)的功能按鈕,即可實(shí)現(xiàn)對應(yīng)的表格操作功能,接下來通過代碼實(shí)例給大家介紹JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行,需要的朋友參考下2016-02-02
學(xué)習(xí)JavaScript設(shè)計(jì)模式之單例模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的單例模式,對JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01
js匿名函數(shù)的調(diào)用示例(形式多種多樣)
匿名函數(shù)就是沒有實(shí)際名字的函數(shù),javaScript的匿名函數(shù)形式多樣,下面就一一為大家羅列出來2014-08-08
JavaScript實(shí)現(xiàn)圓形進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圓形進(jìn)度條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
JavaScript reduce和reduceRight詳解
這篇文章主要介紹了JavaScript reduce和reduceRight的高級用法詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
Bootstrap select下拉聯(lián)動(dòng)(jQuery cxselect)
這篇文章主要為大家詳細(xì)介紹了Bootstrap select下拉聯(lián)動(dòng),JQuery插件之cxselect,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
如何利用moment處理時(shí)間戳并計(jì)算時(shí)間的差值
前端很多場景都會(huì)涉及到對時(shí)間的處理,我所用得最多的庫是moment,下面這篇文章主要給大家介紹了關(guān)于如何利用moment處理時(shí)間戳并計(jì)算時(shí)間的差值的相關(guān)資料,需要的朋友可以參考下2022-04-04

