it-swarm-vi.tech

Làm cách nào để gửi biểu mẫu html mà không chuyển hướng?

Nếu tôi có hình thức như thế này:

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

làm cách nào để gửi nó mà không chuyển hướng đến chế độ xem khác bằng JavaScript/Jquery? Tôi đã đọc rất nhiều câu trả lời từ StackOverflow, nhưng tất cả chúng đều chuyển hướng tôi đến chế độ xem được trả về bởi hàm POST.

63
Duke Nuke

để đạt được những gì bạn muốn, bạn cần sử dụng jquery ajax như dưới đây:

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

CẬP NHẬT: (dựa trên các ý kiến ​​bên dưới)

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 wanna do after the form is successfully submitted
       }
   });
}

CẬP NHẬT 2 (OP đã thêm phần này vì đây là giải pháp cuối cùng của anh ấy)

Điều này làm việc 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");
        }
    });
}
50
Amin Jafari

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

<iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>

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

nếu bạn thực sự xảo quyệt, bạn có thể sửa lại giá trị position=absolutez-index trong CSS để đảm bảo rằng khung không hiển thị. Tuy nhiên, nếu vấn đề quan trọng đến thế, bạn vẫn có thể sử dụng AJAX tốt hơn.

75
Issa Chanzi

Đặt một iFrame ẩn ở cuối trang của bạn và target nó ở dạng 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 nhớ rằng mặc dù thuộc tính target vẫn được hỗ trợ rộng rãi (& được hỗ trợ trong HTML5) nhưng nó không được dùng 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.

18
Steven Black

Được rồi, tôi sẽ không nói với bạn 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 hành động đượ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 đặt bất kỳ hành động nào và đặt onsubmit="someFunction();"

Trong someFunction() của bạn, bạn làm bất cứ điều gì bạn muốn, (với AJAX hoặc không) và trong phần kết thúc, bạn thêm return false; để yêu cầu trình duyệt không gửi biểu mẫu ...

5
Anshu Dwibhashi

Bạn cần ajax để làm cho nó xảy ra. 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 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;
    });
});
3
Bojan Petkovski

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

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);
}
3
Ethuil UI

Xem hàm post của jQuery.

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 hàm preventDefault của jQuery!

2
Nagy Vilmos

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ể vượt qua chức năng thành công như đố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");
});
0
cepix

Hiệu ứng mong muốn cũng có thể đạt được 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 chặ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>
0
John