리디렉션없이 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을 invisible 로 리디렉션하여이를 달성 할 수 있습니다 <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를 사용해야합니다.

현재의 모든 답변은 iframe과 함께 jQuery 또는 트릭을 사용하기 때문에 일반 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;
    });
});

데이터가 multipart/form-data또는 application/x-www-form-urlencoded다음 과 같이 전송되지 않는 경우 2020 년부터 한 줄짜리 솔루션 :

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

jQuery의보기 post 기능을 .

버튼을 만들고 onClickListener($('#button').on('click', function(){}); )를 하고 함수에 데이터를 보냅니다.

또한 preventDefaultjQuery 의 기능을 참조하십시오 !

여기에 설명 된대로 제출 단추를 양식 외부로 이동하여 원하는 효과를 얻을 수도 있습니다.

양식 제출 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.redirect하는 대신 response.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)