HTML 양식 게시를 위한 XMLHttp 요청
현재 설정
저는 HTML 양식을 가지고 있습니다.
<form id="demo-form" action="post-handler.php" method="POST">
<input type="text" name="name" value="previousValue"/>
<button type="submit" name="action" value="dosomething">Update</button>
</form>
한 페이지에 많은 양식이 있을 수 있습니다.
내 질문
이 양식을 비동기식으로 제출하고 리디렉션되거나 페이지를 새로 고치지 않으려면 어떻게 해야 합니까?사용 방법을 알고 있습니다.XMLHttpRequest제가 가지고 있는 문제는 HTML에서 자바스크립트로 데이터를 검색한 다음 포스트 요청 문자열에 넣는 것입니다.현재 zXMLHttpRequest에 사용하고 있는 방법은 다음과 같습니다.
function getHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function demoRequest() {
var request = getHttpRequest();
request.onreadystatechange=function() {
if (request.readyState == 4 && request.status == 200) {
console.log("Response Received");
}
}
request.open("POST","post-handler.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("action=dosomething");
}
그래서 예를 들어, 자바스크립트 방법을 말합니다.demoRequest() 때 의 값을 이 다음 이을 양의식 ?XMLHttpRequest?
편집
아래 답변에서 해결책을 구현하기 위해 양식을 이렇게 수정했습니다.
<form id="demo-form">
<input type="text" name="name" value="previousValue"/>
<button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>
그러나 단추를 클릭해도 여전히 사용자를 확실하지 않은 곳으로 리디렉션하려고 하는데 사용자의 메서드가 호출되지 않습니다.
버튼 이벤트 수신기
document.getElementById('updateBtn').addEventListener('click', function (evt) {
evt.preventDefault();
// Do something
updateProperties();
return false;
});
POST 문자열 형식은 다음과 같습니다.
name=value&name2=value2&name3=value3
그래서 여러분은 모든 이름과 그들의 가치를 파악하고 그것들을 그 형식으로 만들어야 합니다.모든 입력 요소를 반복하거나 호출하여 특정 요소를 얻을 수 있습니다.document.getElementById().
경고:가능한 모든 이름과 특히 값에 사용해야 합니다.&문자열에 포함되어 있으면 형식이 깨지지 않습니다.
예:
var input = document.getElementById("my-input-id");
var inputData = encodeURIComponent(input.value);
request.send("action=dosomething&" + input.name + "=" + inputData);
훨씬 더 간단한 옵션은 사용하는 것입니다.FormData쌍을 할 수 입니다.이러한 개체는 이름과 값 쌍을 포함할 수 있습니다.
운 좋게도, 우리는 그것을 만들 수 있습니다.FormData 기존양에서객직전접수있송다습니할체를식▁it로 보낼 수 .XMLHttpRequest' 메서드 send():
var formData = new FormData( document.getElementById("my-form-id") );
xhr.send(formData);
ComFreek의 답변은 정확하지만 전체 예는 누락되었습니다.
따라서 저는 매우 단순화된 작업 스니펫을 작성했습니다.
<!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); }
xhr.open(oFormElement.method, oFormElement.getAttribute("action"));
xhr.send(new FormData(oFormElement));
return false;
}
</script>
</head>
<body>
<form method="POST"
action="post-handler.php"
onsubmit="return submitForm(this);" >
<input type="text" value="previousValue" name="name"/>
<input type="submit" value="Update"/>
</form>
</body>
</html>
으로 이스펫사수없용습다니를 사용할 수 .GET훌륭한 Mozilla 설명서에서 영감을 얻었습니다.자세한 내용은 이 MDN 설명서를 참조하십시오.를 사용한 이 답변도 참조하십시오.
아약스 요청 양식을 제출하기 위해 다음 코드를 사용했습니다.
$('form[id=demo-form]').submit(function (event) {
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// fire off the request to specific url
var request = $.ajax({
url : "URL TO POST FORM",
type: "post",
data: serializedData
});
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
});
// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// reenable the inputs
});
// prevent default posting of form
event.preventDefault();
});
순수한 자바스크립트를 사용하면 다음과 같은 것을 원할 뿐입니다.
var val = document.getElementById("inputFieldID").value;
키-값 쌍이 있는 데이터 개체를 구성하려고 합니다.
name=John&lastName=Smith&age=3
그럼 request.send("name=과 함께 보내주세요.John&lastName=Smith&age=3";
저도 이런 문제가 있었던 것 같습니다.
버튼이 있는 입력 요소가 있습니다.onclick버튼 사용 방법XMLHttpRequest서버에 요청을 게시합니다. 모두 JavaScript로 코드화되어 있습니다.
입력과 단추를 양식으로 감쌀 때 양식의 작업 속성이 사용되었습니다.버튼이 없었습니다. type=submit그것은 HTML 표준에 대한 나의 읽기를 형성합니다 (https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attributes-for-form-submission) 그것은 되어야 합니다.
하지만 저는 그것을 해결했습니다.form.onsubmit이와 같은 방법:
form.onsubmit = function(E){return false;}
파이어폭스 개발자 에디션과 크롬 38.0.2125.111 Ubuntu 14.04(290379)(64비트)를 사용하고 있었습니다.
function postt(){
var http = new XMLHttpRequest();
var y = document.getElementById("user").value;
var z = document.getElementById("pass").value;
var postdata= "username=y&password=z"; //Probably need the escape method for values here, like you did
http.open("POST", "chat.php", true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", postdata.length);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(postdata);
}
폼에서 y와 z 값을 여기에 게시하려면 어떻게 해야 합니까?
언급URL : https://stackoverflow.com/questions/18592679/xmlhttprequest-to-post-html-form
'programing' 카테고리의 다른 글
| jQuery로 내부 텍스트를 변경하려면 어떻게 해야 합니까? (0) | 2023.08.20 |
|---|---|
| 다른 테이블에 조건이 있는 테이블의 왼쪽 조인 (0) | 2023.08.20 |
| 크롬/사파리가 플렉시블 부모의 높이를 100% 채우지 않음 (0) | 2023.08.20 |
| PHP가 이미 데이터베이스에 연결되어 있는지 확인하려면 어떻게 해야 합니까? (0) | 2023.08.20 |
| pip을 사용하여 패키지의 여러 버전 설치 (0) | 2023.08.20 |