I'm passing form data to a php script using jQuery's $.ajax call (CentOS 6.4) and the data is being successfully passed to the script and processed. The only issue is that the success message is not coming back. The connection eventually times out and is listed as 'canceled' in the console. I'm using SSL and both the source and destination are using https. The server error logs aren't showing anything I recognize as related.
Here's the AJAX:
$.ajax({
type: "POST",
url: "https://theurl.com/form.php",
data: dataString,
success: function() {
$('#form').html("<div id='message'></div>");
$('#message').html("<h1>Thanks!</h1>")
.append("<h2>We will be in touch.</h2>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='received' src='https://theurl/processed.png' />");
});
setTimeout(function(){
$('div#form').slideDown();
},5000);
}
});
return false;
});
And here's the only error that I think could hold meaning (though I doubt it, as I've heard this is indicative of illicit pings, but I thought the SSL may be causing it...):
client sent HTTP/1.1 request without hostname (see RFC2616 section 14.23): /w00tw00t.at.ISC.SANS.test0:)
Related
The WCF service gets called for sure (the debug kicks in).
No response back to javasript callbacks.
If i configure the call with dataType:JSON the error callback is called.
If i configure dataType:JSONP no error occurs and no response is received (no callback happens neither error or sucess or done).
$.ajax({
type: "GET",
dataType: "jsonp",
contentType: "application/json;charset-uf8",
crossDomain: false,
async: true,
url: "http://myurl",
done: function (results) {
// Uhm, maybe I don't even need this?
var parsed = JSON.parse(results);
alert(parsed);
return results;
},
success: function (data, text) {
alert(text);
alert(data);
},
error: function (request, status, error) {
alert(request);
alert(status);
alert(error);
}
});
I'm running this on localhost.
I have no clue at all, i don't even know how to get more in depth error details.
Any help appreciated.
Directly sending an HTTP request to call the WCF service applies the Restful style service. Thereby we should ensure that WCF service is restful style whereas mostly WCF service based on the SOAP web service, and the invocation is completed by using client proxy class.
From the description, I suggest you add a breakpoint on the JS statement then debug it in the browser. Besides, Success event is deprecated in Jquery, I suggest you use the Done event callback after the AJAX method.
$.ajax({
method:"Get",
url: "http://10.157.13.69:11000/Service1.svc/GetData?value=34",
contentType:"application/json"
}).done(function(data){
console.log(data);
})
I would like that you could post the code details on the server-side so that I try to make an example as much as possible.
At last, please refer to my previous demo on this topic, wish it is useful to you.
How to fix "ERR_ABORTED 400 (Bad Request)" error with Jquery call to C# WCF service?
Feel free to let me know if there is anything I can help with.
I'm trying to send Ajax request using jquery and HTML5.
I have several pages in my application.
Is it possible to make Ajax request on a page(e.g sync.html) and receive response on a different page(e.g home.html).
I know there are other approaches to this like web-sockets and long pooling but if it's possible to achieve this using Ajax then that will make my work easier preventing me from changing any server configurations.
I'm using ASP.NET,C# on the server side.
The reason why I'm doing this is to prevent users from waiting for the response before they resume doing any other activity because this might take long depending on the size of data sent to server and the internet speed.
$.ajax({
dataType: 'jsonp',
jsonp: 'jsonp_callback',
url: server_url,
data: {
number_chunksdone : num_chunksdone,
sync_data: round_1_sync_data,
organisation_id: organisation_id,
sync_id: sync_id,
instrument_id: instrument_id,
user_id: user_id,
sync_data_2: round_2_sync_data
},
success: function (j) {
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
Any idea?
You can try writing Location.replace() or Location.assign() method inside success function. For e.g., document.location.replace('home.html');
The Location.replace() method replaces the current resource with the one at the given URL.
I have written a mobile HTML5 website using standard jQuery.
I have an ajax request that seem to not be executed.
$('.btnSubmit').on('click', function(){
//this appears
$(".fa-plane").after("<p class='error'>"+"clic submit"+"</p>");
// Make the ajax call
$.ajax({
url: '/submit/',
type: 'POST',
data: $("#form").serializeArray(),
success: function (data) {
//doesnt appear, nothing logged server side
$(".fa-plane").after("<p class='error'>"+"ajax returning : "+data+"</p>");
}
});
});
Sometimes it submits, sometimes not (same phone, same url)
nothing logged serverside, success callback not executed.
Any ideas ?
I am building a Google Chrome browser extension that uses $.ajax requests to send data from webpages to my server (currently hosted using localhost). The content_script.js file that is being executed in the context of the webpages (more on content scripts) that the extension has access to runs this code:
//note: encode64String is assigned earlier in the script...
$.ajax({
type: "POST",
url: "http://localhost:8888/quartzsite/uploadendpoint.php",
type: "jsonp",
data: {img: encode64String},
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
success: function(data){
console.log("The ajax request succeeded!");
console.log("The result is: ");
console.log(data);
},
error: function(){
console.log("The request failed");
}
});
The problem is that the Ajax request is succeeding but the data argument that it returns is empty...
The console looks like this after the code is run:
Currently the contents of the uploadedendpoint.php file are:
<?php
header("Access-Control-Allow-Origin: *");
echo 'This comes from php file'; die();
?>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
This means there should be at least something being returned in the data variable.
I have further confirmed that the request is succeeding because when I send the request to a broken url (i.e. uploaddddddendpoint.php) the code inside the $.ajax's error parameter is executed.
I have read similar questions like jQuery $.ajax response empty, but only in Chrome but to no avail...
UPDATE:
I have removed the invalid second type: "jsonp" parameter entirely and have added dataType: "text/html". I am now getting a failed ajax request each time the code is run.
UPDATE: Strangely changing dataType : "text/html" to dataType : "html" causes the ajax request to succeed but again with a blank data variable.
UPDATE: When using the dev toolkit to monitor the Network XHR these are the sent/response messages:
With regards to the flag of possible duplication to
Impossible to cross site ajax api calls in a chrome extension? I suggest otherwise! I have investigated that question and the problem does NOT seem to be the same.
Why do you have two type fields in your AJAX request? jsonp and POST.
$.ajax({
type: "POST", // OK
url: "http://localhost:8888/quartzsite/uploadendpoint.php",
type: "jsonp", // ???
// ...
});
UPDATE:
I think you should be using the relative path for the URL. Try changing your request to the following:
$.ajax({
type: "POST",
url: "/quartzsite/uploadendpoint.php",
dataType: "text/html",
data: {img: encode64String},
success: function(data){
console.log("The ajax request succeeded!");
console.log("The result is: ");
console.dir(data);
},
error: function(){
console.log("The request failed");
}
});
You can see I replaced the URL with /quartzsite/uploadendpoint.php. This may solve the problem... the absolute URL might signal a cross-domain request which is not what you're after.
Also, as a side note, it's unnecessary to set the contentType, since what you're setting it to is already the default value. If you were sending a JSON or XML, then you'd want to set the contentType.
Use "echo" instead of "return" while sending the response data to ajax.
A little background:
I am trying to implement and AJAX powered SlickGrid. There isn't much documentation so I used this example as a base.
In this example there is the following code that hits the desired web service to get the data:
req = $.jsonp({
url: url,
callbackParameter: "callback",
cache: true, // Digg doesn't accept the autogenerated cachebuster param
success: onSuccess,
error: function(){
onError(fromPage, toPage)
}
});
req.fromPage = fromPage;
req.toPage = toPage;
I'm not exactly sure what jsonp does but from what i've read it appears to be very similar to the ajax method in jQuery except it returns json and allows cross domain requests. The webservice that I happen to be calling only returns XML so I changed this chunk of code to:
req = $.ajax({
url: "/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: xmlData,
complete: onSuccess,
error: function (xhr, ajaxOptions, thrownError) {
alert("error: " + xhr.statusText);
alert(thrownError);
},
contentType: "text/xml; charset=\"utf-8\""
});
req.fromPage = fromPage;
req.toPage = toPage;
My issue is that my page errors out at req.fromPage = fromPage; because req is null.
Am I wrong to think that I can just replace my jsonp call with a call to the ajax method? Is req just not set because my ajax call hasn't finished by the time that code is executed? How can I get around either of these issues?
If I comment out the last two lines and hard-code those values elsewhere everything runs fine.
Am I wrong to think that I can just replace my jsonp call with a call to the ajax method?
No, that should work just fine.
Is req just not set because my ajax call hasn't finished by the time that code is executed?
Yes, that is correct.
The ajax methods starts the request and returns immediately. If you want to do something after the response has arrived you should do that in the success event handler.
You might actually want to use the success event instead of the complete event, as the complete event happens even if there is an error.
You could specify async: false, in your settings to make the ajax call wait for the response, but that means that the browser freezes while it's waiting.
As Guffa stated, $.ajax() works asynchronically. Thus, you have to specify a callback that will be called when the request has returned a response, rather than to just use whatever $.ajax() returns.
There are a couple of different callback methods you can specify:
complete - runs when you recieve a response, regardless of its status.
success - runs when you recieve a response with a successful status code (usually 200).
error - runs when you recieve a response with an error code (for example 404 or 500).
To do something with the response body after a successful request, you should do something like
$.ajax({
...
success: function(body) {
alert('This is the method body:' + body);
}
});
Read up in the documentation on the different methods to see what more parameters you can use.