PHP + MySQL + jQuery 實現微博發布功能（前端篇）

功能簡介

實現類似微博的發布介面：即時統計剩餘字數、AJAX 無刷新送出、前端驗證與提示。本文著重於 jQuery 前端交互實作。

介面結構（XHTML）

<form id="myform" action="" method="post">
  <h3><span class="counter">140</span>說說你正在做什麼...</h3>
  <textarea name="saytxt" id="saytxt" class="input" rows="2" cols="40"></textarea>
  <p>
    <input type="image" src="images/btn.gif" class="sub_btn" alt="發布" />
    <span id="msg"></span>
  </p>
</form>
<div class="clear"></div>
<div id="saywrap">
  <div class="saylist">
    <a href="#"><img src="images/user.gif" alt="" /></a>
    <div class="saytxt">
      <p><strong><a href="#">Demo</a></strong>發布的內容...</p>
      <div class="date"></div>
    </div>
    <div class="clear"></div>
  </div>
</div>

樣式（CSS）

h3 { height: 32px; line-height: 32px; font-size: 18px; }
h3 span { float: right; font-size: 32px; font-family: Georgia, serif; color: #ccc; overflow: hidden; }
.input { width: 594px; height: 58px; margin: 5px 0 10px 0; padding: 4px 2px; border: 1px solid #aaa; font-size: 12px; line-height: 18px; overflow: hidden; }
.sub_btn { float: right; width: 94px; height: 28px; }
#msg { color: #f30; }
.clear { clear: both; }
.saylist { margin: 8px auto; padding: 4px 0; border-bottom: 1px dotted #d3d3d3; }
.saylist img { float: left; width: 50px; margin: 4px; }
.saytxt { float: right; width: 530px; overflow: hidden; }
.saytxt p { line-height: 18px; }
.saytxt p strong { margin-right: 6px; }
.date { color: #999; }

jQuery 核心邏輯 (global.js)

1. 字數統計與顏色變化

function recount() {
    var maxlen = 140;
    var current = maxlen - $('#saytxt').val().length;
    $('.counter').html(current);

    if (current < 1 || current > maxlen) {
        $('.counter').css('color', '#D40D12');
        $('input.sub_btn').attr('disabled', 'disabled');
    } else {
        $('input.sub_btn').removeAttr('disabled');
    }

    if (current < 10) $('.counter').css('color', '#D40D12');
    else if (current < 20) $('.counter').css('color', '#5C0002');
    else $('.counter').css('color', '#cccccc');
}

2. 綁定事件與 AJAX 提交

$(function(){
    // 即時統計
    $('#saytxt').bind("blur focus keydown keypress keyup", function(){
        recount();
    });

    // 表單提交
    $("#myform").submit(function(){
        var saytxt = $("#saytxt").val();
        if (saytxt == "") {
            $("#msg").show().html("你總得說點什麼吧.").fadeOut(2000);
            return false;
        }

        // 顯示載入中
        $('.counter').html('<img style="padding:8px" src="images/load.gif" alt="正在處理..." />');

        $.ajax({
            type: "POST",
            url: "submit.php",
            data: "saytxt=" + saytxt,
            dataType: "html",
            success: function(msg){
                if (parseInt(msg) != 0) {
                    $('#saywrap').prepend(msg); // 新增至列表最前
                    $('#saytxt').val('');
                    recount();
                } else {
                    $("#msg").show().html("系統錯誤.").fadeOut(2000);
                }
            }
        });
        return false; // 防止表單預設提交
    });
});

後續處理

後端 submit.php 處理資料寫入並回傳 HTML 片段，將於下一篇文章詳細說明。