Mam następujący problem: używam jQuery ajax prośby o dodanie lub usuwanie wpisów z pliku serwera.

Mój kod działa o ile wpisy są dodawane i usunięte zgodnie z oczekiwaniami przy kliknięciu na odpowiednich przyciskach.

Jednak akcja dodająca wpisy nie jest wykonywana asynchronicznie. To znaczy, muszę przeładować całą stronę przed rozpoczęciem działań.

Nie mam (!!) Zmieniłem domyślne ustawienia żądania Ajax, tj. Nie dodałem "asynchronizacji: false". Mimo to kod nie działa asynchronicznie. (Próbowałem nawet dodać "async: prawda", aby wyraźnie powiedzieć, że wniosek ma być dokonany asynchronicznie ... Jednak bezskutecznie).

Oto metoda AJAX, która nie działa zgodnie z oczekiwaniami:

        $("button").on("click", function(){

            var name = $("#name").val();
            var text = $("#text").val();

            $.post(url, {name: name, text: text});

        });

Dlaczego ta prośba nie jest asynchroniczna? Jak mogę zrobić asynchroniczny?

***************************AKTUALIZACJA********************** ***********************

Poniższy ekran zapewnia pewne szczegóły dotyczące serwera / języka:

enter image description here

**************************** Update2 ********************* **************************

Oto - dla kontekstu - kod w całości:

<!DOCTYPE html>
<html lang="de-DE">
    <head>
        <meta charset="UTF-8" />
        <style>
            body {
                font: 15px normal Arial, sans-serif;
                color: #000000;
            }
            label {
                width: 5em;
                display: inline-block;
            }
            ul {
                padding: 0;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
        </script>
        <script>
        $(document).ready(function(){

            var url = "https://vsr.informatik.tu-chemnitz.de/edu/2015/evs/exercises/jsajax/guestbook.php";

            $.get(url, function(data){

                var table = document.createElement("table");
                $("body").append(table);
                var tbody = document.createElement("tbody");
                $("table").append(tbody);

                for(var i=0; i<data.length; i++){
                    $("tbody").append("<tr><td>" + data[i]["name"] + "</td><td>" + data[i]["text"] + "</td><td><a id=\"" + data[i]["id"] + "\" href=\"#\">Delete</a></td></tr>");       
                }

            });


            $("body").on("click", "a", function(e){

                e.preventDefault();
                var ID = $(this).attr("id");

                $.ajax({
                    url: url + '?' + $.param({"id": ID}),
                    type: 'DELETE',
                    success: function(){$("#" + ID).closest("tr").remove();},
                    error: function(){alert("error");}          
                });

            });


            $("button").on("click", function(){

                var name = $("#name").val();
                var text = $("#text").val();

                $.post(url, {name: name, text: text});

            });


        });          
        </script>
    </head>
    <body>
        <h1>Guestbook</h1>
        <ul>
            <li><b>TestUser:</b> This is an example entry. <a href="#" alt="Delete entry">(X)</a></li>
            <li><b>TestUser2:</b> This is another example entry. <a href="#" alt="Delete entry">(X)</a></li>
        </ul>
        <hr>
        <form method="POST" action="https://vsr.informatik.tu-chemnitz.de/edu/2015/evs/exercises/jsajax/guestbook.php">
                <label for="name">Name</label> <input id="name" type="text" name="name" placeholder="Name"><br>
                <label for="text">Text</label> <input id="text" type="text" name="text" placeholder="Text"><br>
                <button type="submit">Add entry</button>
        </form>
    </body>
</html>

********************************* Update4 **************** *************************

Po dodaniu czegoś przekierowuję się na stronę z zawieraniem wiadomości wyglądającym podobnie do następującego zrzutu ekranu:

enter image description here

0
Tommy 15 luty 2017, 20:51

2 odpowiedzi

Najlepsza odpowiedź

Twoim problemem jest to, że wykonujesz formularz, który przenosi cię na inną stronę. Jeśli chcesz pozostać na tej samej stronie, pozbyć się formularza prześlij i użyj żądania JQuery Post, jak to napisałeś, ewentualnie z oddzwanianiem sukcesu. Ale nie próbuj mieszać tych dwóch. Jeśli chcesz async, a następnie przekierować, po prostu wykonaj przekierowanie w JavaScript z obsługi sukcesu swojego żądania poczta jQuery.

2
Jared Smith 15 luty 2017, 18:33

Aby rozszerzyć komentarze, to właśnie sugerują:

  $("body").on("click", "a", function(e){

        e.preventDefault();
        var $that = $(this);
        var ID = $that.attr("id");

        $.ajax({
            url: url + '?' + $.param({"id": ID}),
            type: 'DELETE',
            success: function(){$that.closest("tr").remove();},
            error: function(){alert("error");}          
        });

    }); 
2
John Hascall 15 luty 2017, 18:03