个人中心
gpt4 book ai didi

javascript - 为什么 javascript 在 php 中将这些变量作为对象？

转载 作者：行者123 更新时间：2023-11-30 21:30:51 25 4
gpt4 key购买 nike

我正在尝试将一些变量传递给 PHP 文件以运行 SQL 查询。然而，JavaScript 将这些变量作为对象传递。为什么会这样？我该如何改变它？

  <?php include 'dbconfig.php';?>
<?php header('Content-Type: text/html; charset=utf-8');?>

<!DOCTYPE HTML PUCLIC "-//W3C//DTDHTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE>LIBRARY DATABASE</TITLE>
    <link rel="stylesheet" type="text/css" href="mytable.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="jquerycss.css">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () { 

            var new_dialog = function (type, row) {
            var dlg = $("#dialog-form").clone();
            var memberID = dlg.find(("#memberID")),
            MFirst = dlg.find(("#MFirst")),
            MLast = dlg.find(("#Mlast")),
            Street = dlg.find(("#Street")),
            number = dlg.find(("#number")),
            postalCode = dlg.find(("#postalCode")),
            Mbirthdate = dlg.find(("#Mbirthdate"));
                type = type || 'Create';
                var config = {
                    autoOpen: true,
                    height: 500,
                    width: 600,
                    modal: true,
                    buttons: {
                        "Create an account": save_data,
                        "Cancel": function () {
                            dlg.dialog("close");
                        }
                    },
                    close: function () {
                        dlg.remove();
                    }
                };
                if (type === 'Edit') {
                    config.title = "Edit User";
                    get_data();
                    delete (config.buttons['Create an account']);
                    config.buttons['Edit account'] = function () {
                        window.open("edituple.php?memberID="+ memberID +"&MFirst=" + MFirst +"&MLast=" + MLast +"&Street=" + Street
                        +"&number=" + number + "&postalCode=" + postalCode +"&Mbirthdate=" + Mbirthdate);
                        dlg.dialog("close");
                    }; 
                }
                dlg.dialog(config); 
                function get_data() {
                    var _memberID = $(row.children().get(1)).text(),
                     _MFirst = $(row.children().get(2)).text(),
                     _MLast = $(row.children().get(3)).text(),
                    _Street = $(row.children().get(4)).text(),
                    _number = $(row.children().get(5)).text(),
                    _postalCode = $(row.children().get(6)).text(),
                    _Mbirthdate = $(row.children().get(7)).text();
                    memberID.val(_memberID);
                    MFirst.val(_MFirst);
                    MLast.val(_MLast); 
                    Street.val(_Street);
                    number.val(_number); 
                    postalCode.val(_postalCode);
                    Mbirthdate.val(_Mbirthdate); 
                } 
                function save_data() {
                    $("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text() + ' ').concat(lname.find("option:selected").text()) + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
                    dlg.dialog("close");
                }
            }; 
            $(document).on('click', 'span.delete', function () {
                $(this).closest('tr').find('td').fadeOut(1000, 
        function () {
            // alert($(this).text());
            $(this).parents('tr:first').remove();
        }); 
                return false;
            });
            $(document).on('click', 'td a.edit', function () {
                new_dialog('Edit', $(this).parents('tr'));
                return false;
            }); 
            $("#create-user").button().click(new_dialog); 
        });
    </script>
</HEAD>
<BODY>
<div class="navbar">
                <a href="mydatabase.php">Home</a>
                <a href="member_table.php">Member</a>
                <a href="book_table.php">Book</a>
                <a href="borrows_table.php">Borrows</a>
              </div>
              <br><br>
              <div class="navbar2">
                    <a href="insert.php">Insert</a>
                    <a href="update.php">Update</a>
                    <a href="delete.php">Delete</a>
                  </div>

    <TABLE class="minimalistBlack">
        <thead>
        <tr>
        <th> memberID </th>
        <th> First Name </th>
        <th> Last Name </th>
        <th> Street </th>
        <th> Number </th>
        <th> Postal Code </th>
        <th> Birthdate </th>
        <th> Update </th>
        </tr>
        </thead>
        <?php 
            $conn= mysqli_connect("localhost","root","","library");
            mysqli_set_charset($conn, "utf8");

            if ($conn -> connect_error){
                die("Conenction failed:". $conn->connect_error);
            }
            $sql="SELECT memberID,MFirst,MLast,Street,number,postalCode,Mbirthdate FROM member";
            $result = $conn->query($sql);
            if ($result->num_rows>0){

                while($row= $result->fetch_assoc()){
                    echo "<tr>";
                    echo "<td>".$row['memberID']."</td>";
                    echo "<td>".$row['MFirst']."</td>";
                    echo "<td>".$row['MLast']."</td>";    
                    echo "<td>".$row['Street']."</td>"; 
                    echo "<td>".$row['number']."</td>"; 
                    echo "<td>".$row['postalCode']."</td>"; 
                    echo "<td>".$row['Mbirthdate']."</td>"; 
                    echo "<td><a class =\"edit\" href=\"\">Edit </a>
                     | <a href=\"deletefmtable.php?memberID=$row[memberID]\" onClick=\"return confirm('Are you sure you want to delete?')\">Delete</a></td>";  
                }
                echo "</TABLE>";
            }
            else { echo "0 result"; }
            $conn->close();
         ?>
    </TABLE>
    <div id="dialog-form" title="Create new user" style="display:none">

        <p class="validateTips">

            All form fields are required.</p>       

            <form>

        <fieldset>

            <label for="memberID">

                Member ID </label>

                <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />

            <label for="MFirst">

                First Name</label>

                <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />


            <label for="MLast">

                Last Name </label>

            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />

            <label for="Street">

                Street </label>

            <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

            <label for="number">

             number </label>

            <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

            <label for="postalCode">

            Postal Code </label>

            <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

            <label for="Mbirthdate">

            Birthdate </label>

            <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

        </fieldset>

        </form>

    </div>
</BODY>
</HTML>

代码的目的是显示一个表格，并在旁边进行编辑和删除。删除按钮效果很好，但是为了进行编辑，我需要将上面提到的变量传递给 php 文件

最佳答案

好的，我喜欢挑战。从顶部开始:

  1. 您希望尽可能避免混合使用 PHP 和 HTML。 JavaScript 也是如此。理想情况下，它们完全在单独的文件中，但我们只是在这里将它们分开。在顶部做你的工作，并限制你自己只显示下面的代码。

  2. 始终转义数据以在 HTML 中显示。使用 htmlspecialchars()为此。

  3. 这不是 1999 年，您应该使用现代文档类型声明。现代 HTML 也意味着小写元素，不需要 type <script> 上的属性元素。

  4. 一致地缩进和分隔代码。它将帮助您调试问题并提高效率。

  5. 用 var 声明变量在使用它们之前或首次使用时

  6. 您不应该复制此对话框。只需在点击时用新值填充它。

  7. 在这里，我们开始探讨您的实际问题。首先，您过于依赖全局变量。举个例子，您在 get_data() 中设置了所有这些变量的值。功能。但这发生在设置对话框时，而不是按下按钮时。这些东西需要在提交表单时发生。 (但请参阅#12。)

  8. 我们可以去掉那个get_data()一起运行并将其功能移动到它所属的位置，即编辑链接的点击处理程序。

  9. 使用 data- attributes 是将数据从 PHP 传递到客户端脚本的好方法。您可以在按钮上设置这些属性并避免笨拙的 DOM 遍历，而只需使用 $.data() .

  10. 任何时候更改或创建某些内容时，请使用 POST 操作，而不是 GET。顾名思义，GET 仅用于获取资源，不应执行更改数据的操作。

  11. 为什么要完全删除带有 close 的对话框属性(property)？我假设您想重复使用它，否则您不会在新窗口中弹出编辑结果。

  12. 如果您不使用 Ajax，则根本不需要让 JS 参与您的表单提交；让表单正常提交即可。

  13. 与您的代码保持一致。为什么删除按钮在 HTML 中有一个事件处理程序，而其他所有按钮都是独立的？

  14. 你没有关闭你的 <tr>元素，你关闭了你的<table>元素两次。

  15. 所有表单元素的命名和 ID 都不正确。

这应该可以解决问题:

<?php
    include 'dbconfig.php';
    $conn= mysqli_connect("localhost","root","","library");
    mysqli_set_charset($conn, "utf8");

    if ($conn -> connect_error) {
        die("Conenction failed:". $conn->connect_error);
    }
    $sql="SELECT memberID, MFirst, MLast, Street, number, postalCode, Mbirthdate FROM member";
    $result = $conn->query($sql);
    $data = [];
    while ($row= $result->fetch_assoc()) {
        $data[] = array_map("htmlspecialchars", $row);
    }
    $conn->close();

    // test data
    $data = [
        ["memberID"=>1, "MFirst"=>"John", "MLast"=>"Smith", "Street"=>"Main St", "number"=>"123", "postalCode"=>"K1A 1A1", "Mbirthdate"=>"1990-06-27"]
    ];
    header('Content-Type: text/html;charset=utf-8');
?>
<!DOCTYPE html>
<html>
<head>
    <title>LIBRARY DATABASE</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="mytable.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="jquerycss.css">
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

    <script>
        $(function () { 
            var new_dialog = function (type) {
                var dlg = $("#dialog-form");
                type = type || 'Create';
                var config = {
                    autoOpen: true,
                    height: 500,
                    width: 600,
                    modal: true,
                    buttons: {
                        "Create an account": function () {
                            $("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text() + ' ').concat(lname.find("option:selected").text()) + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
                            dlg.dialog("close");
                        },
                        "Cancel": function () {
                            dlg.dialog("close");
                            return true;
                        }
                    }
                };
                if (type === 'Edit') {
                    config.title = "Edit User";
                    delete (config.buttons['Create an account']);
                    config.buttons['Edit account'] = function () {
                        // just let the form submit itself normally
                        $("#dialog-form form").submit();
                        dlg.dialog("close");
                    };
                }
                dlg.dialog(config); 
            }; 
            $(document).on('click', 'span.delete', function () {
                $(this).closest('tr').find('td').fadeOut(1000, function () {
                    $(this).parents('tr:first').remove();
                }); 
                return false;
            });
            $("a.edit").click(function () {
                // populate the values; we're getting all the info from
                // the data- attributes on the link itself
                // note JS makes them all lowercase
                $("#dialog-form input#memberID").val($(this).data("memberid"));
                $("#dialog-form input#MFirst").val($(this).data("mfirst"));
                $("#dialog-form input#MLast").val($(this).data("mlast"));
                $("#dialog-form input#Street").val($(this).data("street"));
                $("#dialog-form input#number").val($(this).data("number"));
                $("#dialog-form input#postalCode").val($(this).data("postalcode"));
                $("#dialog-form input#Mbirthdate").val($(this).data("mbirthdate"));
                new_dialog('Edit');
                return false;
            }); 
            $("a.delete").click(function() {
                return confirm('Are you sure you want to delete?');
            });
            $("#create-user").button().click(function() {
                // just clear the values
                $("#dialog-form input").val("");
                new_dialog();
            }); 
        });
    </script>
</head>
<body>
    <div class="navbar">
        <a href="mydatabase.php">Home</a>
        <a href="member_table.php">Member</a>
        <a href="book_table.php">Book</a>
        <a href="borrows_table.php">Borrows</a>
    </div>
    <br/><br/>
    <div class="navbar2">
        <a href="insert.php">Insert</a>
        <a href="update.php">Update</a>
        <a href="delete.php">Delete</a>
    </div>

    <table class="minimalistBlack">
        <thead>
            <tr>
                <th> memberID </th>
                <th> First Name </th>
                <th> Last Name </th>
                <th> Street </th>
                <th> Number </th>
                <th> Postal Code </th>
                <th> Birthdate </th>
                <th> Update </th>
            </tr>
        </thead>
        <tbody>
        <?php foreach ($data as $row):?>
            <tr>
                <td><?=$row['memberID']?></td>
                <td><?=$row['MFirst']?></td>
                <td><?=$row['MLast']?></td>
                <td><?=$row['Street']?></td>
                <td><?=$row['number']?></td>
                <td><?=$row['postalCode']?></td>
                <td><?=$row['Mbirthdate']?></td>
                <td>
                    <a
                        class ="edit"
                        href="#"
                        <?php foreach ($row as $k=>$v):?>
                        data-<?=$k?>="<?=$v?>"
                        <?php endforeach?>
                    >Edit</a> |
                    <a class="delete" href="deletefmtable.php?memberID=<?=$row['memberID']?>">Delete</a>
                </td>
            </tr>
        <?php endforeach;?>
        </tbody>
    </table>

    <div id="dialog-form" title="Create new user" style="display:none">
        <p class="validateTips">
            All form fields are required.</p>
            <form method="post" action="edituple.php" target="_blank">
                <fieldset>
                    <label for="memberID">Member ID </label>
                    <input type="text" name="memberID" id="memberID" value="" class="text ui-widget-content ui-corner-all" readonly="readonly" />

                    <label for="MFirst">First Name</label>
                    <input type="text" name="MFirst" id="MFirst" value="" class="text ui-widget-content ui-corner-all" />

                    <label for="MLast">Last Name </label>
                    <input type="text" name="MLast" id="MLast" value="" class="text ui-widget-content ui-corner-all" />

                    <label for="Street">Street </label>
                    <input type="text" name="Street" id="Street" value="" class="text ui-widget-content ui-corner-all" />

                    <label for="number">number </label>
                    <input type="text" name="number" id="number" value="" class="text ui-widget-content ui-corner-all" />

                    <label for="postalCode">Postal Code </label>
                    <input type="text" name="postalCode" id="postalCode" value="" class="text ui-widget-content ui-corner-all" />

                    <label for="Mbirthdate">Birthdate </label>
                    <input type="text" name="Mbirthdate" id="Mbirthdate" value="" class="text ui-widget-content ui-corner-all" />
                </fieldset>
        </form>
    </div>

</body>
</html>

您需要做的就是考虑 edituple.php看看$_POST而不是 $_GET .并且不要忘记使用准备好的语句来更新数据库!我强烈建议使用 PDO 或更高级别的数据库 API。 mysqli 非常冗长，它实际上是为构建数据库 API 而设计的，不能直接使用。

关于javascript - 为什么 javascript 在 php 中将这些变量作为对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56246706/

25 4 0
文章推荐： javascript - 我如何更改 sequelize 中包含字段的名称？
文章推荐： C 中的比较字符串
文章推荐： c# - ASP.Net Core MVC/API/SignalR - 更改身份验证方案(Cookie 和 JWT)
文章推荐： c - C语言的字数统计程序
行者123
个人简介

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

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