putsreq
putsreq copied to clipboard
Issue while making ajax call with javascript
Hi.
I tried all the below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<script src="jquery.min.js"></script>
<script>
const url = 'https://putsreq.com/bWVINoAIwR78cl7ajqhX';
// Using Jquery
jQuery.ajax({
url: url,
type: 'POST',
dataType: 'json',
contentType: 'application/json',
processData: false,
data: '{"foo":"bar"}',
success: function (data) {
console.error(JSON.stringify(data));
},
error: function () {
console.error("Cannot get data");
}
});
/*
// Using Vannila JS
let xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.status);
console.log(xhr.responseText);
}};
let data = '{"login":"my_login","password":"my_password"}';
xhr.send(data);
*/
/*
// Using Fetch
fetch(url, {
method: 'POST', // or 'PUT'
headers: {
// 'Content-Type': 'application/x-www-form-urlencoded',
'Content-Type': 'text/plain; charset=utf-8',
// 'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then((response) => response.text())
.then((data) => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
*/
</script>
</body>
</html>
and i am getting response as

@alaksandarjesus I've made some changes to prevent this from happening. Can you try it again?
There's something very confusing going on with these requests. With cURL, the body is received as-is, but for some reason, with the methods above, an addition \" was wrapping the body, and causing the issue.