Przesyłanie formularza HTML za pomocą Jquery AJAX

107

Próbuję przesłać formularz HTML przy użyciu AJAX, korzystając z tego przykładu .

Mój kod HTML:

<form id="formoid" action="studentFormInsert.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <label class="title">Name</label>
        <input type="text" id="name2" name="name2" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

Mój skrypt:

<script type="text/javascript">
    $(document).ready(function() { 
        $('#formoid').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });
</script>

To nie działa, nawet nie otrzymuję komunikatu ostrzegawczego, a kiedy wysyłam, nie chcę przekierowywać na inną stronę, chcę tylko pokazać komunikat ostrzegawczy.

Czy jest na to prosty sposób?

PS: Mam kilka pól, podałem tylko dwa jako przykład.

jquery ajax form-submit Oliveira
źródło

nie możesz pozbyć się komponentu html „formularz”? i użyj jquery, aby opublikować post w programie obsługi kliknięć przycisku

Come

Odpowiedzi:

178

Szybki opis AJAX

AJAX to po prostu asynchroniczny format JSON lub XML (w większości nowszych sytuacji JSON). Ponieważ wykonujemy zadanie ASYNC, prawdopodobnie zapewnimy naszym użytkownikom przyjemniejsze wrażenia z interfejsu użytkownika. W tym konkretnym przypadku wysyłamy FORMULARZ za pomocą AJAX.

Naprawdę szybko istnieją 4 ogólnych działań internetowych GET, POST, PUToraz DELETE; nich bezpośrednio odpowiadają SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, i DELETING DATA. Domyślnym formularzem internetowym HTML / ASP.Net / PHP / Python lub jakąkolwiek inną formakcją jest „wyślij”, co jest akcją POST. Z tego powodu wszystko poniżej będzie opisywać wykonywanie POST. Czasami jednak z http możesz chcieć innej akcji i prawdopodobnie zechcesz użyć .ajax.

Mój kod specjalnie dla Ciebie (opisany w komentarzach do kodu):

/* attach a submit handler to the form */
$("#formoid").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) {
    $('#result').text('success');
  });
  posting.fail(function() {
    $('#result').text('failed');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formoid" action="studentFormInsert.php" title="" method="post">
  <div>
    <label class="title">First Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label class="title">Last Name</label>
    <input type="text" id="name2" name="name2">
  </div>
  <div>
    <input type="submit" id="submitButton" name="submitButton" value="Submit">
  </div>
</form>

<div id="result"></div>

Rozwiń fragment

Dokumentacja

Z $.postdokumentacji witryny jQuery .

Przykład : wysyłanie danych formularza przy użyciu żądań ajax

$.post("test.php", $("#testform").serialize());

Przykład : Wyślij formularz za pomocą Ajax i umieść wyniki w div

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form action="/" id="searchForm">
            <input type="text" name="s" placeholder="Search..." />
            <input type="submit" value="Search" />
        </form>
        <!-- the result of the search will be rendered inside this div -->
        <div id="result"></div>
        <script>
            /* attach a submit handler to the form */
            $("#searchForm").submit(function(event) {

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

                /* get some values from elements on the page: */
                var $form = $(this),
                    term = $form.find('input[name="s"]').val(),
                    url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post(url, {
                    s: term
                });

                /* Put the results in a div */
                posting.done(function(data) {
                    var content = $(data).find('#content');
                    $("#result").empty().append(content);
                });
            });
        </script>
    </body>
</html>

Ważna uwaga

Bez korzystania z OAuth lub co najmniej HTTPS (TLS / SSL) nie używaj tej metody do zabezpieczania danych (numery kart kredytowych, SSN, wszystko, co dotyczy PCI, HIPAA lub logowania)

abc123
źródło

@ abc123 Jak mogę ustawić w tym nagłówek żądania autoryzacji? Próbowałem

beforeSend: function (xhr) 			{ 				xhr.setRequestHeader("Authorization", "*****"); 				xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); 			},

Ale to nie ustawia żadnego nagłówka

mahendra kawde

@mahendrakawde, które musisz wykorzystać, na $.ajaxktórym mogę napisać przykład, jeśli chcesz, ale to naprawdę osobne pytanie

abc123

@ abc123 Mam wątek zainicjowany w tym celu. pozwól mi się tym z tobą podzielić.

mahendra kawde

Czy możemy w ogóle uniknąć używania formularza post i po prostu zrobić post jquery na module obsługi kliknięcia przycisku (który jest przyciskiem HTML, a nie częścią żadnego elementu div formularza). W ten sposób event.preventdefault też nie będzie potrzebny?

harshvchawla

@harshvchawla oczywiście, ale wtedy zapytanie wybierające dla zmiennych

pobranych

var postData = "text";
      $.ajax({
            type: "post",
            url: "url",
            data: postData,
            contentType: "application/x-www-form-urlencoded",
            success: function(responseData, textStatus, jqXHR) {
                alert("data saved")
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        })

Varun S
źródło

funkcja sukcesu / zakończenia nastąpi, gdy połączenie zostanie zakończone i otrzyma 200 OK z serwera

Varun S

cześć, umieszczam: $ (dokument) .ready (function () {$ ('# formoid'). submit (function () {var postData = "text"; $ .ajax ({type: "post", url: " url ", data: postData, contentType:" studentFormInsert.php ", success: function (responseData, textStatus, jqXHR) {alert (" data save ")}, error: function (jqXHR, textStatus, errorThrown) {console.log ( errorThrown);}})}); w rzeczywistości nie działa .. czy potrzebne są jakieś modyfikacje po stronie php?

Oliveira

dobry przykład i dobrze napisany, prosimy o przesłanie z nim odpowiedzi, ale nie tylko przykładowego kodu bez wyjaśnienia.

abc123

Nie wiem, jak to połączyć z formularzem, który chcę

wysłać

Dlaczego nie ma wyjaśnienia?

Rich

Jeśli dodasz:

jquery.form.min.js

Możesz to po prostu zrobić:

<script>
$('#myform').ajaxForm(function(response) {
  alert(response);
});

// this will register the AJAX for <form id="myform" action="some_url">
// and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response
</script>

UWAGA:

Możesz użyć prostego $ ('FORM'). Serialize (), jak zasugerowano w poście powyżej, ale to nie zadziała dla WEJŚCIA PLIKU ... ajaxForm () będzie.

Martin Zvarík
źródło