리디렉션없이 HTML 양식을 제출하는 방법은 무엇입니까?

리디렉션없이 HTML 양식을 제출하는 방법은 무엇입니까?

---

다음과 같은 양식이있는 경우 :

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

JavaScript / Jquery로 다른보기로 리디렉션하지 않고 제출하는 방법은 무엇입니까? StackOverflow에서 많은 답변을 읽었지만 모두 POST 함수에서 반환 한 뷰로 리디렉션됩니다.

---

원하는 것을 얻으려면 아래와 같이 jquery ajax 를 사용해야 합니다.

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

업데이트 : (아래 설명에 따라)

이걸로 해봐:

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

업데이트 2 (OP는 이것이 그의 최종 솔루션이기 때문에이 부분을 추가했습니다)

이것은 완벽하게 작동했습니다. 나는이 함수를Html.ActionLink(...)

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

---

양식 action을 <iframe>. JavaScript 또는 다른 유형의 스크립트가 필요하지 않습니다.

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

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

당신이 정말 교활하다면 , 프레임이 렌더링되지 않는지 확인하기 위해 CSS를 수정 position=absolute하고 z-index값을 매길 수 있습니다 . 그래도 중요하다면 AJAX를 사용하는 것이 더 나을 수 있습니다.

---

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를 사용해야합니다.

---

좋아요, 마술적인 방법이 없기 때문에 말씀 드리지 않겠습니다. 양식 요소에 대한 작업 속성이 설정되어 있으면 리디렉션됩니다.

리디렉션을 원하지 않는 경우 작업을 설정하지 말고 onsubmit="someFunction();"

당신에 someFunction()당신은 (AJAX와 함께 여부), 당신이 원하는 무엇이든 할과 결말, 당신은 추가 return false;양식을 제출하지 브라우저에게 ...

---

현재의 모든 답변은 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);
}

---

이를 위해서는 아약스가 필요합니다. 이 같은

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

---

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>

---

Using this snippet you can submit the form and avoid redirection. Instead you can pass the success function as argument and do whatever you want.

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

And then just do :

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

---

If you control the back end, then use something like response.redirect instead of response.send

You can create custom html pages for this or just redirect to something you already have

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

참고URL : https://stackoverflow.com/questions/25983603/how-to-submit-html-form-without-redirection