网页编写-富文本编辑器
网页编写-富文本编辑器
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 += '' + '';
//"id","author","title","content_type","read_num","input_time"
html += '作者 ';
html += '标题 ';
html += '文章类型 ';
html += '阅读量 ';
html += '上传时间 ';
html += ' ';
for(var i = 0;i < data.data.length;i++){
html += '';
html += '"'+ data.data[i][1] +'" ';
html += '+ data.data[i][0] +'">'+ data.data[i][2] +' ';
html += '"'+ data.data[i][3] +'" ';
html += '"'+ data.data[i][4] +'" ';
html += '"'+ data.data[i][5] +'" ';
html += ' ';
}
html += '
';
$("#listnews").html(html);
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert(typeof(errorThrown));
}
});
}
script>
注释
后台数据库名为t_news、t_contenttype
servlet类为getNewList、getContentType
html文件为insert、listnews