JavaScript에서 XMLHttpRequest를 사용하여 데이터를 보내고 싶습니다.

HTML로 다음 양식이 있다고 가정 해보십시오.

<form name="inputform" action="somewhere" method="post">
    <input type="hidden" value="person" name="user">
    <input type="hidden" value="password" name="pwd">
    <input type="hidden" value="place" name="organization">
    <input type="hidden" value="key" name="requiredkey">
</form>

JavaScript에서 XMLHttpRequest를 사용하여 동등한 내용을 작성하려면 어떻게해야합니까?

답변

아래 코드는이를 수행하는 방법을 보여줍니다.

var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);

//Send the proper header information along with the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

답변

var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
    // do something to response
    console.log(this.responseText);
};
xhr.send('user=person&pwd=password&organization=place&requiredkey=key');

또는 브라우저 지원을 기대할 수 있다면 FormData를 사용할 수 있습니다 .

var data = new FormData();
data.append('user', 'person');
data.append('pwd', 'password');
data.append('organization', 'place');
data.append('requiredkey', 'key');

var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.onload = function () {
    // do something to response
    console.log(this.responseText);
};
xhr.send(data);

답변

최신 JavaScript를 사용하십시오!

에서 살펴볼 것을 제안 fetch합니다. ES5와 동일하며 약속을 사용합니다. 훨씬 더 읽기 쉽고 쉽게 사용자 정의 할 수 있습니다.

const url = "http://example.com";
fetch(url, {
    method : "POST",
    body: new FormData(document.getElementById("inputform")),
    // -- or --
    // body : JSON.stringify({
        // user : document.getElementById('user').value,
        // ...
    // })
}).then(
    response => response.text() // .json(), etc.
    // same as function(response) {return response.text();}
).then(
    html => console.log(html)
);

스 니펫 확장

Node.js에서 다음을 fetch사용하여 가져와야합니다 .

const fetch = require("node-fetch");

동 기적으로 사용하려면 (상위 범위에서는 작동하지 않음) :

const json = await fetch(url, optionalOptions)
  .then(response => response.json()) // .text(), etc.
  .catch((e) => {});

더 많은 정보:

모질라 문서

사용할 수 있습니까 (2020 년 3 월 95 %)

데이비드 월시 튜토리얼

답변

`FormData`AJAX 요청 제출의 최소 사용

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<script>
"use strict";
function submitForm(oFormElement)
{
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){ alert (xhr.responseText); } // success case
  xhr.onerror = function(){ alert (xhr.responseText); } // failure case
  xhr.open (oFormElement.method, oFormElement.action, true);
  xhr.send (new FormData (oFormElement));
  return false;
}
</script>
</head>

<body>
<form method="post" action="somewhere" onsubmit="return submitForm(this);">
  <input type="hidden" value="person"   name="user" />
  <input type="hidden" value="password" name="pwd" />
  <input type="hidden" value="place"    name="organization" />
  <input type="hidden" value="key"      name="requiredkey" />
  <input type="submit" value="post request"/>
</form>
</body>
</html>

비고

사용자가 요청을 제출하려면 클릭해야하므로 OP 질문에 완전히 답변하지는 않습니다. 그러나 이것은 이런 종류의 간단한 솔루션을 찾는 사람들에게 유용 할 수 있습니다.
이 예제는 매우 간단하며이 GET방법을 지원하지 않습니다 . 보다 정교한 예제로 흥미가 있다면 훌륭한 MDN 문서를 살펴보십시오 . HTMLHttpRequest to Post HTML Form에 대한 비슷한 답변 도 참조하십시오. .
이 솔루션의 한계 : Justin Blank 와 Thomas Munk (댓글 참조) FormData가 지적한 바와 같이 IE9 이하 및 Android 2.3의 기본 브라우저에서는 지원되지 않습니다.

답변

다음은 완벽한 솔루션입니다 application-json.

// Input values will be grabbed by ID
<input id="loginEmail" type="text" name="email" placeholder="Email">
<input id="loginPassword" type="password" name="password" placeholder="Password">

// return stops normal action and runs login()
<button onclick="return login()">Submit</button>

<script>
    function login() {
        // Form fields, see IDs above
        const params = {
            email: document.querySelector('#loginEmail').value,
            password: document.querySelector('#loginPassword').value
        }

        const http = new XMLHttpRequest()
        http.open('POST', '/login')
        http.setRequestHeader('Content-type', 'application/json')
        http.send(JSON.stringify(params)) // Make sure to stringify
        http.onload = function() {
            // Do whatever with response
            alert(http.responseText)
        }
    }
</script>

백엔드 API가 JSON을 구문 분석 할 수 있는지 확인하십시오.

예를 들어, Express JS에서 :

import bodyParser from 'body-parser'
app.use(bodyParser.json())

답변

필요한 플러그인이 없습니다!

아래 코드를 선택하고 BOOKMARK BAR 에 끌어다 놓으십시오 ( 표시되지 않으면 브라우저 설정에서 활성화하십시오 ). 해당 링크 를 편집 하십시오.

javascript:var my_params = prompt("Enter your parameters", "var1=aaaa&var2=bbbbb"); var Target_LINK = prompt("Enter destination", location.href); function post(path, params) { var xForm = document.createElement("form"); xForm.setAttribute("method", "post"); xForm.setAttribute("action", path); for (var key in params) { if (params.hasOwnProperty(key)) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); xForm.appendChild(hiddenField); } } var xhr = new XMLHttpRequest(); xhr.onload = function () { alert(xhr.responseText); }; xhr.open(xForm.method, xForm.action, true); xhr.send(new FormData(xForm)); return false; } parsed_params = {}; my_params.split("&").forEach(function (item) { var s = item.split("="), k = s[0], v = s[1]; parsed_params[k] = v; }); post(Target_LINK, parsed_params); void(0);

그게 다야! 이제 모든 웹 사이트를 방문하고 BOOKMARK BAR 에서 해당 버튼을 클릭 할 수 있습니다 !

노트:

위의 방법은 방법을 사용하여 데이터를 전송 XMLHttpRequest하므로 스크립트를 트리거하는 동안 동일한 도메인에 있어야합니다. 그렇기 때문에 시뮬레이션 된 FORM SUBMITTING으로 데이터를 전송하는 것을 선호합니다.이 코드는 모든 도메인에 코드를 보낼 수 있습니다.

 javascript:var my_params=prompt("Enter your parameters","var1=aaaa&var2=bbbbb"); var Target_LINK=prompt("Enter destination", location.href); function post(path, params) {   var xForm= document.createElement("form");   xForm.setAttribute("method", "post");   xForm.setAttribute("action", path); xForm.setAttribute("target", "_blank");   for(var key in params) {   if(params.hasOwnProperty(key)) {        var hiddenField = document.createElement("input");      hiddenField.setAttribute("name", key);      hiddenField.setAttribute("value", params[key]);         xForm.appendChild(hiddenField);     }   }   document.body.appendChild(xForm);  xForm.submit(); }   parsed_params={}; my_params.split("&").forEach(function(item) {var s = item.split("="), k=s[0], v=s[1]; parsed_params[k] = v;}); post(Target_LINK, parsed_params); void(0);

답변

같은 게시물을 사용하여 비슷한 문제에 직면 했으며이 링크를 사용하여 문제를 해결했습니다.

 var http = new XMLHttpRequest();
 var url = "MY_URL.Com/login.aspx";
 var params = 'eid=' +userEmailId+'&amp;pwd='+userPwd

 http.open("POST", url, true);

 // Send the proper header information along with the request
 //http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 //http.setRequestHeader("Content-Length", params.length);// all browser wont support Refused to set unsafe header "Content-Length"
 //http.setRequestHeader("Connection", "close");//Refused to set unsafe header "Connection"

 // Call a function when the state 
 http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
 }
 http.send(params);

이 링크 는 정보를 완성했습니다.

답변

답변

답변

최신 JavaScript를 사용하십시오!

답변

FormDataAJAX 요청 제출의 최소 사용

비고

답변

답변

필요한 플러그인이 없습니다!

노트:

답변

`FormData`AJAX 요청 제출의 최소 사용