个人中心
gpt4 book ai didi

javascript - 如何使用 onclick 按钮从 ui-modal-dialog 存储用户输入的数据

转载 作者：可可西里 更新时间：2023-11-01 13:21:19 24 4
gpt4 key购买 nike

现在我对如何显示“关键字已保存”感到困惑。在代码中使用 modal-dialog 的 CSS #note。 Ui-modal-dialog 正在运行，我有 yes 和 no 图标。

现在我想用在 ui-modal-dialog 中单击“yes”替换 button=onclick 函数“updatekeyword()”并更新关键字。其他部分基本都是我写的，没有写函数“updatekeyword()”的部分。

所以不知道是什么功能。看来我应该知道“updatekeyword()”函数实际上是在阅读其他问题。基本上，我不知道接下来需要什么样的信息。

代码如下。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!-- CSS -->
    <link type="text/css" rel="stylesheet" href="css/style.css" media="all">
    <link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <style>
        #note {
            position: fixed;
            z-index: 101;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(4, 115, 184, 0.9);
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            line-height: 2.5;
            overflow: hidden;
            display: none;
        }
    </style>
    <!-- JS -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript" src="js/newsTicker.js"></script>
    <script type="text/javascript" src="jsapi/keyword.js"></script>
    <script type="text/javascript" src="jsapi/utils.min.js"></script>
</head>

<body>
    <div>
        <div id="note">
            Keyword saved.
        </div>
        <div class=btn_Grp>
            <button onclick="upadateKeyword()">apple</button>
        </div>
        <div id="dialog">Dialog Content</div>
        <style>
            .myTitleClass .ui-dialog-title {
                white-space: normal;
            }

            .myTitleClass .ui-dialog-titlebar {
                background: rgba(4, 115, 184, 0.9);
                color: #fff;
                font-size: 16px;
                height: 40px;
            }
        </style>

        <head>
            <meta charset="utf-8">
            <title>dialog demo</title>
            <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
            <script src="//code.jquery.com/jquery-1.10.2.js"></script>
            <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        </head>

        <body>
            <button id="opener">Register Keyword</button>
            <script>  
                $("#dialog").dialog({
                    autoOpen: false,
                    　　height: 300,
                    width: 1000,
                    dialogClass: 'myTitleClass',
                    modal: true,
                    closeOnEscape: false,
                    open: function (event, ui) {
                        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
                    },
                    buttons: {
                        "Yes": function () {
                            $(this).dialog("close");

                        }
                        , "No": function () {
                            $(this).dialog("close");


                        }
                    }
                });
                $("#opener").click(function () {
                    $("#dialog").dialog("open");
                });
            </script>
        </body>
    </div>
    </div>
</body>

</html>

最佳答案

此答案试图描述您需要从事的一般学习领域，以完成您想做的事情。根据您的应用程序要实现的目标，您有两个选择:客户端存储或服务器端存储。

客户端存储

最简单的方法是使用浏览器的内置数据存储选项:cookie 和 localStorage。您将使用 Javsacript 访问这两者。您可以找到大量关于如何使用这些资源的在线资源，但在决定使用哪一个时，您可能需要考虑以下一些事项。

Cookies:它们一直存在并且在所有浏览器中都受支持。它们具有设置“过期时间”的能力，因此它们可以在一段时间后自动删除自己。它们也可以限制为只能通过 SSL 访问或只能在某些目录中访问。

LocalStorage:这是一项“较新”的技术，但由于它在 IE8+ 中受支持，您现在很清楚可以自由使用它。这是一种使用键/值对进行信息存储的更直接的方法。与在 cookie 中相比，您可以在 localStorage 中存储更多数据(通常为 5MB)。

默认情况下，浏览器将接受存储 cookie 和 localStorage 的请求，但请注意，用户可以更改其设置以拒绝这些请求。 (你应该对此进行测试。)关于 Cookies 和 localStorage 和 sessionStorage 的更多细节: What is the difference between localStorage, sessionStorage, session and cookies?

服务器端存储

这种类型的解决方案比上面的解决方案要多得多，但如果您想要一个允许用户从不同浏览器和不同设备(电话、桌面, 笔记本电脑)并且仍然可以看到他们存储的数据。

您将需要使用服务器端编程环境(PHP、Python、.Net、Java)来管理来自 HTML 或直接来自 Javascript 的请求(使用 AJAX 请求)。从代码的 Angular 来看，这两个请求看起来几乎相同；两者通常都在管理来自用户浏览器的“POST”请求。

任何传入的请求都应该测试所有值，以确保它们符合预期(例如，不要太短或太长，仅限于整数，不 包含 HTML，尤其是没有 Javascript)。

一旦收到并验证了请求，就必须存储信息。这最好通过使用数据库库(如用于 PHP 的 PDO)来确保您保护您的数据库免受“SQL 注入(inject)”和其他黑客攻击。

设置供您的应用程序使用的数据库表可以直接在您的代码中完成，但通常使用单独的数据库管理程序进行管理。 (例如，一种流行的、免费的、基于 Web 的 MySQL DBM 工具是 phpMyAdmin。)

使这种服务器端存储方法更加复杂的是，您需要确保从您的应用程序请求数据的浏览器是该数据的真正所有者。这通常涉及在提供您存储的数据之前创建登录名/密码身份验证系统。这是一项非常重要的任务，将涉及学习 session 管理、密码盐和哈希。 (大多数人不会编写自己的身份验证系统，但这样做是一种很好的学习体验。)

更新

这是一个将 jQuery-UI 对话框与 localStorage 示例集成在一起的 JSFiddle。 https://jsfiddle.net/ColiniloC/6zho31oj/

关键区域是打开和按钮例程的更改:

open: function (event, ui) {
    $('.ui-dialog-titlebar-close', ui.dialog | ui).hide();

    var keyword = localStorage.getItem('keyword');
    $('#new_keyword').val( keyword ).focus();
},
buttons: {
    'Save': function () {
        $(this).dialog('close');

        var new_keyword = $('#new_keyword').val();
        // Input validation goes here!
        localStorage.setItem('keyword', new_keyword );
        show_note( "Your keyword has been updated to '" + new_keyword + "'" );
    }
    , 'Cancel': function () {
        $(this).dialog('close');
    }
}

关于javascript - 如何使用 onclick 按钮从 ui-modal-dialog 存储用户输入的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47434222/

24 4 0
文章推荐： php - 有没有办法通过在正文中使用 PHP 来覆盖页面的 <title> 标记？
文章推荐： php - 嗅探器代码段允许在新行上使用括号
文章推荐： php - 如何在我的网站页面上显示 Google Analytics 报告或实时报告？
文章推荐： 窗口命令 : List files in dir & subdir WITHOUT given extensions
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com