Редактировать запись базы данных с AJAX и возвращать отредактированные данные

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, который затем отправляет данные в отдельный файл, где он редактирует БД с новыми данными.После вставки вновь отредактированные данные должны быть возвращены и записаны обратно в форму.Мне также нужно опубликовать переменную с идентификатором строки.В противном случае запрос не будет знать, куда вставить отредактированные данные.

Я гуглил кучу и перепробовал много вещей, но, похоже, не нашел ничего специально для меня работающего.Я наткнулся на код, который выглядит как хорошее начало, но не то, что я хочу сделать:

 <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

Вы можете настроить вызов 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*/

?>

Answer 2

Если ваш текущий код работает без проблем,

вы можете просто использовать echo json_encode($_POST); в конце вашего кода в PHP-файле для возврата данных, которые вы обновили в своей БД.

В вашем коде JavaScript попробуйте,

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