에이잭스를 사용하여 양식을 제출하다

에이잭스를 사용하여 양식을 제출하다

저는 애플리케이션(대학 소셜 네트워크)을 개발하고 있습니다.주석을 추가해야 합니다(특정 데이터베이스에 행 삽입).이를 위해 저는 HTML 페이지에 다양한 필드가 있는 HTML 양식을 가지고 있습니다.제출 시에는 폼 액션을 사용하지 않고 커스텀 Javascript 기능을 사용하여 폼을 제출하기 전에 데이터를 상세하게 기술합니다.

function sendMyComment() {

    var oForm = document.forms['addComment'];
    var input_video_id = document.createElement("input");
    var input_video_time = document.createElement("input");

    input_video_id.setAttribute("type", "hidden");
    input_video_id.setAttribute("name", "video_id");
    input_video_id.setAttribute("id", "video_id");
    input_video_id.setAttribute("value", document.getElementById('video_id').innerHTML);

    input_video_time.setAttribute("type", "hidden");
    input_video_time.setAttribute("name", "video_time");
    input_video_time.setAttribute("id", "video_time");
    input_video_time.setAttribute("value", document.getElementById('time').innerHTML);

    oForm.appendChild(input_video_id);
    oForm.appendChild(input_video_time);

    document.forms['addComment'].submit();
}

마지막 행이 양식을 올바른 페이지로 제출합니다.잘 되고 있어요.그러나 폼을 제출하기 위해 ajax를 사용하고 싶은데 폼 입력값을 어떻게 잡아야 할지 몰라서 어떻게 해야 할지 모르겠습니다.누가 날 도와줄 수 있어?

사실 아무도 순결함을 주지 않았다.javascript(OP의 요구에 따라) 응답합니다.그러면 다음과 같습니다.

function postAsync(url2get, sendstr)    {
    var req;
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        }
    if (req != undefined) {
        // req.overrideMimeType("application/json"); // if request result is JSON
        try {
            req.open("POST", url2get, false); // 3rd param is whether "async"
            }
        catch(err) {
            alert("couldnt complete request. Is JS enabled for that domain?\\n\\n" + err.message);
            return false;
            }
        req.send(sendstr); // param string only used for POST

        if (req.readyState == 4) { // only if req is "loaded"
            if (req.status == 200)  // only if "OK"
                { return req.responseText ; }
            else    { return "XHR error: " + req.status +" "+req.statusText; }
            }
        }
    alert("req for getAsync is undefined");
}

var var_str = "var1=" + var1  + "&var2=" + var2;
var ret = postAsync(url, var_str) ;
    // hint: encodeURIComponent()

if (ret.match(/^XHR error/)) {
    console.log(ret);
    return;
    }

고객님의 경우:

var var_str = "video_time=" + document.getElementById('video_time').value 
     + "&video_id=" + document.getElementById('video_id').value;

어때

$.ajax({
  type: 'POST',
  url: $("form").attr("action"),
  data: $("form").serialize(), 
  //or your custom data either as object {foo: "bar", ...} or foo=bar&...
  success: function(response) { ... },
});

FormData를 사용하여 폼 입력 값을 캡처하여 fetch로 전송할 수 있습니다.

fetch(form.action,{method:'post', body: new FormData(form)});

function send(e,form) {
  fetch(form.action,{method:'post', body: new FormData(form)});

  console.log('We send post asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)">
    <input hidden name="crsfToken" value="a1e24s1">
    <input name="email" value="a@b.com">
    <input name="phone" value="123-456-789">
    <input type="submit">    
</form>

Look on chrome console>network before 'submit'

온클릭 기능을 송신 버튼에 추가할 수 있습니다만, Enter 키를 눌러서는 기능을 송신할 수 없습니다.저로서는 다음과 같은 것을 사용하고 있습니다.

<form action="" method="post" onsubmit="your_ajax_function(); return false;">
    Your Name <br/>
    <input type="text" name="name" id="name" />
    <br/>
    <input type="submit" id="submit" value="Submit" />
</form>

도움이 됐으면 좋겠다.

다음은 형식의 모든 필드를 반복하고 요청 문자열을 자동으로 생성하는 범용 솔루션입니다.새로운 fetch API를 사용하고 있습니다.폼 속성을 자동으로 읽습니다.method그리고.action폼 내의 모든 필드를 잡습니다.다음과 같은 단일 차원 어레이 필드 지원emails[]. html을 통해 다수의 (아마도 동적인) 폼을 쉽게 관리할 수 있는 범용 솔루션으로서 기능할 수 있습니다.

document.querySelector('.ajax-form').addEventListener('submit', function(e) {
    e.preventDefault();
    let formData = new FormData(this);
    let parsedData = {};
    for(let name of formData) {
      if (typeof(parsedData[name[0]]) == "undefined") {
        let tempdata = formData.getAll(name[0]);
        if (tempdata.length > 1) {
          parsedData[name[0]] = tempdata;
        } else {
          parsedData[name[0]] = tempdata[0];
        }
      }
    }

    let options = {};
    switch (this.method.toLowerCase()) {
      case 'post':
        options.body = JSON.stringify(parsedData);
      case 'get':
        options.method = this.method;
        options.headers = {'Content-Type': 'application/json'};
      break;
    }

    fetch(this.action, options).then(r => r.json()).then(data => {
      console.log(data);
    });
});

<form method="POST" action="some/url">
    <input name="emails[]">
    <input name="emails[]">
    <input name="emails[]">
    <input name="name">
    <input name="phone">
</form>

jQuery를 사용하는 것이 훨씬 편합니다.이것은 대학의 작업일 뿐이며 코드를 저장할 필요가 없기 때문입니다.

따라서 코드는 다음과 같습니다.

function sendMyComment() {
    $('#addComment').append('<input type="hidden" name="video_id" id="video_id" value="' + $('#video_id').text() + '"/><input type="hidden" name="video_time" id="video_time" value="' + $('#time').text() +'"/>');
    $.ajax({
        type: 'POST',
        url: $('#addComment').attr('action'),
        data: $('form').serialize(), 
        success: function(response) { ... },
    });

}

이런 유형의 요구 사항에 대해 jquery를 사용하는 것이 좋습니다. 한 번 시도해 보십시오.

<div id="commentList"></div>
<div id="addCommentContainer">
    <p>Add a Comment</p> <br/> <br/>
    <form id="addCommentForm" method="post" action="">
        <div>
            Your Name <br/>
            <input type="text" name="name" id="name" />


            <br/> <br/>
            Comment Body <br/>
            <textarea name="body" id="body" cols="20" rows="5"></textarea>

            <input type="submit" id="submit" value="Submit" />
        </div>
    </form>
</div>​

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    /* This flag will prevent multiple comment submits: */
    var working = false;
    $("#submit").click(function(){
    $.ajax({
         type: 'POST',
         url: "mysubmitpage.php",
         data: $('#addCommentForm').serialize(), 
         success: function(response) {
            alert("Submitted comment"); 
             $("#commentList").append("Name:" + $("#name").val() + "<br/>comment:" + $("#body").val());
         },
        error: function() {
             //$("#commentList").append($("#name").val() + "<br/>" + $("#body").val());
            alert("There was an error submitting comment");
        }
     });
});
});​

새로운 퓨어를 추가하고 싶습니다.javascript이것을 하는 방법, 내 생각에 훨씬 더 깨끗하다.fetch()API. 이것은 네트워크 요청을 구현하는 최신 방법입니다.당신의 경우, 당신은 이미 가지고 있기 때문에form element단순히 요청을 작성하기 위해 사용할 수 있습니다.

const formInputs = oForm.getElementsByTagName("input");
let formData = new FormData();
for (let input of formInputs) {
    formData.append(input.name, input.value);
}

fetch(oForm.action,
    {
        method: oForm.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

보다시피 그것은 매우 깨끗하고 사용하기에 훨씬 덜 장황하다.XMLHttpRequest.

언급URL : https://stackoverflow.com/questions/13611614/submit-the-form-using-ajax