• 高清:里约奥运会奖牌曝光 大部分由再生材料制成 2019-06-27
  • 在楼主大谈共产主义分配的时候,希望楼主先说明一下对马克思关于共产主义基本原则的理解。一个社会如果仍然存在“按劳动分配”,怎么会是“每一个个人的全面而自由的发展” 2019-06-25
  • 河北法院:打造互联网+诉非衔接的人民法庭工作新机制 2019-06-25
  • 芯片是汽车产业发展的基石  专家呼吁建立"汽车芯片智库" 2019-06-13
  • “高深文学创作回顾研讨会”在北京举行 2019-06-13
  • 江苏专项督查基础教育问题 择校热、大班额成重点 2019-06-08
  • 14599元!索尼A7M3发布:续航翻番、支持4K视频 2019-06-08
  • 首页 春城壹网 七彩云南 一网天下 2019-05-22
  • QFII政策调整引增量资金入场 “成长+大消费”或成布局重点 2019-05-22
  • 密印“农禅”:何以在蛮荒之地举起文明火把(图) 2019-05-18
  • 20180531 袁隆平:海水稻打破纪录,杂交稻走向全球 2019-05-17
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-15
  • 法国装置艺术家将一部老旧房车改造成移动游泳池 2019-05-13
  • 习近平致信祝贺人民日报创刊70周年 2019-05-10
  • 诗经讲演录:男子如何从好色转为好德? 2019-05-10
  • 欢迎访问

    云南11选5前三直选走势图:云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

    DING HAO COLUMN 鼎浩专栏

    鼎浩的一些分享
    Sharing from Ding Hao

    使用jQuery结合PHP和MySQL读取和发表评论

    来源:云南11选五走势图500期     2013年07月02日17:02
    字号:T|T

    云南11选五走势图500期 www.a-mcl.com 我曾写了一篇关于发表类似微博程序的文章:PHP+Mysql+jQuery实现发布微博程序--jQuery篇,而本文不同之处在于使用JSON读取评论列表,请看我一一讲述。

    查看演示DEMO 下载源码

    XHTML

    读取评论

    发表评论

    昵称:


    评论内容:



    HTML结构主要由读取评论列表和发表评论的表单。

    CSS

    h3{font-size:14px}
    #comments{margin:10px auto}
    #post{margin-top:10px}
    #comments p,#post p{line-height:30px}
    #comments p span{margin:4px; color:#999}
    #message{position:relative; display:none; margin-top:-100px; margin-left:30px; 
    background:#369; color:#fff; z-index:1001}

    用CSS控制页面外观,注意其中#message用来控制发表评论成功后的提示信息的样式。

    jQuery

    首先来看读取评论列表功能,当页面加载的时候,使用getJSON方法读取服务端PHP生成的JSON数据,展示给用户。

    $(function(){
    	var comments = $("#comments");
    	$.getJSON("server.php",function(json){
    		$.each(json,function(index,array){
    			var txt = "
    

    "+array["user"]+":"+array["comment"]+"" +array["addtime"]+"

    "; comments.append(txt); }); }); });

    可以看出,需要通过$.each循环,读取JSON数据,因为生成的JSON数据有多条评论。当然你也可以使用for循环,但我更倾向于使用jQuery的$.each循环。

    再来看下发表评论功能的前端代码。

    $("#add").click(function(){
    	var user = $("#user").val();
    	var txt = $("#txt").val();
    	$.ajax({
             type: "POST",
             url: "comment.php",
             data: "user="+user+"&txt="+txt,
             success: function(msg){
    			if(msg==1){
    			    var str = "
    

    "+user+":"+txt+"刚刚

    "; comments.append(str); $("#message").show().html("发表成功!").fadeOut(1000); $("#txt").attr("value",""); }else{ $("#message").show().html(msg).fadeOut(1000); } } }); });

    当输入昵称和评论内容后,点击提交,通过Ajax向后台comment.php程序发送请求,PHP对请求作出相应,并将数据插入数据库,成功后返回结果给前台。

    PHP

    先来看PHP读取和生成JSON数据的server.php代码。

    //连接数据库
    include_once("connect.php");
    
    $q=mysql_query("select * from comments");
    while($row=mysql_fetch_array($q)){
    		$comments[] = array("id"=>$row[id],"user"=>$row[user],"comment"=>$row[comment],
    "addtime"=>$row[addtime]);
    }
    echo json_encode($comments);

    注意你的PHP版本应该是5.2以上才能使用json_encode函数。

    再来看下发表评论的comment.php代码。

    include_once("connect.php");
    
    $user = htmlspecialchars(trim($_POST['user']));
    $txt = htmlspecialchars(trim($_POST['txt']));
    if(empty($user)){
       echo "昵称不能为空!";
       exit;
    }
    if(empty($txt)){
       echo "评论内容不能为空!";
       exit;
    }
    $time = date("Y-m-d H:i:s");
    $query=mysql_query("insert into comments(user,comment,addtime)values('$user','$txt','$time')");
    if($query)  echo "1";

    comment.php接收前台ajax提交过来的昵称和评论内容参数,判断参数的合法性,然后将数据插入到数据库中,如果成功,则输出1,返回给前台jQuery处理。

    本例使用简单容易的代码诠释了轻量、高效的jQuery结合PHP的ajax运作机制,当然这只是一个基础的例子,jQuery还能做很多事情,留给大家去尽情发挥吧。最后,奉上数据库表结构:

    CREATE TABLE `comments` (
      `id` int(11) NOT NULL auto_increment,
      `user` varchar(30) NOT NULL,
      `comment` varchar(200) NOT NULL,
      `addtime` datetime NOT NULL,
      PRIMARY KEY  (`id`)
    ) ENGINE=MyISAM;
    客服中心
    点击进行在线咨询

    QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

    咨询热线:0871-63399840

    客服热线:0871-63523332

    客服中心 客服中心
  • 高清:里约奥运会奖牌曝光 大部分由再生材料制成 2019-06-27
  • 在楼主大谈共产主义分配的时候,希望楼主先说明一下对马克思关于共产主义基本原则的理解。一个社会如果仍然存在“按劳动分配”,怎么会是“每一个个人的全面而自由的发展” 2019-06-25
  • 河北法院:打造互联网+诉非衔接的人民法庭工作新机制 2019-06-25
  • 芯片是汽车产业发展的基石  专家呼吁建立"汽车芯片智库" 2019-06-13
  • “高深文学创作回顾研讨会”在北京举行 2019-06-13
  • 江苏专项督查基础教育问题 择校热、大班额成重点 2019-06-08
  • 14599元!索尼A7M3发布:续航翻番、支持4K视频 2019-06-08
  • 首页 春城壹网 七彩云南 一网天下 2019-05-22
  • QFII政策调整引增量资金入场 “成长+大消费”或成布局重点 2019-05-22
  • 密印“农禅”:何以在蛮荒之地举起文明火把(图) 2019-05-18
  • 20180531 袁隆平:海水稻打破纪录,杂交稻走向全球 2019-05-17
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-15
  • 法国装置艺术家将一部老旧房车改造成移动游泳池 2019-05-13
  • 习近平致信祝贺人民日报创刊70周年 2019-05-10
  • 诗经讲演录:男子如何从好色转为好德? 2019-05-10
  • 2019年第96期三肖中特 北京时时彩下载最新版下载安装 河北20选5最新开奖结果 重庆百变王牌历史开奖记录查询 湖南快乐十分前三直选遗漏 500彩票网手机 极速飞艇登录网址 娱乐场所经营总结 广西快乐双彩最新开奖时间 077期:平特一肖中平特公式规律平特一肖074期:四字梅花诗 加拿大极速飞艇 北京赛车走势图皇家 河南22选5开奖结果省份 浙江风彩排列三走势图 中国韩国比赛预测