javascript - 用户收藏时如何将信息保存在数据库中?
问题描述
当登录用户单击收藏按钮时,我无法保存信息。
这是我在 javascript 类(包括 ajax)上的第一周。只要我们了解流程,我们就可以复制粘贴。所以我做的第一件事就是查找关于如何制作最喜欢/不喜欢的按钮的教程并接管一个模板。然后我搜索了用户单击收藏按钮后如何将信息保存在数据库中。我不确定是否允许链接到外部网站,但我专门接管了这段代码:
<!DOCTYPE html>
<html>
<head>
<title>New page name</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/*
* Create cookie with name and value.
* In your case the value will be a json array.
*/
function createCookie(name, value, days) {
var expires = '',
date = new Date();
if (days) {
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = '; expires=' + date.toGMTString();
}
document.cookie = name + '=' + value + expires + '; path=/';
}
/*
* Read cookie by name.
* In your case the return value will be a json array with list of pages saved.
*/
function readCookie(name) {
var nameEQ = name + '=',
allCookies = document.cookie.split(';'),
i,
cookie;
for (i = 0; i < allCookies.length; i += 1) {
cookie = allCookies[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) === 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
}
/*
* Erase cookie with name.
* You can also erase/delete the cookie with name.
*/
function eraseCookie(name) {
createCookie(name, '', -1);
}
var faves = new Array();
$(function(){
var url = window.location.href; // current page url
$(document.body).on('click','#addTofav',function(e){
e.preventDefault();
var pageTitle = $(document).find("title").text();
var fav = {'title':pageTitle,'url':url};
faves.push(fav);
var stringified = JSON.stringify(faves);
createCookie('favespages', stringified);
location.reload();
});
$(document.body).on('click','.remove',function(){
var id = $(this).data('id');
faves.splice(id,1);
var stringified = JSON.stringify(faves);
createCookie('favespages', stringified);
location.reload();
});
var myfaves = JSON.parse(readCookie('favespages'));
faves = myfaves;
$.each(myfaves,function(index,value){
var element = '<li class="'+index+'"><h4>'+value.title+'</h4> <a href="'+value.url+'">Open page</a> '+
'<a href="javascript:void(0);" class="remove" data-id="'+index+'">Remove me</a>';
$('#appendfavs').append(element);
});
});
</script>
</head>
<body>
<a href="javascript:void(0);" id="addTofav">Add me to fav</a>
<ul id="appendfavs">
</ul>
</body>
</html>
它会按预期显示“将我添加到收藏夹”,但是当我单击它时,它会返回:
(index):54 Uncaught TypeError: Cannot read property 'push' of null
at HTMLAnchorElement.<anonymous> ((index):54)
at HTMLBodyElement.dispatch (jquery.min.js:3)
at HTMLBodyElement.r.handle (jquery.min.js:3)
任务如下:
""- 显示一个“最喜欢的”图标/心。通过 jQuery / JavaScript 使其可点击。如果单击它,则必须发送带有博客文章 ID 的 AJAX 请求。WP 插件必须“处理”AJAX 请求,并存储在用户 X 喜欢某个博客文章的会话(或数据库)中。服务器必须返回 JSON 响应。”
现在有一个小问题,因为在我解决了这个线程的错误之后,我的思维方式是否正确:
- 通过 CSS 我将创建一个心形按钮
- 该脚本本身使用 post ID 执行 ajax 请求
- 我以前做过的WP插件
- 此脚本提供 JSON 响应
提前谢谢stackoverflow,期待学习!
解决方案
推荐阅读
- python - 可以按顺序列出列表中的元素吗?
- bash - 如何使用bash检查子域是否正确重定向到特定IP地址?
- javascript - 如何在服务器端生成 yup 方案并将其发送到浏览器以供使用?
- html - 浏览器 | 表格布局边框的边缘问题
- mongodb - Mongodb可以容纳多少数据
- android - Android Jetpack 导航 A ->B->C->A
- java - 给定第一季度的第一个日期,如何生成一年的自定义季度?
- c++ - 在 C / C++ 中将 int* 转换为 int(*)[n]
- arrays - 如何在不将所有值归零的情况下初始化一个长 Golang 数组?
- elasticsearch - 聚合后如何过滤?