个人博客—发表博文

个人博客—发表博文

• 点击头部发文按钮，弹出发文dialog

发表博文

• 输入博文标题，ajax验证文章标题是否存在数据库中

文章标题已存在

文章标题输入验证通过

• 点击发布按钮，发布成功后一秒隐藏dialog

数据交互中

文章发布成功

html部分

<!-- 发文弹窗 -->
<form id="issue" title="发表博文">
  <ol class="issue_error"></ol>
  <p>
    <label for="issue_title">文章标题：</label>
    <input type="text" name="issue_title" style="width:360px;" id="issue_title"  placeholder="请输入文章標題！"/>
    <span class="star">*</span>
  </p>
  <p>
    <textarea class="issue_content" name="issue_content" placeholder="请输入文章内容！"></textarea>
  </p>
</form>
<!-- 发文弹窗 -->

js部分

    // 头部发文按钮点击事件,检查是否登陆
    // 未登录则提示error对话框,1秒后隐藏error对话框并显示登陆对话框
    // 已登录则显示发文对话框
    $('#header .issuebtn').on("click",function () {
        if ($.cookie('user')) {
            $('#issue').dialog('open');
        } else {
            $('#error').dialog('open');
            setTimeout(function () {
                $('#error').dialog('close');
                $('#login').dialog('open');
            }, 1000);
        }
    });
    // 发文表单
    $('#issue').dialog({
        autoOpen : false,
        modal : true,
        resizable : false,
        width : 500,
        height : 360,
        buttons : {
            '发布' : function () {
                issue_submit_fuc();
            }
        }
    }).validate({
        showErrors : function (errorMap, errorList) {
            var errors = this.numberOfInvalids();           
            if (errors > 0) {
                $('#issue').dialog('option', 'height', errors * 20 + 360);
            } else {
                $('#issue').dialog('option', 'height', 360);
            }           
            this.defaultShowErrors();
        },      
        highlight : function (element, errorClass) {
            $(element).css('border', '1px solid red');
            $(element).parent().find('span').html('*').removeClass('succ');
        },      
        unhighlight : function (element, errorClass) {
            $(element).css('border', '1px solid #ccc');
            $(element).parent().find('span').html(' ').addClass('succ');
        },  
        errorLabelContainer : 'ol.issue_error',
        wrapper : 'li',
        rules : {
            issue_title : {
                required : true,
                minlength : 2,
                remote : {
                    url : 'php/has_issue.php',
                    type : 'POST',
                },
            },
            issue_content : {
                required : true,
                minlength : 6,              
            },
        },
        messages : {
            issue_title : {
                required : '文章标题不得为空！',
                minlength : jQuery.format('文章标题不得小于{0}位！'),
                remote : '文章标题已存在！',
            },
            issue_content : {
                required : '文章内容不得为空！',
                minlength : jQuery.format('文章内容不得小于{0}位！'),             
            }
        }
    });
    function issue_submit_fuc(){
        $(this).ajaxSubmit({
            url : 'php/add_issue.php',
            type : 'POST',
            data : {
                user : $.cookie('user'),
                issue_title : $("#issue_title").val(),
                issue_content : $('#issue .issue_content').val(),
            },
            beforeSubmit : function (formData, jqForm, options) {
                $('#loading').dialog('open');
                $('#issue').dialog('widget').find('button').eq(1).button('disable');
            },
            success : function (responseText, statusText) {
                if (responseText) {
                    $('#issue').dialog('widget').find('button').eq(1).button('enable');
                    $('#loading').css('background', 'url(img/success.gif) no-repeat 20px center').html('发布文章成功...');
                    setTimeout(function () {
                        $('#loading').dialog('close');
                        $('#loading').css('background', 'url(img/loading.gif) no-repeat 20px center').html('数据交互中...');
                        $('#issue').dialog('close');
                        $('#issue').resetForm();
                        $('#issue span.star').html('*').removeClass('succ');
                    }, 1000);
                }
            },
        });
    }

php部分

判断文章标题是否存在

 <?php
require 'config.php';

$query = mysql_query("SELECT title FROM issue WHERE title='{$_POST['issue_title']}'") or die('SQL 错误！');

if (mysql_fetch_array($query, MYSQL_ASSOC)) {
    echo 'false';
} else {
    echo 'true';
}

mysql_close();
?>

发布文章写入数据库

<?php
/*
 文章标题+内容+用户名
 发布成功首页上出现文章标题
*/


sleep(1);
require 'config.php';

$query = "INSERT INTO issue (title, content, user, date) VALUES ('{$_POST['issue_title']}', '{$_POST['issue_content']}', '{$_POST['user']}', NOW())";

mysql_query($query) or die('新增失败！'.mysql_error());

echo mysql_affected_rows();

mysql_close();
?>

代码在Github：个人博客