Hướng dẫn how to check form submit success in javascript - cách kiểm tra thành công gửi biểu mẫu trong javascript

Bạn sẽ không thể làm điều này một cách dễ dàng với JavaScript đơn giản. Khi bạn đăng một biểu mẫu, các đầu vào biểu mẫu được gửi đến máy chủ và trang của bạn được làm mới - dữ liệu được xử lý ở phía máy chủ. Đó là, hàm

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);
7 không thực sự trả về bất cứ điều gì, nó chỉ gửi dữ liệu biểu mẫu đến máy chủ.

Nếu bạn thực sự muốn nhận được phản hồi trong JavaScript (không có trang làm mới), thì bạn sẽ cần sử dụng AJAX và khi bạn bắt đầu nói về việc sử dụng AJAX, bạn sẽ cần sử dụng thư viện. JQuery là phổ biến nhất và yêu thích cá nhân của tôi. Có một plugin tuyệt vời cho jQuery có tên là biểu mẫu sẽ làm chính xác những gì bạn muốn.

Đây là cách bạn sử dụng jQuery và plugin đó:

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;

Đã trả lời ngày 17 tháng 12 năm 2008 lúc 14:25Dec 17, 2008 at 14:25

Hướng dẫn how to check form submit success in javascript - cách kiểm tra thành công gửi biểu mẫu trong javascript

Nickfnickfnickf

528K198 Huy hiệu vàng643 Huy hiệu bạc720 Huy hiệu đồng198 gold badges643 silver badges720 bronze badges

4

Cách thức Vanilla JavaScript không phải là JQuery, được trích xuất từ ​​nhận xét của 12me21:

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);

Đối với ________ 18, loại nội dung mặc định là "Ứng dụng/X-www-form-urlencoded" phù hợp với những gì chúng tôi đang gửi trong đoạn trích trên. Nếu bạn muốn gửi "những thứ khác" hoặc điều chỉnh nó bằng cách nào đó, hãy xem ở đây để biết một số chi tiết gritty nitty.

Đã trả lời ngày 6 tháng 12 năm 2017 lúc 13:19Dec 6, 2017 at 13:19

Rogerdpackrogerdpackrogerdpack

59.2K35 Huy hiệu vàng253 Huy hiệu bạc367 Huy hiệu đồng35 gold badges253 silver badges367 bronze badges

4

Một giải pháp thay thế AJAX là đặt một

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);
9 vô hình làm mục tiêu của biểu mẫu của bạn và đọc nội dung của
var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);
9 trong trình xử lý
1 của nó. Nhưng tại sao phải bận tâm khi có ajax?

Lưu ý: Tôi chỉ muốn đề cập đến giải pháp thay thế này vì một số câu trả lời cho rằng không thể đạt được điều này nếu không có Ajax. I just wanted to mention this alternative since some of the answers claim that it's impossible to achieve this without Ajax.

Đã trả lời ngày 17 tháng 12 năm 2008 lúc 14:27Dec 17, 2008 at 14:27

Ates Goralates GoralAtes Goral

Huy hiệu vàng 135K2626 gold badges135 silver badges189 bronze badges

7

Những người tìm kiếm internet trong tương lai:

Đối với các trình duyệt mới (tính đến năm 2018: Chrome, Firefox, Safari, Opera, Edge và hầu hết các trình duyệt di động, nhưng không phải IE),

2 là API tiêu chuẩn đơn giản hóa các cuộc gọi mạng không đồng bộ (mà chúng tôi đã từng cần
3 hoặc jQuery's
4) .
2 is a standard API that simplifies asynchronous network calls
(for which we used to need
3 or jQuery's
4).

Đây là một hình thức truyền thống:

Nếu một biểu mẫu như ở trên được trao cho bạn (hoặc bạn đã tạo nó bởi vì nó là HTML ngữ nghĩa), thì bạn có thể gói mã

2 trong trình nghe sự kiện như dưới đây:

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});

.

Docs:

Tìm nạp: https://developer.mozilla.org/en-us/docs/web/api/fetch_api

Khác: https://developer.mozilla.org/en-us/docs/learn/html/forms/sending_forms_through_javascript trang đó vào năm 2018 chưa đề cập đến Fetch (chưa). Nhưng nó đề cập rằng thủ thuật Target = "Myiframe" không được chấp nhận. Và nó cũng có một ví dụ về Form.AddeventListener cho sự kiện 'gửi'.

Đã trả lời ngày 7 tháng 8 năm 2018 lúc 15:08Aug 7, 2018 at 15:08

MarcusmarcusMarcus

3.0411 Huy hiệu vàng25 Huy hiệu bạc22 Huy hiệu đồng1 gold badge25 silver badges22 bronze badges

2

Tôi đang làm theo cách này và nó làm việc.

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});

Punit s

2.8311 Huy hiệu vàng20 Huy hiệu bạc25 Huy hiệu đồng1 gold badge20 silver badges25 bronze badges

Đã trả lời ngày 21 tháng 3 năm 2014 lúc 19:24Mar 21, 2014 at 19:24

rajesh_kwrajesh_kwrajesh_kw

1.54216 huy hiệu bạc14 Huy hiệu đồng16 silver badges14 bronze badges

5

Tôi không chắc chắn rằng bạn hiểu những gì gửi () làm ...

Khi bạn thực hiện

9, thông tin biểu mẫu được gửi đến máy chủ web.

Máy chủ web sẽ làm bất cứ điều gì mà họ phải làm và trả lại một trang web hoàn toàn mới cho khách hàng (thường là cùng một trang với một cái gì đó đã thay đổi).

Vì vậy, không có cách nào bạn có thể "bắt" sự trở lại của một hành động form.submit ().

Đã trả lời ngày 17 tháng 12 năm 2008 lúc 14:20Dec 17, 2008 at 14:20

SergiosergioSergio

8.05710 Huy hiệu vàng46 Huy hiệu bạc77 Huy hiệu đồng10 gold badges46 silver badges77 bronze badges

2

Không có cuộc gọi lại. Nó giống như theo một liên kết.

Nếu bạn muốn ghi lại phản hồi của máy chủ, hãy sử dụng AJAX hoặc đăng nó lên iframe và lấy những gì xuất hiện ở đó sau sự kiện

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});
0 của iframe.

Đã trả lời ngày 17 tháng 12 năm 2008 lúc 14:20Dec 17, 2008 at 14:20

0

Sergiosergio

8.05710 Huy hiệu vàng46 Huy hiệu bạc77 Huy hiệu đồng

Không có cuộc gọi lại. Nó giống như theo một liên kết.


Nếu bạn muốn ghi lại phản hồi của máy chủ, hãy sử dụng AJAX hoặc đăng nó lên iframe và lấy những gì xuất hiện ở đó sau sự kiện

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});
0 của iframe.

Bạn có thể

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});
1 trong trình xử lý nhấp chuột cho nút gửi của mình để đảm bảo rằng sự kiện HTML Formed
document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});
2 không bắn (đó là điều dẫn đến trang làm mới trang).

Một cách khác là sử dụng đánh dấu hình thức Hackier: đó là việc sử dụng

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});
3 và
document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});
4 đang cản trở hành vi mong muốn ở đây; Vì những điều này cuối cùng dẫn đến các sự kiện nhấp vào làm mới trang.

Nếu bạn vẫn muốn sử dụng

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});
3 và bạn không muốn viết trình xử lý nhấp chuột tùy chỉnh, bạn có thể sử dụng phương thức
document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});
6 của JQuery, trong đó tóm tắt toàn bộ vấn đề cho bạn bằng cách phơi bày các phương thức hứa hẹn cho
document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});
7,
document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json(); // or response.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});
8, v.v.


Để tóm tắt lại, bạn có thể giải quyết vấn đề của mình bằng một trong hai:

Đã trả lời ngày 11 tháng 5 năm 2015 lúc 20:42May 11, 2015 at 20:42

Hướng dẫn how to check form submit success in javascript - cách kiểm tra thành công gửi biểu mẫu trong javascript

Benny Schmidtbenny SchmidtBenny Schmidt

3.1401 Huy hiệu vàng18 Huy hiệu bạc14 Huy hiệu đồng1 gold badge18 silver badges14 bronze badges

    $.ajax({
        url: "/users/login/",    //give your url here
        type: 'POST',
        dataType: "json",
        data: logindata,
        success: function ( data ){
        //  alert(data);    do your stuff
        },
        error: function ( data ){
        //  alert(data);    do your stuff
        }
    });

Đã trả lời ngày 29 tháng 4 năm 2016 lúc 7:43Apr 29, 2016 at 7:43

0

Đây là mã của tôi cho vấn đề này:

Đã trả lời ngày 20 tháng 7 năm 2016 lúc 7:04Jul 20, 2016 at 7:04

Trong trường hợp bạn muốn nắm bắt đầu ra của yêu cầu AJAX bằng Chrome, bạn có thể làm theo các bước đơn giản sau:

  1. Mở hộp công cụ lập trình viên
  2. Đi đến bàn điều khiển và ngay bất cứ nơi nào bên trong nó
  3. Trong menu xuất hiện, nhấp vào "Bật XMXHTTPrequest Ghi nhật ký"
  4. Sau khi thực hiện điều đó mỗi khi bạn thực hiện yêu cầu AJAX bắt đầu bằng "XHR hoàn thành tải: http: // ......" sẽ xuất hiện trong bảng điều khiển của bạn.
  5. Nhấp vào liên kết xuất hiện, sẽ mang "tab tài nguyên" nơi bạn có thể xem các tiêu đề và nội dung của phản hồi!

Đã trả lời ngày 7 tháng 10 năm 2010 lúc 15:29Oct 7, 2010 at 15:29

Dựa trên câu trả lời của @rajesh_kw (https://stackoverflow.com/a/22567796/4946681), tôi xử lý các lỗi sau và thành công của mẫu: thành công:

    $('#formName').on('submit', function(event) {
        event.preventDefault(); // or return false, your choice
        $.ajax({
            url: $(this).attr('action'),
            type: 'post',
            data: $(this).serialize(),
            success: function(data, textStatus, jqXHR) {
                // if success, HTML response is expected, so replace current
                if(textStatus === 'success') {
                    // https://stackoverflow.com/a/1236378/4946681
                    var newDoc = document.open('text/html', 'replace');
                    newDoc.write(data);
                    newDoc.close();
                }
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            if(jqXHR.status == 0 || jqXHR == 302) {
                alert('Your session has ended due to inactivity after 10 minutes.\nPlease refresh this page, or close this window and log back in to system.');
            } else {
                alert('Unknown error returned while saving' + (typeof errorThrown == 'string' && errorThrown.trim().length > 0 ? ':\n' + errorThrown : ''));
            }
        });
    });

Tôi sử dụng

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});
2 để logic của tôi có thể tái sử dụng, tôi hy vọng HTML sẽ được trả lại thành công để tôi hiển thị nó và thay thế trang hiện tại và trong trường hợp của tôi, tôi mong đợi chuyển hướng đến trang đăng nhập nếu phiên được hết thời gian, và Vì vậy, tôi chặn chuyển hướng đó để bảo tồn trạng thái của trang.

Bây giờ người dùng có thể đăng nhập qua một tab khác và thử lại gửi của họ.

Đã trả lời ngày 8 tháng 9 năm 2016 lúc 21:58Sep 8, 2016 at 21:58

Hướng dẫn how to check form submit success in javascript - cách kiểm tra thành công gửi biểu mẫu trong javascript

NatenateNate

1.22611 huy hiệu bạc18 Huy hiệu đồng11 silver badges18 bronze badges

Tôi có mã sau khi chạy hoàn hảo bằng cách sử dụng Ajax với dữ liệu biểu mẫu nhiều phần

function getUserDetail()
{
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var phoneNumber = document.getElementById("phoneNumber").value;
    var gender =$("#userForm input[type='radio']:checked").val();
    //var gender2 = document.getElementById("gender2").value;
    //alert("fn"+firstName+lastName+username+email);
    var roleIndex = document.getElementById("role");
    var role = roleIndex.options[roleIndex.selectedIndex].value;
    var jobTitleIndex = document.getElementById("jobTitle");
    var jobTitle = jobTitleIndex.options[jobTitleIndex.selectedIndex].value;
    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var addressLine1 = document.getElementById("addressLine1").value;
    var addressLine2 = document.getElementById("addressLine2").value;
    var streetRoad = document.getElementById("streetRoad").value;

    var countryIndex = document.getElementById("country");
    var country = countryIndex.options[countryIndex.selectedIndex].value;

    var stateIndex = document.getElementById("state");
    var state = stateIndex.options[stateIndex.selectedIndex].value;

    var cityIndex = document.getElementById("city");
    var city = cityIndex.options[cityIndex.selectedIndex].value;



    var pincode = document.getElementById("pincode").value;

    var branchIndex = document.getElementById("branch");
    var branch = branchIndex.options[branchIndex.selectedIndex].value;

    var language = document.getElementById("language").value;
    var profilePicture = document.getElementById("profilePicture").value;
    //alert(profilePicture);
    var addDocument = document.getElementById("addDocument").value;


    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var data = new FormData();
    data.append('firstName', firstName);
    data.append('lastName', lastName);
    data.append('username', username);
    data.append('email', email);
    data.append('phoneNumber', phoneNumber);
    data.append('role', role);
    data.append('jobTitle', jobTitle);
    data.append('gender', gender);
    data.append('shiftId', shiftId);
    data.append('lastName', lastName);
    data.append('addressLine1', addressLine1);
    data.append('addressLine2', addressLine2);
    data.append('streetRoad', streetRoad);
    data.append('country', country);
    data.append('state', state);
    data.append('city', city);
    data.append('pincode', pincode);
    data.append('branch', branch);
    data.append('language', language);
    data.append('profilePicture', $('#profilePicture')[0].files[0]);
     for (var i = 0; i < $('#document')[0].files.length; i++) {
            data.append('document[]', $('#document')[0].files[i]);
        }



    $.ajax({
        //url : '${pageContext.request.contextPath}/user/save-user',
        type: "POST",
        Accept: "application/json",
        async: true,
        contentType:false,
        processData: false,
        data: data,
        cache: false,

        success : function(data) {      
            reset();
            $(".alert alert-success alert-div").text("New User Created Successfully!");
         },
       error :function(data, textStatus, xhr){
           $(".alert alert-danger alert-div").text("new User Not Create!");
        }


    });


//

}

Đã trả lời ngày 26 tháng 7 năm 2017 lúc 4:07Jul 26, 2017 at 4:07

Hướng dẫn how to check form submit success in javascript - cách kiểm tra thành công gửi biểu mẫu trong javascript

Bạn cần phải sử dụng ajax. Gửi biểu mẫu thường dẫn đến trình duyệt tải một trang mới.

Đã trả lời ngày 17 tháng 12 năm 2008 lúc 14:19Dec 17, 2008 at 14:19

Sblundysblundysblundy

60.1K22 Huy hiệu vàng120 Huy hiệu bạc123 Huy hiệu Đồng22 gold badges120 silver badges123 bronze badges

Bạn có thể làm điều đó bằng cách sử dụng công nghệ JavaScript và Ajax. Hãy xem jQuery và ở dạng cắm biểu mẫu này. Bạn chỉ cần bao gồm hai tệp JS để đăng ký một cuộc gọi lại cho biểu mẫu.Submit.

Đã trả lời ngày 17 tháng 12 năm 2008 lúc 14:24Dec 17, 2008 at 14:24

Kgiannakakiskgiannakakiskgiannakakis

102K27 Huy hiệu vàng159 Huy hiệu bạc193 Huy hiệu Đồng27 gold badges159 silver badges193 bronze badges

Bạn có thể thực hiện điều này bằng cách sử dụng JQuery và phương thức

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});
3:


Hướng dẫn how to check form submit success in javascript - cách kiểm tra thành công gửi biểu mẫu trong javascript

Drenmi

8.3624 Huy hiệu vàng41 Huy hiệu bạc51 Huy hiệu Đồng4 gold badges41 silver badges51 bronze badges

Đã trả lời ngày 12 tháng 10 năm 2015 lúc 5:52Oct 12, 2015 at 5:52

Trước hết chúng ta sẽ cần serializeObject ();

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);
0

Sau đó, bạn thực hiện một bài viết cơ bản và nhận được phản hồi

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);
1

Đã trả lời ngày 14 tháng 6 năm 2017 lúc 15:33Jun 14, 2017 at 15:33

Bạn có thể sử dụng jquery.post () và trả về câu trả lời JSON có cấu trúc độc đáo từ máy chủ. Nó cũng cho phép bạn xác nhận/vệ sinh trực tiếp dữ liệu của mình trên máy chủ, đây là một cách tốt vì nó an toàn hơn (và thậm chí dễ dàng hơn) so với thực hiện điều này trên máy khách.

Ví dụ: nếu bạn cần đăng biểu mẫu HTML lên máy chủ (để SaveProfileChange.php) với dữ liệu người dùng để đăng ký đơn giản:

I. Các bộ phận của khách hàng:

I.A. Phần HTML:

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);
2

I.B. Phần kịch bản:

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);
3

Ii. Phần máy chủ (SaveProfileChange.php):

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);
4

Đã trả lời ngày 1 tháng 11 năm 2017 lúc 16:02Nov 1, 2017 at 16:02

VladovladoVlado

3.17724 Huy hiệu bạc21 Huy hiệu đồng24 silver badges21 bronze badges

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);
5

Trước hết, sử dụng

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});
4 bên trong việc sử dụng này
$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});
5 và sau đó ngăn chặn hành động mặc định sau khi gọi Ajax Form nộp
$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});
6

Nó sẽ lấy tham số u có thể chọn theo yêu cầu của bạn sau đó gọi một hàm

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);
6

marc_s

716K172 Huy hiệu vàng1316 Huy hiệu bạc1435 Huy hiệu Đồng172 gold badges1316 silver badges1435 bronze badges

Đã trả lời ngày 7 tháng 12 năm 2016 lúc 12:30Dec 7, 2016 at 12:30

Bạn có thể làm điều đó mà không cần Ajax.

Viết của bạn như dưới đây.

.. .. ..

Và sau đó trong "Action.php"

sau đó sau frmlogin.submit ();

Đọc Biến $ BÀI VIẾT_RETURN ..

$ bound_return chứa giá trị trả về.

chúc may mắn.

Đã trả lời ngày 11 tháng 7 năm 2015 lúc 17:56Jul 11, 2015 at 17:56

Làm thế nào tôi có thể hiển thị dữ liệu biểu mẫu sau khi gửi?

Thuộc tính FormTarget chỉ định tên hoặc từ khóa cho biết nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu.Thuộc tính FormTarget ghi đè thuộc tính đích của phần tử.Lưu ý: Thuộc tính FormTarget là mới cho phần tử có loại = "Gửi" trong HTML5.. The formtarget attribute overrides the target attribute of the
element. Note: The formtarget attribute is new for the element with type="submit" in HTML5.

Điều gì xảy ra trên biểu mẫu Gửi JavaScript?

Việc gửi sự kiện bắn khi người dùng nhấp vào nút Gửi (hoặc) hoặc nhấn ENTER trong khi chỉnh sửa trường (ví dụ:) trong một biểu mẫu.Sự kiện không được gửi đến biểu mẫu khi gọi biểu mẫu.gửi () phương thức trực tiếp.fires when the user clicks a submit button (

Phương thức gửi () được sử dụng cho cái gì?

Phương thức Sublem () trong HTML DOM được sử dụng để gửi dữ liệu biểu mẫu đến máy chủ web.to send the form data to the web-server.

Làm cách nào để nhận dữ liệu biểu mẫu với JavaScript?

Phương thức serializeArray () tạo ra một mảng các đối tượng (tên và giá trị) bằng cách nối tiếp các giá trị biểu mẫu.Phương pháp này có thể được sử dụng để có được dữ liệu biểu mẫu.. This method can be used to get the form data.