网页编写-富文本编辑器

最新推荐文章于 2024-06-07 19:23:27 发布

tazi11

最新推荐文章于 2024-06-07 19:23:27 发布

阅读量311

点赞数

分类专栏：富文本编辑器

本文链接：https://blog.csdn.net/tazi11/article/details/107927315

版权

富文本编辑器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网页编写-富文本编辑器

1.获取前端作者、标题、文章内容，导入数据库`

<body>
	作者：<input id="author" type="text" />
	标题：<input id="title" type="text" />
	文章类型：
	<select id="act_type">
	
	</select>
	<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
	<input id="submit" type="button" value="提交" onclick="subcontent()"/>
</body>
	<script>
		var ue = UE.getEditor('editor');
		function subcontent(){
			var url = "http://localhost:8080/NewServlet/getContentType";
			var data = {
					"author":$("#author").val(),
   		        	"title":$("#title").val(),
   		        	"authortype":$("#act_type").val(),
		        	"content":ue.getContent()
		        };
			 $.ajax({
			        type: "get",
			        url: url,
//			      data: "para="+para,  此处data可以为 a=1&b=2类型的字符串 或 json数据。
					headers:{},
			        data: data,
			        cache: false,
			        async : false,
			      //  dataType: "JSON",
			        success: function (data,textStatus, jqXHR)
			        {
			        	if(data.data == 1){
			        		alert("插入成功");
			        	}else{
			        		alert("插入失败");
			        	}
			        },
			        error:function (XMLHttpRequest, textStatus, errorThrown) {      
				           
			            alert(typeof(errorThrown));
			        }
			     });
			}

2.后端插入作者、标题、文章内容

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		response.setContentType("text/json;charset=utf-8");
		response.setCharacterEncoding("utf-8");
		String insert = "insert into t_news (title,content,author_id,input_time,grade_time,content_type,isdelete,read_num)"
					+ "values ('"+ request.getParameter("title") +"','"+ request.getParameter("content") +"','"+ request.getParameter("author") +"',"
							+ "'2020-08-10',"+ System.currentTimeMillis() +",'"+ request.getParameter("authortype") +"','0',0);";
		int a = MysqlUtil.add(insert);
		String data = "";
		if(a == 1) {
			data = "{\"data\":1}";
		}else {
			data = "{\"data\":0}";
		}
		response.getWriter().append(data);
	}

3.后端获取文章作者、标题、内容

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		response.setContentType("text/json;charset=utf-8");
		response.setCharacterEncoding("utf-8");
	      String sql = "select t1.id,t1.author_id,t1.title,t1.input_time,t1.read_num,t2.content_type as content_type "
					+ "from t_news t1 left join t_contenttype t2 on t1.content_type = t2.id order by t1.id desc;";
		String json = MysqlUtil.getJsonBySql(sql, new String[] {"id","author_id","title","content_type","read_num","input_time"});
		response.getWriter().append(json);
	}

前端显示数据库内容

<body>
	<div id="listnews" style="width:60%;margin-left:20%;background-color:red"></div>
</body>

<script>
	listnews();
	function listnews(){
		var url = "http://localhost:8080/NewServlet/getNewList";
		 $.ajax({
		        type: "get",
		        url: url,
	//	      data: "para="+para,  此处data可以为 a=1&b=2类型的字符串 或 json数据。
				headers:{},
		        data: {},
		        cache: false,
		        async : false,
		      //  dataType: "JSON",
		        success: function (data,textStatus, jqXHR)
		        {
		        	var html = "";
		        	html += '<table>' + '<tr>';
		        	//"id","author","title","content_type","read_num","input_time"
		        	html += '<td>作者</td>';
		        	html += '<td>标题</td>';
		        	html += '<td>文章类型</td>';
		        	html += '<td>阅读量</td>';
		        	html += '<td>上传时间</td>';
		        	html += '</tr>';
		        	for(var i = 0;i < data.data.length;i++){
		        		html += '<tr>';
		        		html += '<td>"'+ data.data[i][1] +'"</td>';
		        		html += '<td><a href="text.html?acticleid='+ data.data[i][0] +'">'+ data.data[i][2] +'</a></td>';
		        		html += '<td>"'+ data.data[i][3] +'"</td>';
		        		html += '<td>"'+ data.data[i][4] +'"</td>';
		        		html += '<td>"'+ data.data[i][5] +'"</td>';
		        		html += '</tr>';
		        	}
		        	html += '</table>';
		        	$("#listnews").html(html);
		        },
		        error:function (XMLHttpRequest, textStatus, errorThrown) {      
			           
		            alert(typeof(errorThrown));
		        }
		     });
		} 
		
</script>

注释
后台数据库名为t_news、t_contenttype
servlet类为getNewList、getContentType
html文件为insert、listnews

tazi11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页编写-富文本编辑器

网页编写-富文本编辑器1.获取前端作者、标题、文章内容，导入数据库`<body> 作者：<input id="author" type="text" /> 标题：<input id="title" type="text" /> 文章类型： <select id="act_type"> </select> <script id="editor" type="text/plain" style="width:1024px;he
复制链接

扫一扫