วิธีส่งแบบฟอร์ม HTML โดยไม่ต้องเปลี่ยนเส้นทาง

ถ้าฉันมีรูปแบบเช่นนี้

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

ฉันจะส่งโดยไม่เปลี่ยนเส้นทางไปยังมุมมองอื่นโดย JavaScript / jQuery ได้อย่างไร

ฉันอ่านคำตอบมากมายจาก Stack Overflow แต่ทั้งหมดนี้เปลี่ยนเส้นทางฉันไปยังมุมมองที่ส่งคืนโดยฟังก์ชัน POST

เพื่อให้บรรลุสิ่งที่คุณต้องการคุณต้องใช้jQuery Ajaxดังต่อไปนี้:

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

ลองอันนี้ด้วย:

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

ทางออกสุดท้าย

สิ่งนี้ทำงานได้อย่างไม่มีที่ติ ฉันเรียกฟังก์ชันนี้จากHtml.ActionLink(...)

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

คุณสามารถบรรลุว่าด้วยการเปลี่ยนเส้นทางในรูปแบบของการที่มองไม่เห็นaction <iframe>ไม่ต้องใช้ JavaScript หรือสคริปต์ประเภทอื่น ๆ

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

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

วางซ่อนไว้iFrameที่ด้านล่างของหน้าและ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>

ง่ายและรวดเร็ว โปรดทราบว่าแม้ว่าtargetแอตทริบิวต์จะยังคงได้รับการสนับสนุนอย่างกว้างขวาง (และรองรับใน HTML5) แต่ก็เลิกใช้งานใน HTML 4.01

ดังนั้นคุณควรใช้ Ajax เพื่อพิสูจน์อนาคต

เนื่องจากคำตอบปัจจุบันทั้งหมดใช้ jQuery หรือเทคนิคกับ iframe จึงคิดว่าไม่มีอันตรายใด ๆ ที่จะเพิ่มวิธีการด้วย JavaScript ธรรมดา:

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

โอเคฉันจะไม่บอกวิธีที่วิเศษในการทำเพราะมันไม่มี หากคุณมีแอตทริบิวต์การดำเนินการที่กำหนดไว้สำหรับองค์ประกอบแบบฟอร์มจะเปลี่ยนเส้นทาง

หากคุณไม่ต้องการให้เปลี่ยนเส้นทางก็อย่าตั้งค่าการดำเนินการและตั้งค่าใด ๆ onsubmit="someFunction();"

ในการที่someFunction()คุณทำสิ่งที่คุณต้องการ (ด้วย AJAX หรือไม่) และในตอนจบคุณเพิ่มreturn false;เพื่อบอกให้เบราว์เซอร์ไม่ต้องส่งแบบฟอร์ม ...

คุณต้องการ Ajax เพื่อให้มันเกิดขึ้น สิ่งนี้:

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

โซลูชันหนึ่งซับในปี 2020 หากข้อมูลของคุณไม่ได้ถูกส่งเป็นmultipart/form-dataหรือapplication/x-www-form-urlencoded:

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

ดูpostฟังก์ชันของ jQuery

ฉันจะสร้างปุ่มและตั้งค่าonClickListener( $('#button').on('click', function(){});) และส่งข้อมูลในฟังก์ชัน

ดูpreventDefaultฟังก์ชั่นของ jQuery!

เอฟเฟกต์ที่ต้องการสามารถทำได้โดยการเลื่อนปุ่มส่งออกนอกแบบฟอร์มตามที่อธิบายไว้ที่นี่:

ป้องกันการโหลดหน้าซ้ำและเปลี่ยนเส้นทางในแบบฟอร์มส่ง ajax / jquery

แบบนี้:

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

เมื่อใช้ข้อมูลโค้ดนี้คุณสามารถส่งแบบฟอร์มและหลีกเลี่ยงการเปลี่ยนเส้นทางได้ แต่คุณสามารถส่งผ่านฟังก์ชันความสำเร็จเป็นอาร์กิวเมนต์และทำสิ่งที่คุณต้องการ

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

จากนั้นทำ:

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

หากคุณสามารถควบคุมด้านหลังแล้วใช้สิ่งที่ต้องการแทนresponse.redirectresponse.send

คุณสามารถสร้างหน้า HTML ที่กำหนดเองสำหรับสิ่งนี้หรือเพียงแค่เปลี่ยนเส้นทางไปยังสิ่งที่คุณมีอยู่แล้ว

ใน 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)