点击标题进入对应的文章页面

/ 0评 / 0
图一:项目内容截图
图二:这是点击标题后进入的界面,注意浏览器地址输入栏

上面的帖子内容使用ajax从后端获取的,代码如下:

 $.ajax({
        type: "GET",
         url: a,
        dataType: "json",
        success: function (data) {
            console.log(JSON.stringify(data))
            for (var i = 0; i < data.length; i++) {
                var newstop = document.getElementById("news_top");
                var firstdiv = document.createElement("div");
                firstdiv.setAttribute("class", "news_div col-md-12 col-sm-12 col-xs-12");
                var seconddiv = document.createElement("div");
                seconddiv.setAttribute("class", "col-lg-9 col-md-9 col-sm-9 col-xs-12");
                var h3 = document.createElement("h3");
                var a = document.createElement("a");
                a.setAttribute("id", "titlea");
                a.setAttribute("href", "news_show1.html?@="+"标题|"+data[i].postingTitle+"|作者|"+data[i].postAuthor+"|时间|"+data[i].postedTime+"|文章|"+data[i].postingContent);
                var atext = document.createTextNode(data[i].postingTitle);
                a.appendChild(atext);
                h3.appendChild(a);
                newstop.appendChild(firstdiv);
                firstdiv.appendChild(seconddiv);
                seconddiv.appendChild(h3);
                var div3 = document.createElement("div");
                div3.setAttribute("class", "fenlei");
                var div3a = document.createElement("a");
                div3a.setAttribute("href", "news_show1.html?@="+"news_show1.html?@="+"标题"+data[i].postingTitle+"作者"+data[i].postAuthor+"时间"+data[i].postedTime+"文章"+data[i].postingContent)
                var div3atext = document.createTextNode("作者:"+data[i].postAuthor+"时间:"+data[i].postedTime);
                div3a.appendChild(div3atext);
                div3.appendChild(div3a);
                seconddiv.appendChild(div3);
                var p = document.createElement("p");
                var ptext = document.createTextNode(data[i].postingContent);
                p.appendChild(ptext);
                seconddiv.appendChild(p);
            }
        },
        error: function (error) {
            alert("获取失败");
        }
        // });
    })

ajax获取后端数据,js方法将json数据排版好,在url中用?把帖子信息传到图二的链接中,但传过去的是一堆字符串,在地址栏中正常显示,但alert一下中文显示的都是16进制乱码,url传参带中文务必要解码,解码之后显示正常,但还是一堆字符串,要从中取标题和作者等信息,放到html不同的位置里去,查资料后在原先字符串的基础上增加了“|”来分割,然后用split方法把字符串做成数组,代码如下:

var url = decodeURI(decodeURI(window.location.search));//必须解码,不然是%xx的16进制字体乱码;
var result;
if (url.indexOf("@") != -1){
     result = url.substr(url.indexOf("=") + 1);
    var resultarr=result.split("|");
    console.log(resultarr)
    $('#biaoti').text(resultarr[1]);
    $('#zuozhe').text(resultarr[3]);
    $('#shijian').text(resultarr[5]);
    $('#content').text(resultarr[7]);
}
图三:console.log(resultarr)

然后是自动换行,我发现帖子内容是英文不会自动换行,查了一下要这样才行,代码如下:

.qqq p{
	font-size: 16px;
	margin: 0 15% 0 15%!important;
	//英文自动换行
	word-break:break-all;

}

英文自动换行要加个word-break:break-all;这对我的项目有效

参考博文:
https://blog.csdn.net/zqian1994/article/details/78620170 //url传参包含中文

https://www.jianshu.com/p/d52852681b4b//js截取字符串常用方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注