Yönlendirme olmadan bir HTML formu nasıl gönderilir

Böyle bir formum varsa

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

JavaScript / jQuery ile başka bir görünüme yönlendirmeden nasıl gönderebilirim?

Stack Overflow'dan çok sayıda yanıt okudum, ancak hepsi beni POST işlevi tarafından döndürülen görünüme yönlendiriyor.

İstediğinizi elde etmek için aşağıdaki gibi jQuery Ajax kullanmanız gerekir :

$('#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
        }
    });
});

Ayrıca şunu da deneyin:

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

Son çözüm

Bu kusursuz çalıştı. Ben bu işleviHtml.ActionLink(...)

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

Bunu, formları actiongörünmez olana yönlendirerek başarabilirsiniz <iframe>. Herhangi bir JavaScript veya başka tür bir komut dosyası gerektirmez.

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

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

iFrameSayfanızın altına ve formunuza bir gizli yerleştirin target:

<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>

Çabuk ve kolay. Ederken unutmayın targetözellik hala yaygın olarak desteklenen (ve HTML5 desteklenir) olup, bu HTML 4.01 kullanımdan kaldırıldı.

Öyleyse, gerçekten geleceğe yönelik Ajax kullanmalısınız.

Tüm mevcut yanıtlar jQuery veya iframe ile ilgili hileler kullandığından, yalnızca düz JavaScript ile yöntem eklemenin hiçbir zararı olmadığını anladı:

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

Tamam, bunu yapmanın sihirli bir yolunu size söylemeyeceğim çünkü yok. Bir form öğesi için ayarlanmış bir eylem özniteliğiniz varsa , yeniden yönlendirecektir.

Yönlendirmesini istemiyorsanız, herhangi bir işlem ayarlamayın ve onsubmit="someFunction();"

Siz someFunction()istediğinizi yaparsınız (AJAX ile veya değil) ve sonunda, return false;tarayıcıya formu göndermemesini söylemek için eklersiniz ...

Bunun gerçekleşmesi için Ajax'a ihtiyacınız var. Bunun gibi bir şey:

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

Verilerinizin multipart/form-dataveya şu şekilde gönderilmesi amaçlanmadıysa, 2020 itibariyle tek satırlık çözüm application/x-www-form-urlencoded:

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

JQuery'nin postişlevine bakın .

Bir düğme oluşturup bir onClickListener( $('#button').on('click', function(){});) belirleyip verileri işlevde gönderirdim.

Ayrıca preventDefaultjQuery'nin işlevine bakın !

İstenilen etki, gönder düğmesini burada açıklandığı gibi formun dışına taşıyarak da elde edilebilir:

Sayfanın yeniden yüklenmesini önleyin ve form gönderme ajax / jquery üzerinde yönlendirme

Bunun gibi:

<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>

Bu pasajı kullanarak formu gönderebilir ve yeniden yönlendirmeyi önleyebilirsiniz. Bunun yerine başarı işlevini bağımsız değişken olarak aktarabilir ve istediğinizi yapabilirsiniz.

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

Ve sonra şunu yapın:

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

Arka ucu kontrol ediyorsanız, response.redirectbunun yerine gibi bir şey kullanın response.send.

Bunun için özel HTML sayfaları oluşturabilir veya sadece sahip olduğunuz bir şeye yeniden yönlendirebilirsiniz.

Express.js'de:

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)