Làm cách nào để tôi nắm bắt phản hồi của form.submit

Tôi có đoạn mã sau:

<script type="text/javascript">
        function SubmitForm()
        {

            form1.submit();
        }

        function ShowResponse()
        {

        }
</script>
.
.
.
<div>
    <a href="#" onclick="SubmitForm();">Click</a>
</div>

Tôi muốn nắm bắt phản hồi html của form1.submit? Làm thế nào để tôi làm điều này? Tôi có thể đăng ký bất kỳ hàm gọi lại nào cho phương thức form1.submit không?

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 của 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à, submit()hàm không thực sự trả về bất cứ thứ 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 bằng Javascript (không cần làm mới trang), 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à Form sẽ thực hiện chính xác những gì nó nghe giống như 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);
        }
    })
;

Một lựa chọn thay thế Ajax là đặt vô hình <iframe>làm mục tiêu của biểu mẫu của bạn và đọc nội dung của mục đó <iframe>trong mục đóonload trình xử lý . Nhưng tại sao phải bận tâm khi có Ajax?

Lưu ý: Tôi chỉ muốn đề cập đến phương án 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.

Cách Javascript vanilla không phải 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 POSTloại nội dung mặc định là "application / x-www-form-urlencoding" khớp với nội dung 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 chỉnh sửa bằng cách nào đó, hãy xem ở đây để biết một số chi tiết khó chịu.

Tôi đang làm theo cách này và nó hoạt động.

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

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

Đối với các trình duyệt mới (kể từ 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), fetchlà một API tiêu chuẩn giúp đơn giản hóa các cuộc gọi mạng không đồng bộ (mà chúng ta thường cần XMLHttpRequesthoặc jQuery $.ajax).

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

<form id="myFormId" action="/api/process/form" method="post">
    <!-- form fields here -->
    <button type="submit">SubmitAction</button>
</form>

Nếu một biểu mẫu như ở trên được trao cho bạn (hoặc bạn đã tạo nó vì nó là html ngữ nghĩa), thì bạn có thể gói fetchmã 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((resp) => {
        return resp.json(); // or resp.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});

(Hoặc, nếu như người đăng ban đầu bạn muốn gọi thủ công mà không cần gửi sự kiện, chỉ cần đặt fetchmã ở đó và chuyển tham chiếu đến formphần tử thay vì sử dụngevent.target .)

Tài liệu:

Lấy 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_ENC_JavaScript Trang đó trong năm 2018 không đề cập đến tìm nạp (chưa). Nhưng nó đề cập rằng thủ thuật target = "myIFrame" không được dùng nữa. Và nó cũng có một ví dụ về form.addEventListener cho sự kiện 'gửi'.

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

Khi bạn làm form1.submit(); thông tin mẫu được gửi đến máy chủ web.

WebServer sẽ làm bất cứ điều gì cần 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 ().

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 nắm bắt 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 onload()sự kiện của iframe .

Bạn có thể event.preventDefault()trong trình xử lý nhấp chuột cho nút gửi của mình để đảm bảo rằng submitsự kiện mặc định của biểu mẫu HTML không kích hoạt (đó là điều dẫn đến việc 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 <form>và type="submit"điều đó đ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 chuột làm mới trang.

Nếu bạn muốn vẫn sử dụng <form>, và bạn không muốn viết tùy chỉnh kích xử lý, bạn có thể sử dụng jQuery của ajaxphương pháp, trong đó tóm tắt toàn bộ vấn đề lập tức cho bạn bằng cách phơi bày các phương pháp hứa hẹn cho success, errorvv

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

• ngăn chặn hành vi mặc định trong chức năng xử lý bằng cách sử dụng event.preventDefault()

• sử dụng các yếu tố không có hành vi mặc định (ví dụ: <form> )

• sử dụng jQuery ajax

(tôi chỉ nhận thấy câu hỏi này là từ năm 2008, không biết tại sao nó lại xuất hiện trong nguồn cấp dữ liệu của tôi; với bất kỳ giá nào, hy vọng đây là một câu trả lời rõ ràng)

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

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

<script type='text/javascript'>
/* 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()} );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});
</script>

Trong trường hợp bạn muốn nắm bắt đầu ra của một 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 "Kích hoạt tính năng ghi nhật ký XMXHTTPRequest"
4. Sau khi thực hiện điều đó mỗi khi bạn thực hiện một yêu cầu AJAX, một thông báo bắt đầu bằng "XHR đã tải xong: 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ẽ đưa ra "tab Tài nguyên" nơi bạn có thể thấy các tiêu đề và nội dung của phản hồi!

    $.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
        }
    });

Dựa trên câu trả lời của @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), tôi xử lý lỗi bài đăng mẫu và 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 this để logic của tôi có thể được sử dụng lại, tôi hy vọng HTML sẽ được trả lại thành công vì vậy tôi kết xuất nó và thay thế trang hiện tại, và trong trường hợp của tôi, tôi mong đợi một chuyển hướng đến trang đăng nhập nếu phiên hết thời gian, vì vậy Tôi chặn chuyển hướng đó để duy trì trạng thái của trang.

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

Bạn cần 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.

Bạn có thể làm điều đó bằng cách sử dụng công nghệ javascript và AJAX. Có một cái nhìn vào jquery và ở dạng này cắm vào . Bạn chỉ cần bao gồm hai tệp js để đăng ký gọi lại cho form.submit.

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function submitform() {
      $.ajax({
        headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
        },
        type: "POST",
        url : "/hello.hello",
        dataType : "json",
        data : JSON.stringify({"hello_name": "hello"}),
        error: function () {
          alert('loading Ajax failure');
        },
    	onFailure: function () {
          alert('Ajax Failure');
    	},
    	statusCode: {
          404: function() {
          alert("missing info");
          }   
    	},
        success : function (response) {
          alert("The server says: " + JSON.stringify(response));
        }
      })
      .done(function( data ) {
        $("#result").text(data['hello']);
      });
};</script>

 $(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        $.ajax({
            url : "<wiki:action path='/your struts action'/>",//path of url where u want to submit form
            type : "POST",
            data : $(this).serialize(),
            success : function(data) {
                var treeMenuFrame = parent.frames['wikiMenu'];
                if (treeMenuFrame) {
                    treeMenuFrame.location.href = treeMenuFrame.location.href;
                }
                var contentFrame = parent.frames['wikiContent'];
                contentFrame.document.open();
                contentFrame.document.write(data);
                contentFrame.document.close();
            }
        });
    });
});

Blockquote

tất cả đều sử dụng $ (tài liệu). yet (function ()) bên trong việc sử dụng này ('formid'). submit (function (event)) và sau đó ngăn chặn hành động mặc định mà gọi biểu mẫu ajax $ .ajax ({,,, ,}); nó sẽ lấy tham số u có thể chọn theo yêu cầu của bạn sau đó gọi thành công afeft: function (data) {// làm bất cứ điều gì bạn muốn ví dụ của tôi để đưa html phản hồi lên div}

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

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

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

$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data) {
if(data){
//do true 
}
else
{
//do false
}

});

Tôi có mã Theo dõi chạy hoàn toàn 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!");
        }


    });


//

}

Bạn có thể sử dụng jQuery.post () và trả về các 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 thực / vệ sinh dữ liệu của bạn trực tiếp 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 trên máy khách.

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

I. Bộ phận khách hàng:

Phần Ia HTML:

<form id="user_profile_form">
  <label for="first_name"><input type="text" name="first_name" id="first_name" required />First name</label>
  <label for="family_name"><input type="text" name="family_name" id="family_name" required />Family name</label>
  <label for="email"><input type="email" name="email" id="email" required />Email</label> 
  <input type="submit" value="Save changes" id="submit" />
</form>

Phần Ib Script:

$(function () {
    $("#user_profile_form").submit(function(event) {
      event.preventDefault();
      var postData = {
        first_name: $('#first_name').val(),
        family_name: $('#family_name').val(),
        email: $('#email').val()
      };
      $.post("/saveprofilechanges.php", postData,
        function(data) {
          var json = jQuery.parseJSON(data);
          if (json.ExceptionMessage != undefined) {
            alert(json.ExceptionMessage); // the exception from the server
            $('#' + json.Field).focus(); // focus the specific field to fill in
          }
          if (json.SuccessMessage != undefined) {
            alert(json.SuccessMessage); // the success message from server
          }
       });
    });
});

II. Phần máy chủ (saveprofilechanges.php):

$data = $_POST;
if (!empty($data) && is_array($data)) {
    // Some data validation:
    if (empty($data['first_name']) || !preg_match("/^[a-zA-Z]*$/", $data['first_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "First name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'first_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['family_name']) || !preg_match("/^[a-zA-Z ]*$/", $data['family_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "Family name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'family_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
       echo json_encode(array(
         'ExceptionMessage' => "Email missing or incorrectly formatted. Please enter it again.",
         'Field' => 'email' // Form field to focus in client form
       ));
       return FALSE;
    }
    // more actions..
    // more actions..
    try {
       // Some save to database or other action..:
       $this->User->update($data, array('username=?' => $username));
       echo json_encode(array(
         'SuccessMessage' => "Data saved!"
       ));
       return TRUE;
    } catch (Exception $e) {
       echo json_encode(array(
         'ExceptionMessage' => $e->getMessage()
       ));
       return FALSE;
    }
}

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

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

.. .. ..

và sau đó trong "action.php"

rồi sau frmLogin.submit ();

đọc biến $ submit_return ..

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

chúc may mắn.