ajax request in jquery, data sent to the server not working - ajax

var p = JSON.stringify(parameter);
console.log(p);
$.ajax({
type: 'POST',
url: 'http://abc.com/ajax.php',
data: p,
success: function(status) {
console.log(status);
}
});
console.log(p) shows {"o_fname":"hh","o_lname":"jkhk","o_email":"uifh#bjvh.com","o_phone":"","b_name":"bmnbmbm,b","b_address":"","b_city":"","b_postal":"","b_phone":""}
but in my http://abc.com/ajax.php page print_r($_POST) is giving me an empty array Array()

var p = JSON.stringify(parameter);
That is your problem.
When you pass string data to .ajax, it sends it “as-is” – but PHP only popuplates $_POST if it receives data encoded as application/x-www-form-urlencoded.
So don’t make your data into a string, but pass your parameter object directly as value for data – then jQuery will take care of sending it the right way, so that PHP understands what it is supposed to do with it.

I think park of the problem may be that in data: you're passing the parameter details, but to the function on the other side of the jQuery you're passing a parameter name and nothing else.
Try:
$.ajax({
type: 'POST',
url: 'http://abc.com/ajax.php',
data: {parametername:p},
success: function(status) {
console.log(status);
}
});
With parametername replaced with the parameter name ajax.php is expecting.

Related

jquery ajax send string as POST

I am developping a wordpress plugin, want to send string as post ajax parameters, but the string breaks with '&'
code is
var data = "http://localhost/wordpress/?page_id=1&setval=RFZ83WSXa816yc6DNcgfHlgIkztR7KEC6JHRHCCcwfw|~HBZW9j3B59f8rCXO_QLY-gG2MDAcKo6fKG2AnbYnMns|~KA1KUT_SuU9W2UDTnngTsbJiptTvGWZAAzTfN5BCHak|~1";
$.ajax({
data: data
type: "POST",
url: '<?php echo plugins_url().'/page-loader/createMetaDetails.php'; ?>',
data :data,
success: function(msg){
alert('wow'+msg);
}
});
it is not working only passing till 'http://localhost/wordpress/?page_id=1', why?
You need to put data in key value pair array to pass jquery ajax function.
change
var data = 'http://localhost/wordpress/?page_id=1&setval=RFZ83WSXa816yc6DNcgfHlgIkztR7KEC6JHRHCCcwfw|~HBZW9j3B59f8rCXO_QLY-gG2MDAcKo6fKG2AnbYnMns|~KA1KUT_SuU9W2UDTnngTsbJiptTvGWZAAzTfN5BCHak|~1'
To
var data = { yoururl:'http://localhost/wordpress/?page_id=1&setval=RFZ83WSXa816yc6DNcgfHlgIkztR7KEC6JHRHCCcwfw|~HBZW9j3B59f8rCXO_QLY-gG2MDAcKo6fKG2AnbYnMns|~KA1KUT_SuU9W2UDTnngTsbJiptTvGWZAAzTfN5BCHak|~1'}
The data property should be a Javascript object in key:value format; the keys will be the form field names.

$.ajax() vs $.getJSON() with YQL and cross domain requests

I'm trying to execute a cross domain request for data from a wordpress blog using YQL. This is the code from my first attempt:
var g = {data:""}
function getWP() {
var targeturl = "http://www.mysite.com";
var url = "http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(targeturl)+
"%22&format=xml'&callback=?";
var successfunc = function(data) {
if(data.results[0]){
g.data = data.results[o];
} else {
var errormsg = '<p>Error: could not load the page.</p>';
alert(errormsg);
}
}
$.ajax({
url: url,
success: successfunc
});
}
When I tried this ajax call, the data object returned was an empty string. However, when I did this:
$.getJSON(url, successfunc);
the proper JSON object was returned. What is the difference between the two calls? And more importantly, why did only the second one work?
The difference is that you are not specifying your data type or content type
Add
$.ajax({
url: url,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: successfunc
});
to your ajax call
$.getJSON() uses data type json while the $.ajax() doesn't. If you want to use standard $.ajax() you'll have to specify datatype explicitly. For cross-domail calls use datatype jsonp instead of json. But I think YQL works with json as well.

post form with ajax and additional json data

I send a form via jquery ajax. I do not only want to send the values of the formcollection I also want to send another id which is hidden in the page.
How can I send the form data + this id? Maybe there is a way to create one json object and I put everything in it?
jQuery('#myForm').live('submit',function(event) {
$.ajax({
url: 'Url.Action("Create")',
type: 'POST',
data: $('#myForm').serialize(),
success: function( data ) {
}
});
return false;
});
If your hidden field is already in the form, It will be in your serialized data. You dont need to send it exclusively. If you still want to send another piece of data from outside of your form, you may send it as a querystring value and have your action method a parameter named itemId.(Assuming hdnID is the id of your hidden element)
$.ajax({
url: '#Url.Action("Create","Home")'+?itemId='+$("#hdnID").val(),
type: 'POST',
data: $('#myForm').serialize(),
success: function( data ) {
}
});
http://api.jquery.com/serialize/

MooTools: How do package data for a POST ajax request?

I'm using MooTools 1.4.1. I want to create an ajax post requst, but I can't figure out how to construct the "data" attribute, which I wish to contain the name value pairs of a form whose id is "myForm".
$('save').addEvent('click', function(event) {
var req = new Request({
method: 'post',
url: 'save',
data: { ... },
onRequest: function() {
// on request
},
onComplete: function(response) {
alert(response);
});
});
Anyone know how I should populate the "data" attribute? Thanks, - Dave
You can use
$('myForm').toQueryString();
Alternatively, The MooTools More package has a Form.Request() class to send a Form using Ajax.
As Savageman commented, you can throw your form element into toQueryString() and send it through in the data property, or by running .send() or .post() on the request object.
You also seem to be missing a closing squiggly bracket.
Anyhow, this is how I make AJAX requests:
new Request({
url: 'http://url/to/ajax/script.php',
onSuccess: function(data) {
doStuff();
}
}).post('action=foo&bar=baz');
I'd recommend you use Request.JSON if you're planning on sending stuff back. It's less "shotgun approach"-ey.
You can just pass form element to "data" property, and conversion is automatic.
var req = new Request({
method: 'post',
url: 'example.com/form.php',
data: $('myForm'),
onRequest: function() {
// on request
},
onComplete: function(response) {
alert(response);
}
});
data - (mixed: defaults to '') The default data for Request:send, used when no data is given. Can be an Element, Object or String.
If an Object is passed the Object:toQueryString method will be used to convert the object to a string.
If an Element is passed the Element:toQueryString method will be used to convert the Element to a string.
http://mootools.net/docs/core/Request/Request

How use Facebook Javascript SDK response in Ajax request?

Supposing I have the following code which returns a Javascript object which I can read in Firebug's console:
FB.api('/me',function(apiresponse){
console.log(apiresponse);
});
How can I then use the data from apiresponse in an Ajax request on the same page?
Currently my Ajax request looks as follows:
$.ajax({
// CodeIgniter URL
url: "<?=site_url?>('login/add_fb_users'); ?>",
type: 'POST',
data: apiresponse,
success: function(data) {
alert(data);
}
});
I know very little about Javascript, but reading around the subject leads me to think I have to convert the Javascript object to a JSON string. Is that correct? Am I on the right track?
You could put your AJAX call inside the handler for the API call like below..
FB.api('/me', function(apiresponse){
console.log(apiresponse);
$.ajax({
// CodeIgniter URL
url: "<?=site_url?>('login/add_fb_users'); ?>",
type: 'POST',
data: apiresponse,
success: function(data) {
alert(data);
}
});
});
one possible way:
define a global variable in your javascript, e.g. var myVar1;
set apireponse to the global variable in your FB.api callback (i.e. where u call console.log)
reference the var myVar1 in your ajax fcn.

Resources