Mengirimkan formulir HTML menggunakan Jquery AJAX

107

Saya mencoba untuk mengirimkan formulir HTML menggunakan AJAX menggunakan contoh ini .

Kode HTML saya:

<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>

Skrip saya:

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

Ini tidak berfungsi, saya bahkan tidak mendapatkan pesan peringatan dan ketika saya mengirimkan saya tidak ingin mengalihkan ke halaman lain, saya hanya ingin menampilkan pesan peringatan.

Apakah ada cara sederhana untuk melakukannya?

PS: Saya ada beberapa bidang, saya kasih contoh saja dua.

jquery ajax form-submit

— Oliveira
sumber

tidak bisakah kamu menghapus komponen html "bentuk"? dan gunakan jquery untuk memposting di handler klik tombol come

— harshvchawla

Jawaban:

178

Deskripsi Cepat AJAX

AJAX hanyalah Asyncronous JSON atau XML (dalam kebanyakan situasi yang lebih baru JSON). Karena kami melakukan tugas ASYNC, kami kemungkinan besar akan memberikan pengalaman UI yang lebih menyenangkan kepada pengguna. Dalam kasus khusus ini kami melakukan pengiriman FORM menggunakan AJAX.

Benar-benar cepat ada 4 tindakan web umum GET, POST, PUT, dan DELETE; ini secara langsung sesuai dengan SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, dan DELETING DATA. Formulir web HTML / ASP.Net default / PHP / Python atau formtindakan lainnya adalah "mengirimkan" yang merupakan tindakan POST. Karena itu, di bawah ini semuanya akan menjelaskan melakukan POST. Namun terkadang dengan http Anda mungkin menginginkan tindakan yang berbeda dan mungkin ingin memanfaatkannya .ajax.

Kode saya khusus untuk Anda (dijelaskan dalam komentar kode):

/* 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>

Luaskan cuplikan

Dokumentasi

Dari $.postdokumentasi situs jQuery .

Contoh : Mengirim data formulir menggunakan permintaan ajax

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

Contoh : Posting formulir menggunakan ajax dan masukkan hasilnya ke dalam 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>

Catatan penting

Tanpa menggunakan OAuth atau minimal HTTPS (TLS / SSL) jangan gunakan metode ini untuk data aman (nomor kartu kredit, SSN, apa pun yang terkait dengan PCI, HIPAA, atau login)

— abc123
sumber

@ abc123 bagaimana cara menyetel header permintaan Otorisasi di sini? Saya mencoba

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

Tapi ini tidak mengatur header apapun

— mahendra kawde

@ mahendrakawde Anda perlu menggunakan $.ajaxyang saya dapat menulis contoh jika Anda mau tetapi itu benar-benar pertanyaan yang terpisah

— abc123

@ abc123 saya memiliki utas yang dimulai untuk itu. biarkan aku membaginya denganmu.

— mahendra kawde

dapatkah kita menghindari penggunaan form post sama sekali dan cukup melakukan posting jquery pada handler klik tombol (yang merupakan tombol html bukan bagian dari div form). Dengan cara ini event.preventdefault juga tidak akan dibutuhkan?

— harshvchawla

@harshvchawla tentu saja, tetapi kueri pemilihan Anda untuk variabel yang ditarik dari elemen html berbeda

— abc123

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
sumber

fungsi sukses / lengkap akan terjadi ketika panggilan selesai dan menerima 200 OK dari server

— Varun S

hai saya menaruh: $ (document) .ready (function () {$ ('# formoid'). submit (function () {var postData = "text"; $ .ajax ({type: "post", url: " url ", data: postData, contentType:" studentFormInsert.php ", sukses: function (responseData, textStatus, jqXHR) {alert (" data stored ")}, error: function (jqXHR, textStatus, errorThrown) {console.log ( errorThrown);}})}); sebenarnya tidak berfungsi .. modifikasi apa pun di sisi php diperlukan?

— Oliveira

contoh yang bagus dan ditulis dengan baik, tolong kirimkan beberapa jawaban dengannya meskipun bukan hanya kode contoh tanpa penjelasan.

— abc123

Saya tidak mengerti bagaimana menghubungkannya dengan formulir yang ingin saya posting

— Piotr Kamoda

Kenapa tidak ada penjelasannya?

— Kaya

Jika Anda menambahkan:

jquery.form.min.js

Anda cukup melakukan ini:

<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>

CATATAN:

Anda dapat menggunakan $ ('FORM'). Serialize () sederhana seperti yang disarankan dalam posting di atas, tetapi itu tidak akan berfungsi untuk FILE INPUTS ... ajaxForm () akan.

— Martin Zvarík
sumber