jquery ajax发帖-仿知乎个人网站fourask（二）

最新推荐文章于 2022-03-27 21:58:59 发布

qddhwu

最新推荐文章于 2022-03-27 21:58:59 发布

阅读量588

点赞数

分类专栏： jquery 文章标签：文本编辑前端 jquery ajax MYSQL jsp

本文链接：https://blog.csdn.net/qddhwu/article/details/53103257

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用富文本编辑器UEDITOR结合jQuery AJAX实现帖子的发布功能，通过JSP与MYSQL数据库进行交互。首先，下载并配置UEDITOR，然后在JSP中设置路径，最后展示编辑器的使用界面。

摘要由CSDN通过智能技术生成

（1）使用富文本编辑器UEDITOR实现帖子的发布和提交

UEDITOR下载地址： http://ueditor.baidu.com/website/download.html

选择 UTF8-JSP版本

第一步：下载后引入JS，解压后将jsp/lib文件夹内所有JAR包放入WEB-INF文件夹lib内，并build path

第二步：打开项目内的ueditor.congig.js文件，配置路径（你的路径）

HTML代码

<form id="question" method="post" title="提问"> 
<p> 
   <label for="user">问题名称：</label> 
   <input type="text" name="title" class="text" style="width:800px" id="title"/>
   <span class="star">*</span>
</p>
<p> <textarea class="uEditorCustom" name="content" id="myEditor" style="width:800px;height:270px">请填写问题描述！</textarea></p>
</form>

JQuery代码

	$('#question_button').click(function(){ 
		  if($.cookie('username')){ 
		   $('#question').dialog('open');}
		  else{ $('#error').dialog('open');
		        setTimeout(function(){ 
		          $('#error').dialog('close');
		          $('#login').dialog('open');},1000);}
		   });	
	
	$('#question').dialog({ 
		  autoOpen:false,
		  modal:true,
		  resizable:false,
		  width:850,
		  height:620,
		  buttons:{ 
		    '发布':function(){ 
		    	$(this).ajaxSubmit({ 
		    		  url:'add.jsp',
		    		  data:{ 
		    			  user: $.cookie('username'), 
		    		  }, 
		    		  beforeSubmit:function(formData,jqForm,options){ 
		    		        $('#loading').dialog('open'); 
		    		        }, 
		    		  success:function(responseText,statusText){ 
		    		     if(responseText){ 
		    		        $('#loading').css('background','url(imag/success.png)no-repeat 20px center').html('提问成功发布'); 
		    		        setTimeout(function(){ 
			    		       $('#loading').css('background','url(imag/loading.gif) no-repeat 20px center').html('发布提问中...');
		    		           $('#loading').dialog('close');
		    		           $('#question').dialog('close');
		    		           $('#question').resetForm(); 
                                },1000);}},});
		    }
	}});

JSP代码（MYSQL数据库）

    <%@ page language="java" import="java.util.*,java.io.*,java.util.Date" %>
    <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
    <%@ page import ="java.sql.*,java.text.*" %>
    <%@ page import="com.mysql.jdbc.Driver" %>
<%  
   request.setCharacterEncoding("UTF-8");  
   response.setCharacterEncoding("UTF-8");  
   response.setContentType("text/html; charset=utf-8");  
%>  
<html> 
<head> 
<title>add content into table </TITLE> 
</head> 
<body> 
<% 
String title=request.getParameter("title"); //从表单获得 
String content=request.getParameter("content"); //从表单获得 
String user=request.getParameter("user"); //从表单获得 
Date date=new Date();
DateFormat format=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String time=format.format(date);

try 
{ 
/** 连接数据库参数 **/ 
String driverName = "com.mysql.jdbc.Driver"; //驱动名称 
String DBUser = "root"; //mysql用户名 
String DBPasswd = ""; //mysql密码 
String DBName = "zhiwen"; //数据库名 

String connUrl = "jdbc:mysql://localhost/" + DBName + "?user=" + DBUser + "&password=" + DBPasswd + "&useUnicode=true&characterEncoding=UTF-8"; 
Class.forName(driverName).newInstance(); 
Connection conn = DriverManager.getConnection(connUrl); 
Statement stmt = conn.createStatement(); 
String insert_sql = "insert into question(title,content,user,date) values('"+title+"','"+content+"','"+user+"','"+time+"')"; 
String query_sql = "select * from question"; 

try { 
stmt.execute(insert_sql); 
}catch(Exception e) { 
e.printStackTrace(); 
} 
try { 
ResultSet rs = stmt.executeQuery(query_sql); 
while(rs.next()) { 
%> 
title：<%=rs.getString("title")%> </br> 
content：<%=rs.getString("content")%> </br> 
user：<%=rs.getString("user")%> </br> 
time：<%=rs.getString("date")%> </br> 
<% 
} 
}catch(Exception e) { 
e.printStackTrace(); 
} 
//rs.close(); 
stmt.close(); 
conn.close(); 
}catch (Exception e) { 
e.printStackTrace(); 
} 
%> 
</body> 
</html>

编辑器界面如下图所示

qddhwu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery ajax发帖-仿知乎个人网站fourask（二）

（1）使用富文本编辑器UEDITOR实现帖子的发布和提交UEDITOR下载地址： http://ueditor.baidu.com/website/download.html选择 UTF8-JSP版本第一步：下载后引入JS，解压后将jsp/lib文件夹内所有JAR包放入WEB-INF文件夹lib内，并build path第二步：打开项目内的ueditor.cong
复制链接

扫一扫

专栏目录