Question

我的格式如下：

 <?php 
        echo "<strong>".$Event_data_fetched['event_subject']."</strong><br />";

        echo   '<form id="Event_Editing" action="#" method="post">
                    Event-Type:<br />
                    <select name="edited_event_type">
                        <option>'.$Event_type.'</option>
                        <option>'.$Unselected_1.'</option>
                        <option>'.$Unselected_2.'</option>
                    </select><br /><br />

                    Event-Subject:<br />
                    <input type="text" name="edited_event_subject" value="'.$Event_data_fetched['event_subject'].'"/><br /><br />

                    <input id="Edit_Event" type="submit" name="Edit_Event" value="Speichern">
                </form>';               
    ?>

该表单用于显示数据库中一行的数据，并为用户提供编辑所述数据的选项。提交表单后，我已经有了一个查询，可以处理数据并重写数据库中的编辑数据：

if(isset($_POST['Edit_Event'])){
        $New_Type_Value = $_POST['edited_event_type'];
        $New_Subject_Value = $_POST['edited_event_subject'];

        if($New_Type_Value == "Meet"){
            $New_Type_Value = 1;
        }
        else if($New_Type_Value == "Clubday"){
            $New_Type_Value = 2;
        }
        else if($New_Type_Value == "Surprise-Event"){
            $New_Type_Value = 3;
        }

        $edit_data_query = "UPDATE b6vjp_event
                            SET event_type_id = $New_Type_Value,
                                event_subject = '$New_Subject_Value'
                            WHERE id = $Event_id";

        mysqli_query($GLOBALS['connect'], $edit_data_query);
    }

现在，我想将此代码块放入单独的.php文件中。

我的最终目标是将表单发布到AJAX脚本中，然后将数据发送到一个单独的文件中，在其中使用新数据编辑数据库。插入后，应将新编辑的数据返回并写回到表单中。我还需要发布具有该行ID的变量。否则，查询将不知道在何处插入编辑后的数据。

我在Google上搜索了一堆，尝试了很多东西，但是似乎找不到适合我的任何东西。我确实偶然发现了一个看起来不错的开始但不是我想做的代码：

 <script type='text/javascript'>
    /* attach a submit handler to the form */
    $("#Event_Editing").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault();

    /* get the action attribute from the <form action=""> element */
    var $form = $( this ),
        url = $form.attr( 'action' );

    /* Send the data using post with element id name and name2*/
    var posting = $.post( url, { name: $('#name').val(), name2: $('#name2').val() } );

    /* Alerts the results */
    posting.done(function( data ) {
        alert('success');
    });
    });
</script>

我最大的问题是我不太擅长AJAX。有人知道我会怎么做吗？

Answer 1

如果您当前的代码运行正常，没有任何问题，

您可以使用在PHP文件中的代码末尾echo json_encode($_POST);返回数据库中已更新的数据。

在您的JavaScript代码中尝试

posting.done(function( data ) {
       //Prits data you returned on console.
        console.log(data);
    });

Answer 2

您可以像这样设置AJAX调用：

<?php 
echo "<strong>".$Event_data_fetched['event_subject']."</strong><br />";

echo   '<form id="Event_Editing" action="#" method="post">
            Event-Type:<br />
            <select name="edited_event_type">
                <option>'.$Event_type.'</option>
                <option>'.$Unselected_1.'</option>
                <option>'.$Unselected_2.'</option>
            </select><br /><br />

            Event-Subject:<br />
            <input type="text" name="edited_event_subject" value="'.$Event_data_fetched['event_subject'].'"/><br /><br />

            <input id="Edit_Event" type="submit" name="Edit_Event" value="Speichern" onclick='editData();'>
        </form>';        

?>


<script>

    function editData(){
        var value = document.getElementById('Event_Editing').value;

        $.ajax({
            url : 'your-backend-file-with-DB-Query.php',
            method : 'POST',// OR GET
            data: {value:value},
            dataType: 'json',
            success:function(data) {

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
                alert("responseText: "+xhr.responseText);
            }

        }); 

    }

</script>

然后在您的后端文件中，您将收到如下所示的值：

<?php

/*CONNECTION TO DB*/

$value = $_POST['value'];

/*Now you can use this value in your Query and update the database*/

?>

使用AJAX编辑数据库条目并返回编辑的数据

2 个答案: