Javascript를 사용한 함수 호출로 포스트 폼 제출 시뮬레이션

Javascript를 사용한 함수 호출로 포스트 폼 제출 시뮬레이션

jQuery를 사용하면 폼 제출을 시뮬레이션할 수 있습니다.

<form id="form1" method="post">
    <input name="key1" value="value1" />
    <input name="key2" value="value2" />
</form>

AJAX 함수 호출:

$.post('', { key1: 'value1', key2: 'value2' }, function() {
   // do call back
});

사용할 경우jquery.form.js

$('#form1').ajaxSubmit({
    success: function() {
        // do call back
    }
});

---

자, 이제 제 질문이 있습니다.

마크업에 양식이 없고 'POST'라는 방법으로 동적인 내용이 있는 양식을 제출하려고 합니다.

다음과 같은 절차를 시뮬레이션하기 위해 함수 호출을 하고 싶습니다.

utils.post('/url', {key1: 'value1', key2: 'value2'});

그 통화 후에, 효과는 제가 위에 있는 양식과 똑같고 저는 자연스럽게 동기화된 방식으로 제출합니다.

이것을 하는 좋은 방법이 있습니까?

---

문제가 명확하지 않으면 제가 원하는 것을 설명하기 위해 추악한 예를 들 수 있습니다.

util.post = function(url, fields) {
    var $form = $('<form action="'+url+'" method="post"></form>');
    var key, val;
    for(key in fields) {
        if(fields.hasOwnProperty(key)) {
            val = fields[key];
            $form.append('<input type="hidden" name="'+key+'" value="'+val+'" />');
        }
    }
    $form.submit();
}

위의 방법은 효과가 있지만 저는 그것이 충분하지 않다고 생각합니다.필드에 특수 문자 또는 다른 문자가 있으면 오류가 발생할 수 있습니다.

문자열을 연결하는 대신 jQuery를 사용하여 양식을 기능적으로 구성할 수 있으므로 특수 문자는 문제가 없습니다.

이 양식을 HTML에 첨부해야 합니다.body제출하기 전에 Chrome 최신 버전에서 이 작업을 수행해야 합니다.

var util = {};
util.post = function(url, fields) {
    var $form = $('<form>', {
        action: url,
        method: 'post'
    });
    $.each(fields, function(key, val) {
         $('<input>').attr({
             type: "hidden",
             name: key,
             value: val
         }).appendTo($form);
    });
    $form.appendTo('body').submit();
}

승인된 답변이 더 이상 예를 들어 작동하지 않을 수 있기 때문입니다.크롬 기반 브라우저의 경우 다음과 같은 해결 방법이 있습니다.

util.post = function(url, fields) {
  var $form = $('<form>', {
    action: url,
    method: 'post'
  }).append(
    $.map(fields, function(key, val) {
      return $('<input>').attr({
         type: "hidden",
         name: key,
         value: val
      }).appendTo($form);
    })
  )
  var w = window.open("about:blank")
  w.document.write($form[0].outerHTML)
  w.document.forms[0].submit()
}

유일한 문제는 데이터를 가져올 폼 필드가 없기 때문에 .serialize를 사용하여 배열을 빌드할 수 없다는 것입니다.어레이를 수동으로 구축하기만 하면 됩니다.

Key1...Keyn은 폼 필드 이름 속성 대신 할당하는 이름이 될 수 있으며(실제 serialize 작업이 수행됨) 값은 원하는 대로 지정할 수 있습니다.

• div에서 html;
• 사용자가 계산한 값;
• Javascript 변수;
• db에서 제공되는 값

요점은 어떤 경우에도 양식을 게시하는 것을 시뮬레이션하지 않는다는 것입니다.Ajax를 사용하면 비동기식으로 만들 수 있으며 양식 결과를 자세히 설명하기 위해 페이지를 변경/재로드할 필요가 없기 때문에 유용합니다.

언급URL : https://stackoverflow.com/questions/30421830/simulate-post-form-submit-with-a-function-call-with-javascript