As the answer to this question says, I have this block of code to query the best buy api:
$.ajax({
type: "GET",
url: "http://api.remix.bestbuy.com/v1/products(search=camera)?apiKey=" + apiKey + "&format=json&callback=?",
cache: true,
success: function(data) {
alert('success');
},
dataType: 'json'
});
The code runs fine, but returns an error message from best buy:
"Couldn't understand '/v1/products(search=camera)?apiKey=myApiKey&format=json&callback=jQuery16209624163198750466_1312575558844'"
If I leave out "callback=?" the url returns products just fine when I go to it on the browser, but in the code it throws a javascript error:
"XMLHttpRequest cannot load http://api.remix.bestbuy.com/v1/products(search=camera)?apiKey=myApiKey&format=json. Origin http://mysite.com is not allowed by Access-Control-Allow-Origin."
set dataType to jsonp
$.ajax({
type: "GET",
url: "http://api.remix.bestbuy.com/v1/products(search=camera)?apiKey=" + apiKey + "&format=json",
cache: false,
crossDomain:true,
success: function(data) {
alert('success');
},
dataType: 'jsonp',
});
Update: Found a solution, but it's not ideal. I'd rather not use php, but it works.
I have a php file that grabs the data:
$requestUrl="http://api.remix.bestbuy.com/v1/products(search=camera)?format=json&apiKey={$apiKey}";
$data=file_get_contents($requestUrl);
echo $data;
Then I grab that file with jquery:
$.ajax({
url: "js/getBestBuy.php",
dataType: "json",
success: function(data) {
alert('success');
}
});
The Remix query parser can't handle an underscore in the JSON Callback. If you have a callback without an underscore it should work. Keep in mind, the Remix cache ignores the value of the JSON callback, so if the query is identical except the callback has changed, you will get a cached response (ie. the "couldn't understand . . ." error). Change the query slightly and you will get a fresh response.
Related
I'm having a problem trying to implement an AJAX request into a pre-existing website that I didn't create.
I have no problems sending the data to PHP as a GET request, however POST requests and trying to access $_FILES is returning null.
Here is the AJAX:
var someData = 'test';
$.ajax({
url: "post-data.php",
method: "POST",
dataType: "JSON",
data: ({someData}),
success: function(data) {
console.log(data);
}
});
PHP:
<?php echo json_encode($_POST['someData']); ?>
I believe the cause of the issue might lie within the htaccess file or be related to some other redirect that is in place on the site. This website was built by a past staff member at the company, and I've had this same problem using AJAX POST with several other sites built by them.
As changing from POST to GET works fine I don't think there is any problem with my very simple code.
Is there some way I can test if the data is going missing due to a redirect, or could there be some other cause?
First check the browser dev tools ctr+shift+J and see if there is a redirect. If not then
You need to set your datatype to json and depending on what version of JQUERY you are using you might have to use "type" instead of "method" if your JQUERY version < 1.9.0
var someData = 'test';
$.ajax({
url: "post-data.php",
method: "POST",
dataType: "json",
data: ({someData}),
success: function(data) {
console.log(data);
}
});
PHP code:
header("Content-Type: application/json", true);
If that doesnt work then make sure your URL is absolutely correct. No extra slashes or spaces.
I have managed to figure this out, there is a 302 redirect in place for all .php extetensions to a url without the extension. There was also an error in my code.
Changing the URL in the AJAX to "post-data" without the .php extension allows me to see $_POST in PHP.
My other problem with not being able to access files came down to the way I was trying to send FormData with AJAX.
My original code to do this was:
var someData = 'test';
var fData = new FormData();
fData.append("images", $("input[name='fileUpload']").prop("files")[0]);
$.ajax({
url: "post-data.php",
method: "POST",
dataType: "JSON",
contentType: false,
processData: false,
data: ({someData, fData}),
success: function(data) {
console.log(data);
}
});
The problem being that you can't send FormData and other variables at the same time. Instead I have to append my other data to the FormData:
var someData = 'test';
var fData = new FormData();
fData.append("images", $("input[name='fileUpload']").prop("files")[0]);
fData.append("someData", someData);
$.ajax({
url: "post-data.php",
method: "POST",
dataType: "JSON",
contentType: false,
processData: false,
data: fData,
success: function(data) {
console.log(data);
}
});
I am trying to make a request to this file : http://traitdesign.com/work/tattva/get.php
this is the code I have so far:
function getRemote() {
return $.ajax({
type: "GET",
url: 'http://traitdesign.com/work/tattva/get.php',
async: false,
}).responseText;
}
getRemote();
well the issue is response headers is empty it doesnt return any results. any help would be appreciated. thank you
Try with JSONP
function getRemote() {
return $.ajax({
type: "GET",
url: 'http://traitdesign.com/work/tattva/get.php',
async: false,
dataType: "jsonp",
});
}
getRemote();
"jsonp": Loads in a JSON block using JSONP. Adds an extra
"?callback=?" to the end of your URL to specify the callback. Disables
caching by appending a query string parameter, "_=[TIMESTAMP]", to the
URL unless the cache option is set to true.
Problem is 'Same Origin Policy'. but you can escape from it. but some security issues will remain.
Please check this. http://enable-cors.org/server_php.html
header("Access-Control-Allow-Origin: *");
Include this line into your get.php file.
I think the best in your case would be to write simple ajax action on your server like:
print(file_get_contents('http://traitdesign.com/work/tattva/get.php');
And make ajax call to your new action. It will got through your server so additional server work will be done but you then don't need to care about security policy.
Use JSONP with callback. Also return the value once the call is done.
function getRemote() {
var jqXHR = $.ajax({
type: "GET",
dataType: "jsonp",
url: 'http://traitdesign.com/work/tattva/get.php',
async: false,
crossDomain: true
});
return jqXHR.responseText;
}
getRemote();
i am sending data through ajax call to the php code my ajax code is this
var values = JSON.stringify({ dstring: dataString, ukey:ukey });
var page_path = server_url+"save_data.php";
$.ajax({
type: "POST",
url: page_path,
cache: false,
data: values,
dataType: "json",
success: function(msg){
},
error:function(xhr, status, error) {
}
});
and in the ajax it send data like this
{"dstring":{"q2":"11","q3":"22","q4":"33","q5":"44","q6":"55"},"ukey":"1"}
and in the php when i try to get it through REQUEST it dont show me data , i am bit confuse on how to handle this data in php
Don't stringify data on your ajax call. You should then be able to $_POST['dstring']on the PHP script. Also, you should add in some debug code at least into that error handler to know what's up. Last but not least, inspect the network calls.
You have to get file_get_contents("php://input") and run that through json_decode.
I have the following code:
jQuery.ajax({
type: "POST",
async: true,
url: '/index/city',
data: {massiv: 'qweqwe'},
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (msg)
{ alert('success') },
error: function (err)
{ console.log(err.responseText);}
});
And the following code on php side:
var_dump($_POST);
When I run it I get blank $_POST array. However, with firebug I can clearly see that I send POST query massiv=qweqwe. IF I run query with GET type, I can see it in $_GET array without any problems.
There is nothing in nginx and php-fpm logs.
I have found workaround using $.post, instead of $.ajax
I got the error:
request failed: URI too long (longer than 8190)
I've seen other posts on StackOverflow for this one. Those posts recommend:
Not changing Apache settings (agree)
Using post, not get
Not using jsonp with post
I'm using jQuery's AJAX to POST:
$.ajax({
url: "test.php",
dataType: "json",
data: paras,
type: "POST",
success: function(ret){callback(ret);}
});
It's my impression you can use json just not jsonp. Correct? If so, why might I still be getting the error?
You should try setting proccessData to false.
From the docs:
By default, data passed in to the data option as an object
(technically, anything other than a string) will be processed and
transformed into a query string, fitting to the default content-type
"application/x-www-form-urlencoded". If you want to send a
DOMDocument, or other non-processed data, set this option to false.
so to prevent the data being added to the url:
$.ajax({
url: "test.php",
dataType: "application/json",
data: paras,
type: "POST",
proccessData: false, // this is true by default
success: function(ret){callback(ret);}
});
Honestly, I thought this was automatic, but since your url is too long it's worth a shot.
I ran into this issue when using jQuery to submit large forms, and was able to solve it by adding this plugin.
For example, using the following code to submit the form after adding the plugin resolved the issue for me:
$(formSelectorHere).ajaxSubmit({
url: myURL,
type: 'post',
contentType: "multipart/form-data",
data: $(this).serialize(),
success: function(data) {
function(data) {
//success code here//
}
});
If you're not using this to submit a form, this may not be relevant to you and won't solve your problem, but that's the most common situation where this issue appears, so I figured it was worth mentioning. (The plugin should also be able to submit a form using JSON, but haven't personally tested it).