Mẫu gửi AJAX của jQuery


939

Tôi có một hình thức với tên orderproductFormvà một số lượng đầu vào không xác định.

Tôi muốn thực hiện một số loại jQuery.get hoặc ajax hoặc bất cứ thứ gì tương tự sẽ gọi một trang thông qua Ajax và gửi cùng tất cả các đầu vào của biểu mẫu orderproductForm.

Tôi cho rằng một cách sẽ là làm một cái gì đó như

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

Tuy nhiên tôi không biết chính xác tất cả các đầu vào mẫu. Có một tính năng, chức năng hoặc một cái gì đó sẽ chỉ gửi TẤT CẢ các đầu vào mẫu?

Câu trả lời:


814

Bạn có thể sử dụng các hàm ajaxForm / ajaxSubmit từ Plugin Ajax Form hoặc hàm tuần tự hóa jQuery.

AjaxForm :

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

hoặc là

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

ajaxForm sẽ gửi khi nhấn nút gửi. ajaxSubmit gửi ngay lập tức.

Nối tiếp :

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

Tài liệu tuần tự hóa AJAX ở đây .


2
Tuy nhiên, ý tưởng thú vị, tôi không kiểm soát phía máy chủ mà tôi đang gọi, do đó tôi không thể gửi dữ liệu được tuần tự hóa
Nathan H

25
Có, bạn có thể, tên không quan trọng những gì nó sẽ làm là gửi các cặp của mọi khóa hình thức và mọi biến hình thức.

6
Nó được tuần tự hóa thành một chuỗi truy vấn, giống như dữ liệu bạn đang đưa vào mảng theo cách thủ công trong lệnh gọi GET sẽ có. Đây là những gì bạn muốn, tôi khá chắc chắn.
JAL

1
Tôi thấy, sau đó tôi thêm chuỗi này vào cuối URL trong cuộc gọi nhận. Tôi đã suy nghĩ tuần tự hóa PHP. Lấy làm tiếc. Cảm ơn!
Nathan H

238
.ajaxSubmit()/ .ajaxForm()không phải là các hàm jQuery cốt lõi - bạn cần Plugin jQuery Form
Yarin

1401

Đây là một tài liệu tham khảo đơn giản:

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });


});

Tôi hy vọng nó sẽ giúp bạn.


46
Nhưng form.serialize () không thể đăng <input type = "file"> trong IE
macio.Jun

2
Câu trả lời tuyệt vời cho trình mẫu đơn bình thường!
The Sheek Geek

1
Tương tự như @ BjørnBørresen, bạn cũng có thể sử dụng type: $(this).attr('method')nếu bạn sử dụng methodthuộc tính trên biểu mẫu của mình.
djule5

2
Có thể đáng nói là kể từ jQuery 1.8, .success, .error và .complete không được dùng để ủng hộ .done, .fail và .always.
Adam

2
Nhận xét của JohnKary - bài viết tuyệt vời, có vẻ như nó không còn nữa. Đây là kho lưu trữ các sự kiện jQuery: Dừng (Mis) bằng cách sử dụng Return false
KyleMit

455

Một giải pháp tương tự khác sử dụng các thuộc tính được xác định trên phần tử biểu mẫu:

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

Bất kỳ đề xuất nào về cách thực hiện việc này nếu thuộc tính name bao gồm "."? (Yêu cầu phía máy chủ, không phải ý tưởng của tôi).
Josef Engelfrost

Bao gồm một cuộc gọi lại lỗi này để làm cho nó hoàn thành. Người ta không bao giờ biết khi nào sẽ gặp lỗi, nên luôn luôn tính đến nó.
mã hóa aaron

1
Nếu bạn không đặt phương thức hoặc hành động, chúng sẽ mặc định getvà URL hiện tại tương ứng. Có thể làm với việc thêm giả định này vào mã.
rybo111

1
Mỗi tài liệu jQuery ( api.jquery.com/submit ), frm.submit (function (event) {..}); tương đương với frm.on ("submit", function (event) {..});. Đối với tôi sau này dễ đọc hơn vì rõ ràng là bạn đang gắn một trình xử lý sự kiện vào một phần tử sẽ được thực thi khi sự kiện được kích hoạt.
mehmet

177

Có một vài điều bạn cần ghi nhớ.

1. Có một số cách để gửi biểu mẫu

  • sử dụng nút gửi
  • bằng cách nhấn enter
  • bằng cách kích hoạt một sự kiện gửi trong JavaScript
  • có thể nhiều hơn tùy thuộc vào thiết bị hoặc thiết bị trong tương lai.

Do đó, chúng ta nên liên kết với sự kiện gửi biểu mẫu , không phải sự kiện nhấn nút. Điều này sẽ đảm bảo mã của chúng tôi hoạt động trên tất cả các thiết bị và công nghệ hỗ trợ hiện tại và trong tương lai.

2. Hijax

Người dùng có thể không kích hoạt JavaScript. Không tặc mô hình rất tốt ở đây, nơi chúng tôi nhẹ nhàng kiểm soát biểu mẫu bằng JavaScript, nhưng để lại nó có thể gửi được nếu JavaScript thất bại.

Chúng ta nên lấy URL và phương thức từ biểu mẫu, vì vậy nếu HTML thay đổi, chúng ta không cần cập nhật JavaScript.

3. JavaScript không phô trương

Sử dụng event.preventDefault () thay vì trả về false là một cách làm tốt vì nó cho phép sự kiện nổi lên. Điều này cho phép các tập lệnh khác gắn vào sự kiện, ví dụ tập lệnh phân tích có thể đang theo dõi tương tác của người dùng.

Tốc độ

Tốt nhất chúng ta nên sử dụng một tập lệnh bên ngoài, thay vì chèn tập lệnh nội tuyến. Chúng tôi có thể liên kết đến phần này trong phần đầu của trang bằng cách sử dụng thẻ script hoặc liên kết với nó ở cuối trang để biết tốc độ. Kịch bản nên âm thầm nâng cao trải nghiệm người dùng, không gây cản trở.

Giả sử bạn đồng ý với tất cả những điều trên và bạn muốn nắm bắt sự kiện gửi và xử lý nó thông qua AJAX (một mẫu Hijax), bạn có thể làm một cái gì đó như thế này:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

Bạn có thể kích hoạt thủ công gửi biểu mẫu bất cứ khi nào bạn muốn thông qua JavaScript bằng cách sử dụng một cái gì đó như:

$(function() {
  $('form.my_form').trigger('submit');
});

Biên tập:

Gần đây tôi đã phải làm điều này và cuối cùng đã viết một plugin.

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

Thêm một thuộc tính tự động gửi dữ liệu vào thẻ biểu mẫu của bạn và sau đó bạn có thể làm điều này:

HTML

<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

Mã não

$(function() {
  $('form[data-autosubmit]').autosubmit();
});

2
Làm cách nào tôi có thể thêm các cuộc gọi lại vào các chức năng 'xong' và 'thất bại'? một cái gì đó như $ ('form [data-autosubmit]'). autosubmit (). thực hiện (hàm ({...}); Điều này là có thể?
Crusader

1
Xin chào @Crusader - chắc chắn, thay vì có plugin này trả lại cái này, bạn có thể yêu cầu nó trả lại sự kiện ajax, sau đó bạn có thể xâu chuỗi ngay vào nó. Thay phiên, bạn có thể có các plugin nhận được một cuộc gọi lại thành công.
siêu sáng

Tôi không thấy làm thế nào điều này ".. để nó có thể gửi được nếu JavaScript thất bại" xảy ra ở đây?
mehmet

@mmatt - Nếu JavaScript bị tắt, biểu mẫu vẫn chỉ là một biểu mẫu. Người dùng nhấp vào gửi và trình duyệt biểu mẫu dựa trên trình duyệt thông thường xảy ra. Chúng tôi gọi đây là sự tăng cường tiến bộ. Ngày nay nó không phải là một vấn đề lớn vì các trình đọc màn hình hiện đại hỗ trợ JavaScript.
siêu sáng

@mmatt - Các cuộc gọi lại lời hứa sẽ tùy chọn nhận một tham số có chứa dữ liệu.
siêu sáng

41

Bạn cũng có thể sử dụng FormData (Nhưng không có sẵn trong IE):

var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector        
$.ajax({
    type: "POST",
    url: "yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)} 
});

Đây là cách bạn sử dụng FormData .


8
Tôi thấy FormData hiện được IE10 hỗ trợ. Trong một vài năm đây sẽ là giải pháp ưa thích.
siêu sáng

3
Lợi thế của cách này là gì?
phù hợp

1
Ưu điểm của @insign là không có plugin nào cần thiết và hoạt động trên nhiều trình duyệt hiện đại.
KhoPhi

4
@insign FormData cũng có thể xử lý các tệp (nếu có một trường như vậy trong biểu mẫu của bạn) trong khi serialization () chỉ cần bỏ qua nó.
mehmet

Uncaught TypeError: Không thể xây dựng 'FormData': tham số 1 không phải là loại 'HTMLFormEuity'
rahim.nagori

28

Phiên bản đơn giản (không gửi hình ảnh)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

Sao chép và dán ajaxification của một hình thức hoặc tất cả các hình thức trên một trang

Đây là phiên bản sửa đổi của câu trả lời của Alfrekjv

  • Nó sẽ hoạt động với jQuery> = 1.3.2
  • Bạn có thể chạy nó trước khi tài liệu đã sẵn sàng
  • Bạn có thể xóa và thêm lại biểu mẫu và nó sẽ vẫn hoạt động
  • Nó sẽ đăng lên cùng một vị trí như biểu mẫu thông thường, được chỉ định trong thuộc tính "hành động" của biểu mẫu

JavaScript

jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

Tôi muốn chỉnh sửa câu trả lời của Alfrekjv nhưng đã sai lệch quá nhiều so với nó nên đã quyết định đăng bài này thành một câu trả lời riêng biệt.

Không gửi tệp, không hỗ trợ các nút, ví dụ: nhấp vào nút (bao gồm nút gửi) sẽ gửi giá trị của nó dưới dạng dữ liệu biểu mẫu, nhưng vì đây là yêu cầu ajax nên nhấp vào nút sẽ không được gửi.

Để hỗ trợ các nút, bạn có thể chụp nút bấm thực tế thay vì gửi.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

Về phía máy chủ, bạn có thể phát hiện yêu cầu ajax với tiêu đề này mà jquery đặt HTTP_X_REQUESTED_WITH cho php

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

Làm thế nào điều này sẽ làm việc nếu bạn DID muốn gửi một tập tin với hình thức này?
Yami Medina

1
@YamiMedina đó không phải là một giải pháp đơn giản, bạn cần gửi toàn bộ yêu cầu theo một định dạng khác (định dạng nhiều phần) với dữ liệu tệp
Timo Huovinen

22

Mã này hoạt động ngay cả với đầu vào tập tin

$(document).on("submit", "form", function(event)
{
    event.preventDefault();        
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        
});

3
Chỉ cần lưu ý formData () là IE10 + developer.mozilla.org/en-US/docs/Web/API/FormData
Chris Hopkins

1
dataType: 'json' rất quan trọng nếu bạn muốn sử dụng form.serialize ()
David Morrow

wow, FormData này thật tuyệt vời! trong trường hợp ai đó cần: Array.from(new FormData(form))lặp đi lặp lại qua trình lặp formdata này :)
test30

13

Tôi thực sự thích câu trả lời này bởi superluminary và đặc biệt là cách anh ấy gói là giải pháp trong một plugin jQuery . Vì vậy, cảm ơn superluminary cho một câu trả lời rất hữu ích. Tuy nhiên, trong trường hợp của tôi, tôi muốn một plugin cho phép tôi xác định trình xử lý sự kiện thành cônglỗi bằng các tùy chọn khi plugin được khởi tạo.

Vì vậy, đây là những gì tôi đã đưa ra:

;(function(defaults, $, undefined) {
    var getSubmitHandler = function(onsubmit, success, error) {
        return function(event) {
            if (typeof onsubmit === 'function') {
                onsubmit.call(this, event);
            }
            var form = $(this);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize()
            }).done(function() {
                if (typeof success === 'function') {
                    success.apply(this, arguments);
                }
            }).fail(function() {
                if (typeof error === 'function') {
                    error.apply(this, arguments);
                }
            });
            event.preventDefault();
        };
    };
    $.fn.extend({
        // Usage:
        // jQuery(selector).ajaxForm({ 
        //                              onsubmit:function() {},
        //                              success:function() {}, 
        //                              error: function() {} 
        //                           });
        ajaxForm : function(options) {
            options = $.extend({}, defaults, options);
            return $(this).each(function() {
                $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
            });
        }
    });
})({}, jQuery);

Plugin này cho phép tôi rất dễ dàng "ajaxify" các biểu mẫu html trên trang và cung cấp các trình xử lý sự kiện onsubmit , thành cônglỗi để triển khai phản hồi cho người dùng về trạng thái của biểu mẫu gửi. Điều này cho phép các plugin được sử dụng như sau:

 $('form').ajaxForm({
      onsubmit: function(event) {
          // User submitted the form
      },
      success: function(data, textStatus, jqXHR) {
          // The form was successfully submitted
      },
      error: function(jqXHR, textStatus, errorThrown) {
          // The submit action failed
      }
 });

Lưu ý rằng các trình xử lý sự kiện thành cônglỗi nhận cùng các đối số mà bạn sẽ nhận được từ các sự kiện tương ứng của phương thức ajax jQuery .


9

Tôi đã nhận được những điều sau đây cho tôi:

formSubmit('#login-form', '/api/user/login', '/members/');

Ở đâu

function formSubmit(form, url, target) {
    $(form).submit(function(event) {
        $.post(url, $(form).serialize())
            .done(function(res) {
                if (res.success) {
                    window.location = target;
                }
                else {
                    alert(res.error);
                }
            })
            .fail(function(res) {
                alert("Server Error: " + res.status + " " + res.statusText);

            })
        event.preventDefault();
    });
}

Điều này giả sử bài đăng thành 'url' trả về ajax ở dạng {success: false, error:'my Error to display'}

Bạn có thể thay đổi điều này như bạn muốn. Hãy sử dụng đoạn trích đó.


1
Cái gì targetở đây? Tại sao bạn lại gửi biểu mẫu với AJAX, chỉ để chuyển hướng đến một trang mới?
1252748

9

Biểu mẫu gửi AJAX của jQuery , không có gì ngoài việc gửi biểu mẫu bằng ID biểu mẫu khi bạn nhấp vào nút

Vui lòng làm theo các bước

Bước 1 - Thẻ biểu mẫu phải có trường ID

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

Nút mà bạn sẽ nhấp

<button>Save</button>

Bước 2 - gửi sự kiện trong jQuery giúp gửi biểu mẫu. trong đoạn mã dưới đây, chúng tôi đang chuẩn bị yêu cầu JSON từ tên thành phần HTML .

$("#submitForm").submit(function(e) {
    e.preventDefault();
    var frm = $("#submitForm");
    var data = {};
    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });
    $.ajax({
        contentType:"application/json; charset=utf-8",
        type:frm.attr("method"),
        url:frm.attr("action"),
        dataType:'json',
        data:JSON.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

để xem demo trực tiếp, nhấp vào liên kết dưới đây

Làm cách nào để gửi Biểu mẫu bằng jQuery AJAX?


5

xem xét sử dụng closest

$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });

5

Tôi biết đây là một jQuerycâu hỏi liên quan, nhưng ngày nay với JS ES6 mọi thứ dễ dàng hơn nhiều. Vì không có javascriptcâu trả lời thuần túy , tôi nghĩ rằng tôi có thể thêm một javascriptgiải pháp thuần túy đơn giản cho vấn đề này, theo ý kiến ​​của tôi thì sạch sẽ hơn nhiều, bằng cách sử dụng fetch()API. Đây là một cách hiện đại để thực hiện các yêu cầu mạng. Trong trường hợp của bạn, vì bạn đã có một yếu tố biểu mẫu, chúng tôi chỉ cần sử dụng nó để xây dựng yêu cầu của chúng tôi.

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

4

Để tránh gửi nhiều formdata:

Đừng quên hủy liên kết gửi sự kiện, trước khi biểu mẫu được gửi lại, Người dùng có thể gọi hàm sumbit nhiều lần, có thể anh ta đã quên điều gì đó hoặc là lỗi xác thực.

 $("#idForm").unbind().submit( function(e) {
  ....

4

Nếu bạn đang sử dụng biểu mẫu .serialize () - bạn cần đặt cho mỗi phần tử biểu mẫu một tên như thế này:

<input id="firstName" name="firstName" ...

Và hình thức được tuần tự như thế này:

firstName=Chris&lastName=Halcrow ...

4

Bạn có thể sử dụng chức năng này trên trình gửi như dưới đây.

Biểu mẫu HTML

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

Hàm jQuery:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

Để biết thêm chi tiết và mẫu Truy cập: http://www.spiderscode.com/simple-ajax-contact-form/


2

Đây không phải là câu trả lời cho câu hỏi của OP,
nhưng trong trường hợp nếu bạn không thể sử dụng DOM dạng tĩnh, bạn cũng có thể thử như thế này.

var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});

2

Thử

fetch(form.action,{method:'post', body: new FormData(form)});


1

Chỉ cần một lời nhắc nhở thân thiện datacũng có thể là một đối tượng:

$('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo',
            'bar': 'some-bar'
        }
    }).always(function (data) {
        console.log(data);
    });

    return false;
});

1

JavaScript

(function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');


   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});


}(jQuery));

HTML

    <ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

-21

Ngoài ra còn có sự kiện gửi, có thể được kích hoạt như $ ("# form_id") này. ((). Bạn sẽ sử dụng phương pháp này nếu biểu mẫu đã được thể hiện tốt trong HTML. Bạn chỉ cần đọc trong trang, điền các biểu mẫu đầu vào bằng công cụ, sau đó gọi .submit (). Nó sẽ sử dụng phương thức và hành động được xác định trong khai báo của biểu mẫu, vì vậy bạn không cần phải sao chép nó vào javascript của mình.

ví dụ


58
nếu bạn xóa bài đăng của mình, bạn sẽ nhận được các điểm phạt đã bị lấy lại từ bạn.
Sparkyspider

2
Điều này sẽ gửi biểu mẫu, nhưng không thông qua AJAX, vì vậy không trả lời câu hỏi.
siêu sáng

11
những gì @spider nói, cộng với việc bạn nhận được một huy hiệu đẹp gọi là "áp lực ngang hàng"
Nurettin
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.