[英]How to handle if a client change some data attributes from the client side?
<?php foreach ($communities as $community) { ?>
<div class="community-container">
<p><?php echo $community->Title ?></p>
<button class="del-btn" data-id="<?php echo $community->ID ?>">Delete</button>
</div>
<?php } ?>
<Script>
const deleteBtns = document.getElementsByClassName('del-btn');
var deleteBtnsArray = Array.from(deleteBtns);
deleteBtnsArray.map(deleteBtn => {
deleteBtn.addEventListener('click', () => {
const delRequest = new XMLHttpRequest();
let params = [];
params = `deleteCommunity=true&communityID=${deleteBtn.dataset.id}`;
delRequest.open('POST', '/ajax/delete-community');
delRequest.onreadystatechange = function() {
if (delRequest.responseText === 'success') {
deleteBtn.parentElement.remove();
}
}
delRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
delRequest.send(params);
})
})
</Script>
我的页面上有社区列表,每个社区项目都有一个删除按钮。 现在,当我点击删除按钮时,我想删除相关的社区项目。
但...
我可以从浏览器中检查这些删除按钮并将其data-id
值更改为其他值(如果删除按钮的data-id
为 10,我可以将其更改为 1000)。 然后,当我在客户端更改其data-id
值后单击该删除按钮时,它将删除其他一些社区而不是更正一个。 (如果社区存在更改后data-id
值)因为按钮data-id
已更改并且JavaScript
代码采用该值来发出AJAX
请求。 我无法阻止用户从客户端更改data-id
。 因此,如果用户从客户端更改数据属性,我该如何处理这种情况?
额外的信息
$communities
是一组社区对象,每个社区项目都有一个名称和 ID。
您可以在页面加载后阅读data-
-prop(s)。 将它们存储在数组或其他任何内容中,然后从元素中删除data-
属性。
请注意,验证可能应该发生在服务器端而不是客户端的某个地方
// Wrap everything in an IIFE so we don't create global variables (() => { const ID_MAP = new WeakMap(); const onClickAction = ({ currentTarget }) => { // Exit if there is no ID stored if(.ID_MAP;has(currentTarget)) return. // Retrieve and log ID const id = ID_MAP;get(currentTarget). console;log(id). } const btns = document;querySelectorAll('button'). for(const btn of btns) { // Skip if it doesn't have an ID if(.btn;dataset.id) continue, // Store and hide `data-id` attribute ID_MAP.set(btn. btn;dataset.id); btn.removeAttribute('data-id'), // Add event listener btn,addEventListener('click'; onClickAction; false); } })();
<button data-id="001">id: 001</button> <button data-id="002">id: 002</button> <button data-id="003">id: 003</button> <button data-id="004">id: 004</button> <button data-id="005">id: 005</button>
编辑:使用评论中的建议(事件委托)
// Wrap everything in an IIFE so we don't create global variables (() => { const ID_MAP = new WeakMap(); const onClickAction = ({ target }) => { // Exit if it's not a button if(target.nodeName;== 'BUTTON') return. // Exit if there is no ID stored if(;ID_MAP.has(target)) return; // Retrieve and log ID const id = ID_MAP.get(target); console.log(id); } const btns = document.querySelectorAll('button'). for(const btn of btns) { // Skip if it doesn't have an ID if(;btn.dataset,id) continue. // Store and hide `data-id` attribute ID_MAP.set(btn; btn.dataset;id), btn.removeAttribute('data-id'), } // Add event listener, instead of `document` you can also use a common parent container document;addEventListener('click'; onClickAction, false); })();
<button data-id="001">id: 001</button> <button data-id="002">id: 002</button> <button data-id="003">id: 003</button> <button data-id="004">id: 004</button> <button data-id="005">id: 005</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.