반응형
순수 자바스크립트로 AJAX 사후 구현
Pure Javascript에 AJAX Post 구현이 있습니까(아마 xmlhttprequest 사용)?
예를 들어 다음과 같은 양식이 있는 경우:
<form action="request.php" id="register_form">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="LastName">
<input type="submit" value="submit_now">
</form>
JQuery에서 AJAX를 구현했습니다.
$('#register_form').submit(function(e) {
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
/* start ajax submission process */
$.ajax({
url: formURL,
type: "POST",
data: postData,
success: function(data, textStatus, jqXHR) {
alert('Success!');
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error occurred!');
}
});
e.preventDefault(); //STOP default action
/* ends ajax submission process */
});
jQuery를 사용하지 않고도 동일하게 할 수 있습니까?가능하다면 위의 jQuery 코드를 pure/plain Javascript 코드로 구현하려면 어떻게 해야 합니까?
네 그리고 물론 그것은 가능합니다 :)
<form action="request.php" id="register_form">
<input class='formVal' type="text" name="first_name" placeholder="First Name">
<input class='formVal' type="text" name="last_name" placeholder="LastName">
<input type="submit" value="submit_now" onclick="myFunction(); return false;">
</form>
제이에스
function myFunction()
{
var elements = document.getElementsByClassName("formVal");
var formData = new FormData();
for(var i=0; i<elements.length; i++)
{
formData.append(elements[i].name, elements[i].value);
}
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
alert(xmlHttp.responseText);
}
}
xmlHttp.open("post", "server.php");
xmlHttp.send(formData);
}
server.sys
<?php
$firstName = $_POST["first_name"];
$lastName = $_POST["last_name"];
echo $firstName." ".$lastName;
//enter name and lastname into your form and onclick they will be alerted
?>
설명:함수는 클래스 이름으로 폼 요소를 가져와 배열로 저장합니다.그런 다음 FormData 개체를 만들고 각 요소에 대한 요소 배열을 순환한 다음 FormData 개체에 해당 이름과 값을 추가합니다.그런 다음 요청 중에 상태 및 상태 변경을 모니터링하고 post 메서드를 사용하여 server.php로 데이터를 전송하는 XMLHttpRequest() 개체를 만듭니다. over and readystate가 4이고 status가 200이면 server.php에서 응답을 알려 XMLHttpRequest 개체의 responseText 특성에 저장합니다.
물론 Ajax는 Reqwest lib만 사용할 수 있습니다.
다음과 같은 것:
reqwest({
url: 'path/to/json'
, type: 'json'
, method: 'post'
, error: function (err) { }
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
또한 README에 따라 다음을 사용할 수 있습니다.
$(form).serialize()
네.
말씀하신 대로 XMLHttpRequest와 연동됩니다.
var http = new XMLHttpRequest();
var postData = serialize(arr);
var params = "postdata=" + postData;
http.open("POST", url, true);
http.send(params);
직렬화 기능은 JS입니다. 이 페이지를 참조하십시오.
function serialize(mixed_value) {
// discuss at: http://phpjs.org/functions/serialize/
// original by: Arpad Ray (mailto:arpad@php.net)
// improved by: Dino
// improved by: Le Torbi (http://www.letorbi.de/)
// improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net/)
// bugfixed by: Andrej Pavlovic
// bugfixed by: Garagoth
// bugfixed by: Russell Walker (http://www.nbill.co.uk/)
// bugfixed by: Jamie Beck (http://www.terabit.ca/)
// bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net/)
// bugfixed by: Ben (http://benblume.co.uk/)
// input by: DtTvB (http://dt.in.th/2008-09-16.string-length-in-bytes.html)
// input by: Martin (http://www.erlenwiese.de/)
// note: We feel the main purpose of this function should be to ease the transport of data between php & js
// note: Aiming for PHP-compatibility, we have to translate objects to arrays
// example 1: serialize(['Kevin', 'van', 'Zonneveld']);
// returns 1: 'a:3:{i:0;s:5:"Kevin";i:1;s:3:"van";i:2;s:9:"Zonneveld";}'
// example 2: serialize({firstName: 'Kevin', midName: 'van', surName: 'Zonneveld'});
// returns 2: 'a:3:{s:9:"firstName";s:5:"Kevin";s:7:"midName";s:3:"van";s:7:"surName";s:9:"Zonneveld";}'
var val, key, okey,
ktype = '',
vals = '',
count = 0,
_utf8Size = function (str) {
var size = 0,
i = 0,
l = str.length,
code = '';
for (i = 0; i < l; i++) {
code = str.charCodeAt(i);
if (code < 0x0080) {
size += 1;
} else if (code < 0x0800) {
size += 2;
} else {
size += 3;
}
}
return size;
},
_getType = function (inp) {
var match, key, cons, types, type = typeof inp;
if (type === 'object' && !inp) {
return 'null';
}
if (type === 'object') {
if (!inp.constructor) {
return 'object';
}
cons = inp.constructor.toString();
match = cons.match(/(\w+)\(/);
if (match) {
cons = match[1].toLowerCase();
}
types = ['boolean', 'number', 'string', 'array'];
for (key in types) {
if (cons == types[key]) {
type = types[key];
break;
}
}
}
return type;
},
type = _getType(mixed_value);
switch (type) {
case 'function':
val = '';
break;
case 'boolean':
val = 'b:' + (mixed_value ? '1' : '0');
break;
case 'number':
val = (Math.round(mixed_value) == mixed_value ? 'i' : 'd') + ':' + mixed_value;
break;
case 'string':
val = 's:' + _utf8Size(mixed_value) + ':"' + mixed_value + '"';
break;
case 'array':
case 'object':
val = 'a';
/*
if (type === 'object') {
var objname = mixed_value.constructor.toString().match(/(\w+)\(\)/);
if (objname == undefined) {
return;
}
objname[1] = this.serialize(objname[1]);
val = 'O' + objname[1].substring(1, objname[1].length - 1);
}
*/
for (key in mixed_value) {
if (mixed_value.hasOwnProperty(key)) {
ktype = _getType(mixed_value[key]);
if (ktype === 'function') {
continue;
}
okey = (key.match(/^[0-9]+$/) ? parseInt(key, 10) : key);
vals += this.serialize(okey) + this.serialize(mixed_value[key]);
count++;
}
}
val += ':' + count + ':{' + vals + '}';
break;
case 'undefined':
// Fall-through
default:
// if the JS object has a property which contains a null value, the string cannot be unserialized by PHP
val = 'N';
break;
}
if (type !== 'object' && type !== 'array') {
val += ';';
}
return val;
}
언급URL : https://stackoverflow.com/questions/30414372/ajax-post-implementation-in-pure-javascript
반응형
'source' 카테고리의 다른 글
| 입력 키를 누르면 Angular 5 버튼 제출 (0) | 2023.07.26 |
|---|---|
| 유닉스 타임스탬프를 캘린더 date moment.js로 변환하는 방법 (0) | 2023.07.26 |
| clock_gettime()의 다양한 클럭 이해 (0) | 2023.07.26 |
| JavaScript/JQuery를 사용하여 간단한 맵을 만드는 방법 (0) | 2023.07.26 |
| Spring Rest Template를 이용한 페이지 응답 소비 방법 (0) | 2023.07.26 |