>

SQL 쿼리를 실행하기 위해 일부 변수를 PHP 파일에 전달하려고합니다. 그러나 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도 마찬가지입니다. 이상적으로는 모두 별도의 파일에 있지만 여기에서 분리합니다. 상단에서 작업을 수행하고 아래 코드 만 표시하도록 제한하십시오.

    HTML로 표시하기 위해 항상 이스케이프 데이터를 사용하십시오. htmlspecialchars() 사용  이를 위해

    1999 년이 아니므로 최신 문서 유형 선언을 사용해야합니다. 현대 HTML은 또한 소문자 요소를 의미하며 type 가 필요하지 않습니다.   <script> 의 속성  요소.

    코드를 일관되게 들여 쓰고 간격을 두십시오. 문제를 디버깅하고 효율성을 찾는 데 도움이됩니다.

    var 로 변수 선언  사용하기 전이나 처음 사용할 때

    이 대화 상자를 복제해서는 안됩니다. 클릭하면 새 값으로 채 웁니다.

    여기서 실제 문제를 시작합니다. 첫째, 글로벌 변수에 너무 의존하고 있습니다. 예를 들어, 모든 변수의 값을 get_data() 에 설정합니다.  기능. 그러나 이것은 버튼을 누를 때가 아니라 대화 상자를 설정할 때 발생합니다. 이 사항은 양식을 제출할 때 발생해야합니다. (하지만 # 12 참조)

    우리는 그 get_data() 를 제거 할 수 있습니다  기능을 사용하고 기능을 편집 링크에 대한 클릭 핸들러 인 기능으로 이동합니다.

    data- 사용  속성은 PHP에서 클라이언트 측 스크립트로 데이터를 전달하는 좋은 방법입니다. 버튼에서 이러한 속성을 설정하고 서투른 DOM 탐색을 피하고 대신 $.data() 를 사용하십시오. .

    언제든지 무언가가 변경되거나 생성되면 GET이 아닌 POST 동작을 사용하십시오. 이름에서 알 수 있듯이 GET은 리소스를 가져 오기위한 것이며 데이터를 변경하는 작업을 수행해서는 안됩니다.

    close 대화 상자에서 완전히 제거하는 이유  속성? 재사용을 원하거나 새 창에 수정 팝업 결과가 표시되지 않을 것이라고 가정합니다.

    Ajax를 사용하지 않는 경우 양식 제출에 JS를 포함시킬 필요가 없습니다. 양식이 정상적으로 제출되도록하십시오.

    코드와 일관성을 유지하십시오. 다른 버튼이 모두 분리 된 경우 삭제 버튼에 HTML에 이벤트 핸들러가있는 이유는 무엇인가요?

    당신은 <tr> 를 닫지 않았습니다  요소와 당신은 당신의 <table> 를 마감  요소를 두 번.

    모든 양식 요소의 이름과 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를 빌드하도록 설계되었으며 직접 사용하지는 않는다.

  • 답변 # 2

    전송하기 전에 PHP 측에서 JavaScript의 JSON.stringify (your_variable) 함수를 사용하고 json_decode ($_ GET [ ' 데이터 '])

    your_variable은 객체 여야하며 코드처럼 감싸서는 안됩니다. 다음과 같이하십시오 :

    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); 
    }
    
    
    그런 다음이 데이터 (콘텐츠 유형 : application/json으로 설정된 문자열 또는 헤더 세트)를 ajax post를 통해 php로 전달하십시오. SQL 쿼리에서.

관련 자료

  • 이전 c# - Blazornet UI가 렌더링하지 않음
  • 다음 maven - 실행 가능한 jar에서 직접 Cucumber 테스트 실행