Cách gửi biểu mẫu HTML mà không cần chuyển hướng

Nếu tôi có một biểu mẫu như thế này,

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>

làm cách nào để tôi có thể gửi nó mà không chuyển hướng đến một chế độ xem khác bằng JavaScript / jQuery?

Tôi đã đọc rất nhiều câu trả lời từ Stack Overflow, nhưng tất cả chúng đều chuyển hướng tôi đến dạng xem được trả về bởi hàm POST.

Để đạt được những gì bạn muốn, bạn cần sử dụng jQuery Ajax như sau:

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url: '/Car/Edit/17/',
        type: 'post',
        data:$('#myForm').serialize(),
        success:function(){
            // Whatever you want to do after the form is successfully submitted
        }
    });
});

Cũng thử cái này:

function SubForm(e){
    e.preventDefault();
    var url = $(this).closest('form').attr('action'),
    data = $(this).closest('form').serialize();
    $.ajax({
        url: url,
        type: 'post',
        data: data,
        success: function(){
           // Whatever you want to do after the form is successfully submitted
       }
   });
}

Giải pháp cuối cùng

Điều này đã hoạt động hoàn hảo. Tôi gọi chức năng này từHtml.ActionLink(...)

function SubForm (){
    $.ajax({
        url: '/Person/Edit/@Model.Id/',
        type: 'post',
        data: $('#myForm').serialize(),
        success: function(){
            alert("worked");
        }
    });
}

Bạn có thể đạt được điều đó bằng cách chuyển hướng các hình thức của actionmột vô hình <iframe>. Nó không yêu cầu bất kỳ JavaScript hoặc bất kỳ loại tập lệnh nào khác.

<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>

<form action="submitscript.php" target="dummyframe">
    <!-- Form body here -->
</form>

Đặt một ẩn iFrameở cuối trang của bạn và targetnó trong biểu mẫu của bạn:

<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm" target="hiddenFrame"> ... </form>

Nhanh chóng và dễ dàng. Hãy ghi nhớ rằng trong khitarget thuộc tính này vẫn được hỗ trợ rộng rãi (và được hỗ trợ trong HTML5), nhưng nó đã không còn được chấp nhận trong HTML 4.01.

Vì vậy, bạn thực sự nên sử dụng Ajax để chứng minh trong tương lai.

Vì tất cả các câu trả lời hiện tại đều sử dụng jQuery hoặc thủ thuật với iframe, nên việc thêm phương thức chỉ với JavaScript đơn giản là điều không có hại:

function formSubmit(event) {
  var url = "/post/url/here";
  var request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.onload = function() { // request successful
  // we can use server response to our request now
    console.log(request.responseText);
  };

  request.onerror = function() {
    // request failed
  };

  request.send(new FormData(event.target)); // create FormData from form that triggered event
  event.preventDefault();
}

// and you can attach form submit event like this for example
function attachFormSubmitEvent(formId){
  document.getElementById(formId).addEventListener("submit", formSubmit);
}

Được rồi, tôi sẽ không cho bạn biết một cách kỳ diệu để làm điều đó bởi vì không có. Nếu bạn có một thuộc tính action được đặt cho một phần tử biểu mẫu, nó sẽ chuyển hướng.

Nếu bạn không muốn nó chuyển hướng, chỉ cần không thiết lập bất kỳ hành động nào và đặt onsubmit="someFunction();"

Trong bạn, someFunction()bạn có thể làm bất cứ điều gì bạn muốn, (có AJAX hay không) và ở phần cuối, bạn thêm return false;yêu cầu trình duyệt không gửi biểu mẫu ...

Bạn cần Ajax để biến nó thành hiện thực. Một cái gì đó như thế này:

$(document).ready(function(){
    $("#myform").on('submit', function(){
        var name = $("#name").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var contact = $("#contact").val();

        var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact;
        if(name=='' || email=='' || password=='' || contact=='')
        {
            alert("Please fill in all fields");
        }
        else
        {
            // Ajax code to submit form.
            $.ajax({
                type: "POST",
                url: "ajaxsubmit.php",
                data: dataString,
                cache: false,
                success: function(result){
                    alert(result);
                }
           });
        }
        return false;
    });
});

Xem jQuery's post chức năng .

Tôi sẽ tạo một nút và đặt onClickListener($('#button').on('click', function(){}); ) và gửi dữ liệu trong hàm.

Ngoài ra, hãy xem preventDefaultchức năng của jQuery!

Giải pháp một lớp kể từ năm 2020, nếu dữ liệu của bạn không được gửi bằng multipart/form-datahoặc application/x-www-form-urlencoded:

<form onsubmit='return false'>
    <!-- ... -->           
</form>

Cũng có thể đạt được hiệu quả mong muốn bằng cách di chuyển nút gửi bên ngoài biểu mẫu như được mô tả ở đây:

Ngăn tải lại trang và chuyển hướng trên biểu mẫu gửi ajax / jquery

Như thế này:

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
</form>

<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>

Sử dụng đoạn mã này, bạn có thể gửi biểu mẫu và tránh chuyển hướng. Thay vào đó, bạn có thể chuyển hàm thành công dưới dạng đối số và làm bất cứ điều gì bạn muốn.

function submitForm(form, successFn){
    if (form.getAttribute("id") != '' || form.getAttribute("id") != null){
        var id = form.getAttribute("id");
    } else {
        console.log("Form id attribute was not set; the form cannot be serialized");
    }

    $.ajax({
        type: form.method,
        url: form.action,
        data: $(id).serializeArray(),
        dataType: "json",
        success: successFn,
        //error: errorFn(data)
    });
}

Và sau đó chỉ cần làm:

var formElement = document.getElementById("yourForm");
submitForm(formElement, function() {
    console.log("Form submitted");
});

Nếu bạn điều khiển back end, thì hãy sử dụng một cái gì đó như response.redirectthay vì response.send.

Bạn có thể tạo các trang HTML tùy chỉnh cho việc này hoặc chỉ chuyển hướng đến một cái gì đó bạn đã có.

Trong Express.js:

const handler = (req, res) => {
  const { body } = req
  handleResponse(body)
  .then(data => {
    console.log(data)
    res.redirect('https://yoursite.com/ok.html')
  })
  .catch(err => {
    console.log(err)
    res.redirect('https://yoursite.com/err.html')
  })
}
...
app.post('/endpoint', handler)