知问前端--Ajax提问

知问前端

本文阐述的主要是创建一个问题表，将提问数据通过ajax方式提交出去。然后对内容显示进行布局，实现内容部分隐藏和完整显示的功能。

Ajax提问

创建一个数据表：question，分别建立：id、title、content、user、date等字段。
question表的结构如下：

然后创建一个PHP文件，add_content.php，即新增提问代码：

<?php
    /*
    知乎：
    标题，描述(可选)
    首页上出现标题和回答中最热门的部分
    评论
    */
    /*
    我的知问：
    标题，描述(可选)
    评论(用评论代替回答)
    */
    sleep(1);
    require 'config.php';
    $query = "INSERT INTO question (title, content, user, date) VALUES ('{$_POST['title']}', '{$_POST['content']}', '{$_POST['user']}', NOW())";
    mysql_query($query) or die('新增失败！'.mysql_error());
    echo mysql_affected_rows();
    mysql_close();
?>

HTML提问部分：

<form id="question" title="提问">
    <p>
        <label for="title">问题名称：</label>
        <input type="text" name="title" style="width: 390px;" class="text" id="title"></input>
    </p>
    <p>
        <textarea class="uEditorCustom" name="content">请输入问题描述！</textarea>
    </p>
</form>

jQuery代码部分：

$("#question").dialog({
    autoOpen:false,
    modal:true,
    resizable:false,
    width:500,
    height:360,
    buttons:{
        '发布':function() {
            //提交
            $(this).ajaxSubmit({
                url : "add_content.php",
                type : "post",
                data : {
                    user : $.cookie("user"),
                    content : $(".uEditorIframe").contents().find("#iframeBody").html() //替换掉原来要提交的content
                },
                beforeSubmit:function(formData,jqForm,options) {
                    $("#loading").dialog("open");
                    $("#question").dialog("widget").find("button").eq(1).button("disable"); //禁用发布按钮
                },
                success:function(responseText,statusText) { 
                    //alert(responseText); //新增成功，返回1
                    if(responseText) {
                        $("#question").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");
                            $("#question").dialog("close");
                            $("#question").resetForm(); //重置表单
                            $(".uEditorIframe").contents().find("#iframeBody").html("请输入问题描述！");
                            $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中...");
                        }, 1000);
                    }
                }
            });
        }
    }
});
$('.uEditorCustom').uEditor();

以上jQuery代码书写时，会遇到的问题：
问题一：
在提交id='question'表单时，name='content'控件输入的问题描述，提交到数据库中的会始终是请输入问题描述！。
解决办法：右击->查看元素，会发现id='question'的表单变为：

那么怎样才能得到name='content'控件输入的问题描述呢？？？

1. alert($("textarea").val());发现得到undefined，不可取。
2. alert($("input[name=content]").val());得到的会始终是请输入问题描述！，请看上述表单。
3. alert($(".uEditorIframe").find("#iframeBody").html());，思路正确，但语法错误，所以仍得到的是undefined。

综上所述，得到name='content'控件输入的问题描述内容的方法为：

alert($(".uEditorIframe").contents().find("#iframeBody").html());

注意：以上代码均在$('.uEditorCustom').uEditor();下，在其上，得到仍是undefined。
问题二：
提交id='question'表单后，虽然有重置表单的代码$("#question").resetForm();，但会发现无卵用，怎么破呢？？？
解决办法：添加如下代码：

$(".uEditorIframe").contents().find("#iframeBody").html("请输入问题描述！");