代码之家 › 专栏 › 技术社区 › Will Marcouiller

从<div>添加/删除<button>?

ajax html jquery php javascript

Will Marcouiller · 技术社区 · 11 年前

客观的

目标是为经过身份验证的用户提供库存管理功能。其他访问者只能查阅库存,并过滤他们的发现。

身份验证

身份验证是通过 ajaxSession() javascript函数,如这里所述。

现在 $.ajax() 委托从PHP服务器获得正确的答案。现在,我只是简单地使用CSS类 .hide 和 .show ,但出于安全原因,这似乎不是一个好主意。

这个 ajaxSession() 作用

function ajaxSession(actionUrl) {
    $.ajax(function() {
        url: actionUrl
        success: function(authenticated) {
            if (authenticated == 'true') {
                // create buttons here.
            } else {
                // ensure to empty those div
            }
        }
    });
}

注意:中设置了其他成员 $.ajax() 打电话,但重要的还在。

3 回复 | 直到 7 年前

ComFreek 11 年前

安全机制应该在服务器端实现!

如果您在JS中创建一些特定于登录的按钮,就不会有安全漏洞。只要确保你 不输出敏感数据 从您的后端(PHP)或您 执行任何未经授权的操作 (再次从您的后端)。

请始终在服务器端检查(每次操作)用户是否已获得授权!
将登录状态存储在会话等中。不要像这样依赖URL参数 isLoggedIn=1 或POST数据。它们来自客户。客户端始终是应用程序中不受信任的部分。

scrowler 11 年前

如果你担心人们猜测,你可以使用随机类名,而不是隐藏/显示…”230583’或‘fss83hjg’等。

如果我理解正确的话,这就是你想要的吗?

function ajaxSession(actionUrl) {
$.ajax(function() {
    url: actionUrl
    success: function(authenticated) {
        if (authenticated == 'true') {
            // create buttons here.
            var buttons = '<input type="button" value="Button 1">'
            buttons += '<input type="button" value="Button 2">'
            buttons += 'etc...';
            $('#button-container-div').html( buttons );
        } else {
            // ensure to empty those div
            $('#button-container-div').html('');
        }
    }
});
}

在jQuery中创建元素时,应该动态地进行创建,这样默认情况下元素就不会出现在页面上(见上文)。然而,如果有人在看(甚至没有那么难),他们将能够看到你在源代码中做了什么,并且可以很容易地使用控制台重新创建你正在做的任何事情,如果经过验证。。。我建议使用服务器端代码(您正在使用PHP?)来生成敏感数据。(见下文)

<?php
// start sessions if you aren't including a global config file that does it for you
session_start();

if($_SESSION['is_logged_in'] == true) {
    // logged in, show buttons
    $buttons = '<input type="button" value="Button 1">';
    $buttons .= '<input type="button" value="Button 2">';
    $buttons .= 'etc...';

    echo $buttons;
} else {
    // not logged in
}
?>

Todd 11 年前

为了成功:

Function myFunction()
{
    var btn=document.createElement("BUTTON");
    var t=document.createTextNode("CLICK ME");
    btn.appendChild(t);
    document.getElementById("theDiv").appendChild(btn);
}

对于失败

function myFailFunction() {
   var node = document.getElementById("theDiv");
   while (node.hasChildNodes()) {
        node.removeChild(node.lastChild);
    }
}