您好,我有一个博客,该博客使用jquery通过ajax请求获取数据。此数据包含带有标题和内容的帖子。内容通过summernote添加,我们将图像和文本放在一起。当我想为每个帖子创建html页面时,可以使用jQuery
<script>
$(document).ready(function () {
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
var id = getUrlParameter('id');
$.ajax({
type: 'GET',
url: 'http:///api/posts/' + id,
dataType: "json",
async: false,
data: {},
success: function (data) {
var posts = data.data;
$.each(posts, function (i) {
var $title = '';
var $content = '';
$.each(posts[i], function (key, val) {
if (key == 'title') {
$title = val;
}
if (key == 'content') {
$content = val;
}
});
var start = $content.indexOf('<img');
var end = $content.indexOf('">') - 1;
var addstyle = $content.indexOf('.jpg') + 2;
var myimage = $content.substr(start, addstyle) + ' ' + 'style="width: 970px;"' + '>';
var $target = $("#target");
$("#doc_title").append($title);
$("#title").append($title);
$("#img").append(myimage);
$("<p> </p>").append($content.substr(end + 3, $content.length - (end + 3))).appendTo($target);
});
}
});
});
</script>
<html>
<head>
</head>
<body>
<div class="container">
<h2 id="title"></h2>
<figure class="post-image" id="img">
</figure>
<div class="post-content" id="target"></div>
</div>
</body>
</html>
我也有用于在社交网络上分享文章的按钮。
<h4>Share this article</h4>
<div class="sharethis-inline-share-buttons st-inline-share-buttons st-left st-has-labels st-animated"
id="st-1">
<div class="st-total st-hidden">
<span class="st-label"></span>
<span class="st-shares">
Shares
</span>
</div>
<div class="st-btn st-first" data-network="facebook" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m21.7 16.7h5v5h-5v11.6h-5v-11.6h-5v-5h5v-2.1c0-2 0.6-4.5 1.8-5.9 1.3-1.3 2.8-2 4.7-2h3.5v5h-3.5c-0.9 0-1.5 0.6-1.5 1.5v3.5z"></path>
</g>
</svg>
<span class="st-label">Share</span>
</div>
<div class="st-btn" data-network="twitter" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m31.5 11.7c1.3-0.8 2.2-2 2.7-3.4-1.4 0.7-2.7 1.2-4 1.4-1.1-1.2-2.6-1.9-4.4-1.9-1.7 0-3.2 0.6-4.4 1.8-1.2 1.2-1.8 2.7-1.8 4.4 0 0.5 0.1 0.9 0.2 1.3-5.1-0.1-9.4-2.3-12.7-6.4-0.6 1-0.9 2.1-0.9 3.1 0 2.2 1 3.9 2.8 5.2-1.1-0.1-2-0.4-2.8-0.8 0 1.5 0.5 2.8 1.4 4 0.9 1.1 2.1 1.8 3.5 2.1-0.5 0.1-1 0.2-1.6 0.2-0.5 0-0.9 0-1.1-0.1 0.4 1.2 1.1 2.3 2.1 3 1.1 0.8 2.3 1.2 3.6 1.3-2.2 1.7-4.7 2.6-7.6 2.6-0.7 0-1.2 0-1.5-0.1 2.8 1.9 6 2.8 9.5 2.8 3.5 0 6.7-0.9 9.4-2.7 2.8-1.8 4.8-4.1 6.1-6.7 1.3-2.6 1.9-5.3 1.9-8.1v-0.8c1.3-0.9 2.3-2 3.1-3.2-1.1 0.5-2.3 0.8-3.5 1z"></path>
</g>
</svg>
<span class="st-label">Tweet</span>
</div>
<div class="st-btn" data-network="pinterest" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m37.3 20q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3q-2.4 0-4.8-0.7 1.3-2 1.7-3.6 0.2-0.8 1.2-4.7 0.5 0.8 1.7 1.5t2.5 0.6q2.7 0 4.8-1.5t3.3-4.2 1.2-6.1q0-2.5-1.4-4.7t-3.8-3.7-5.7-1.4q-2.4 0-4.4 0.7t-3.4 1.7-2.5 2.4-1.5 2.9-0.4 3q0 2.4 0.8 4.1t2.7 2.5q0.6 0.3 0.8-0.5 0.1-0.1 0.2-0.6t0.2-0.7q0.1-0.5-0.3-1-1.1-1.3-1.1-3.3 0-3.4 2.3-5.8t6.1-2.5q3.4 0 5.3 1.9t1.9 4.7q0 3.8-1.6 6.5t-3.9 2.6q-1.3 0-2.2-0.9t-0.5-2.4q0.2-0.8 0.6-2.1t0.7-2.3 0.2-1.6q0-1.2-0.6-1.9t-1.7-0.7q-1.4 0-2.3 1.2t-1 3.2q0 1.6 0.6 2.7l-2.2 9.4q-0.4 1.5-0.3 3.9-4.6-2-7.5-6.3t-2.8-9.4q0-4.7 2.3-8.6t6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z"></path>
</g>
</svg>
<span class="st-label">Pin</span>
</div>
<div class="st-btn st-last" data-network="linkedin" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m13.3 31.7h-5v-16.7h5v16.7z m18.4 0h-5v-8.9c0-2.4-0.9-3.5-2.5-3.5-1.3 0-2.1 0.6-2.5 1.9v10.5h-5s0-15 0-16.7h3.9l0.3 3.3h0.1c1-1.6 2.7-2.8 4.9-2.8 1.7 0 3.1 0.5 4.2 1.7 1 1.2 1.6 2.8 1.6 5.1v9.4z m-18.3-20.9c0 1.4-1.1 2.5-2.6 2.5s-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5 2.6 1.2 2.6 2.5z"></path>
</g>
</svg>
<span class="st-label">Share</span>
</div>
</div>
但是当我想在Facebook或Linkedin上分享我的页面时,我遇到了问题。标题和图像不显示。我该怎么做?
答案 0 :(得分:2)
您好,我有一个博客,该博客使用jquery通过ajax请求获取数据。
这不是一个好的设计。不运行Java的客户端不仅会使您的站点无法访问-就像社交网站用来提取页面信息和图形的工具一样! -但这也会增加您网站的加载时间,因为必须发出两个HTTP请求才能开始加载任何内容。
您遇到的问题是此设计固有的。重新考虑。