zoukankan      html  css  js  c++  java
  • php jquery ajax无刷新评论 无刷新翻页,字数统计 绝对可以用

    无刷新翻页
    无刷新评论
    字数限制
    提交时间限制
    http://www.corange.cn//uploadfiles/12151_75475.jpg

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="comment-style.css" media="screen" />
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

    <script type="text/javascript">


    var loaderImage = new Image();
    loaderImage.src = 'images/loader.gif';

    $(document).ready(function(){
    var messageArea = $('textarea#message');
    messageArea.val('Leave your message here...').css('color', '#666666');
    $('div#content').load('show_main2.php');
    messageArea.click(function (){
    $(this).val('').css('color', '#000000');
    $(this).unbind('click').click(function(){
    return false;
    });
    });

    $('input#submit-comment').click(function(){
    // Store vars
    var message = messageArea.hide().val();
    // Validation
    if(message.length < 1 || message == "Leave your message here..."){
    messageArea.fadeOut('slow', function(){
    var errorMessage = 'Oops! You haven&#8217;t typed anything. Please have another go...';
    var error = $('<div id="too-short"><span class="error">' + errorMessage + '</span></div>').insertBefore($(this));
    error.hide().fadeIn('slow', function(){
    setTimeout(function(){
    error.hide();
    messageArea.fadeIn('slow');
    }, 2000);
    });
    });
    return false;
    }

    var dataString = 'message='+ message;


    // Show loader
    var loader = $('<div id="loader"><img class="load-gif" src="' + loaderImage.src + '" /></div>').insertBefore($(this));

    //alert (dataString);
    $.ajax({
    type: "POST",
    url: "submitComment.php",
    data: dataString,
    success: function(data) {
    $('div#loader').find('img.load-gif').remove();
    $('div#loader').append('<span class="success">Thanks for your comment!</span>');
    //$('div#content').hide();
    $('div#content').load('show_main2.php'); //如果不需要审核,就加入这一行会重新载入刚刚添加的
    $('div#loader').hide().fadeIn('slow');
    $('span.limit').remove();
    $('div#comments').prepend(data);
    $('div#comments div.comment-unapproved:nth-child(1)').hide().slideDown('slow');
    $('input#submit-comment').unbind('click').click(function(){
    return false;
    });
    }
    });
    return false;
    });
    messageArea.keyup(function(){
    var limit = 140;
    var currentLength = $(this).val().length;
    var charsLeft = limit - currentLength;
    $('span.limit').html(charsLeft);
    if(currentLength >= limit){
    $(this).val($(this).val().substring(0, limit));
    $('span.limit').html('0');
    var textarea = document.getElementById('message');
    textarea.scrollTop = textarea.scrollHeight + 9999;
    }
    });
    });
    </script>
    </head>

    <body onLoad="viewpage(1)">

    <div id="container">
    <div id="content">
    </div>
    <div id="submission">
    <form name="comment-submission">
    <textarea id="message" name="message"></textarea>
    <span class="limit">140</span>
    <input type="submit" id="submit-comment" value=" " />
    </form>
    <div class="clear"></div>
    </div>
    </div>

    </body>
    </html>
    完整文件打包下载
    http://www.corange.cn//uploadfiles/old_ajaxpage_78076.rar
    数据库结构
    CREATE TABLE `shoutbox` (
    `id` int(11) NOT NULL auto_increment,
    `content` varchar(255) NOT NULL default '',
    `date` datetime NOT NULL default '0000-00-00 00:00:00',
    `classid` int(11) NOT NULL,
    PRIMARY KEY (`id`)
    ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

    原文地址:http://www.corange.cn/archives/2010/12/3752.html
  • 相关阅读:
    Idea导入tomcat源码
    SpringBoot学习 (一) Eclipse中创建新的SpringBoot项目
    Zookeeper客户端Curator使用详解
    解决老是提示找不到Mapper文件无法执行定义的方法问题!
    人工智能、机器学习、深度学习三者之间的关系
    java5增加对https的支持
    Spring静态注入的三种方式
    Thrift入门及Java实例演示【转】
    activeMQ 学习
    python中 import 和from ... import 的区别
  • 原文地址:https://www.cnblogs.com/zerogo/p/1907205.html
Copyright © 2011-2022 走看看