[关闭]
@liayun 2016-05-13T06:56:18.000000Z 字数 2430 阅读 1361

知问前端--Ajax提问

知问前端


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

Ajax提问

创建一个数据表:question,分别建立:idtitlecontentuserdate等字段。
question表的结构如下:
question表
然后创建一个PHP文件,add_content.php,即新增提问代码:

  1. <?php
  2. /*
  3. 知乎:
  4. 标题,描述(可选)
  5. 首页上出现标题和回答中最热门的部分
  6. 评论
  7. */
  8. /*
  9. 我的知问:
  10. 标题,描述(可选)
  11. 评论(用评论代替回答)
  12. */
  13. sleep(1);
  14. require 'config.php';
  15. $query = "INSERT INTO question (title, content, user, date) VALUES ('{$_POST['title']}', '{$_POST['content']}', '{$_POST['user']}', NOW())";
  16. mysql_query($query) or die('新增失败!'.mysql_error());
  17. echo mysql_affected_rows();
  18. mysql_close();
  19. ?>

HTML提问部分:

  1. <form id="question" title="提问">
  2. <p>
  3. <label for="title">问题名称:</label>
  4. <input type="text" name="title" style="width: 390px;" class="text" id="title"></input>
  5. </p>
  6. <p>
  7. <textarea class="uEditorCustom" name="content">请输入问题描述!</textarea>
  8. </p>
  9. </form>

jQuery代码部分:

  1. $("#question").dialog({
  2. autoOpen:false,
  3. modal:true,
  4. resizable:false,
  5. width:500,
  6. height:360,
  7. buttons:{
  8. '发布':function() {
  9. //提交
  10. $(this).ajaxSubmit({
  11. url : "add_content.php",
  12. type : "post",
  13. data : {
  14. user : $.cookie("user"),
  15. content : $(".uEditorIframe").contents().find("#iframeBody").html() //替换掉原来要提交的content
  16. },
  17. beforeSubmit:function(formData,jqForm,options) {
  18. $("#loading").dialog("open");
  19. $("#question").dialog("widget").find("button").eq(1).button("disable"); //禁用发布按钮
  20. },
  21. success:function(responseText,statusText) {
  22. //alert(responseText); //新增成功,返回1
  23. if(responseText) {
  24. $("#question").dialog("widget").find("button").eq(1).button("enable");
  25. $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("数据新增成功...");
  26. setTimeout(function() {
  27. $("#loading").dialog("close");
  28. $("#question").dialog("close");
  29. $("#question").resetForm(); //重置表单
  30. $(".uEditorIframe").contents().find("#iframeBody").html("请输入问题描述!");
  31. $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("数据交互中...");
  32. }, 1000);
  33. }
  34. }
  35. });
  36. }
  37. }
  38. });
  39. $('.uEditorCustom').uEditor();

以上jQuery代码书写时,会遇到的问题:
问题一:
在提交id='question'表单时,name='content'控件输入的问题描述,提交到数据库中的会始终是请输入问题描述!
解决办法:右击->查看元素,会发现id='question'的表单变为:
question_form表单
那么怎样才能得到name='content'控件输入的问题描述呢???

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

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

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

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

  1. $(".uEditorIframe").contents().find("#iframeBody").html("请输入问题描述!");
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注