I am trying to replace all the jQuery dependency with plain javascript in the following post request.
<script type="text/javascript">
$(function()
{
$.post("test_post.php",
{
name: "John Doe",
age: "42"
},
function(data, textStatus)
{
alert("Response from server: " + data);
});
});
</script>
Any ideas how?
You can play around, but this is the basic example:
var request = new XMLHttpRequest();
request.open('GET', 'test_post.php?name=john+doe&age=41', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
alert(request.responseText);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
Related
hi guys I have this function:
its checking if the image URL is an actual image, but I want to change it , instead of console log I want it to return true or false,
function checkImage(url) {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.send();
request.onload = function() {
status = request.status;
if (request.status == 200) //if(statusText == OK)
{
console.log("image exists");
} else {
console.log("image doesn't exist");
}
}
}
checkImage("https://picsum.photos/200/300");
I want checkImage to return True/False instead of console logging, but when i write return true or false, that doesn't seem to work,
anyone knows why?
If the whole purpose of this function is to check if the image exists with the intent of displaying a default image I would use a much simpler approach. Why not use the following method:
<img src="imagenotfound.gif" alt="Image not found" onerror="this.src='imagefound.gif';" />
This is described at further length here
Just change the console to callback may help u solve it
function checkImg(url,success,error){
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.send();
request.onload = function() {
status = request.status;
if (request.status == 200) //.if(statusText == OK)
{
success && success()
} else {
error && error()
}
}
}
Replace the Ajax with Image.onload()
I'm having a problem rendering a html page using express.
Here's my code:
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.addEventListener('load', function(e){
if (request.status == 200) {
var data = JSON.parse(request.responseText);
console.log(data._id);
res.render('user-home.html', { userId: data._id }); //this doesn't work
}
}, false);
request.send(JSON.stringify(j));
The index.html is being rendered, but user-home.html is not.
I am trying to call web service in html5 javascript. But XMLHttpRequest status value getting ZERO insted of 200 and responseText is empty. help me to solve the issue, My code below
<script type="text/javascript">
var xhr;
function Getdet()
{
try {
xhr = new XMLHttpRequest();
xhr.open('POST', "URL", true); // URL-->Webservice link
xhr.send();
xhr.addEventListener("readystatechange", processRequest, false);
xhr.responseType = 'json';
}
catch(err)
{
alert(err.message);
}
}
function processRequest(e) {
try{
var prn=JSON.stringify(e);
alert("xhr.readyState-->"+xhr.readyState);
alert("xhr.status-->"+xhr.status);
alert("xhr response-->"+ xhr.response);
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
alert(response.ip);
}
}
catch(err)
{
alert(err.message);
}
}
}
</script>
I have some issues with async requests. My website and api are on different ports, Access-Control-Allow-Origin header is set on API side correctly (because synchronious requests work just fine).
The following code always returns 'ERR'. I
function load() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain:8801/api/', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status != 200) {
alert( "ERR" + " Status: " + xhr.statusText + " Response: "+xhr.responseText ); //always ERR in browser
}
else {
alert( "SUCCESS" );
}
}
};
xhr.send();
}
Set a listener for the returned async
function reqListener() {
console.log(this.responseText);
}
function load() {
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", reqListener);
xhr.open('GET', 'http://domain:8801/api/');
xhr.send();
}
Not putting in true/false makes it async by default
SO this is all wrong and the "submit" button is the issue - and the async operates differently - the sync waits for response, THEN submits while the async does not and it never returns prior to the submit action
I am trying to convert the following code to work with jquery:
var req = new XMLHttpRequest();
req.open('GET', 'http://jsonip.appspot.com', true);
req.onreadystatechange = function (e) {
if (req.readyState === 4) {
if(req.status === 200) {
var ip = JSON.parse(req.responseText);
alert(ip.address);
} else {
alert("Error loading page\n");
}
}
};
req.send(null);
This the jquery piece that doesn't work:
$.getJSON("http://jsonip.appspot.com",
function(data){
alert( "Data Returned: " + data.ip);
});
This host supports JSONP custom callbacks, so you can get the result by:
$.getJSON("http://jsonip.appspot.com?callback=?",
function(data){
alert( "Data Returned: " + data.ip);
});
Check the above code here.
Try this:
$.getJSON('http://jsonip.appspot.com?callback=?', function(data) {
console.log( data.ip );
} );