I am trying to send data over to a cakephp (mvc) website, via $.post(). below is the code
$('#testReq').click(function () {
console.log('Button Works');
$.post('http://play.anthonylgordon.com/usersessions/store/', { data: 'test7' }, function (data) {
//data contains the json object retrieved.
console.log(data.status);
}, "json");
})
Below is the cakephp data that retrieves the data and stores it. If you know cake, great but if not it's fine. I am really trying to figure out if i am sending the data correctly
<?php
class UsersessionsController extends AppController {
var $name = 'Usersessions';
var $helpers = array('Html', 'Form','Ajax');
var $components = array('RequestHandler');
function store()
{
Configure::write('debug', 0);
$this->autoRender = false;
echo 'hello';
if ($this->params['url']['data'])
{
$this->data['Usersession']['data'] = $this->params['url']['data'];
$this->Usersession->Save($this->data);
echo 'Success';
}
}
}
?>
As you can see I put 'hello' before it does any evaluating. I should be able to see that in my console but I dont. I tried this method with the get and I did see the response 'hello'. Which is leaving me to the conclusion that you can not send data CROSS domain via $.post. The only method that seems to work is getJSON() unless someone can prove me wrong.
You cannot perform ordinary cross domain ajax requests. You need to use JSONP and this works only with GET requests (that's because jquery injects a script tag to the DOM in order to perform the request and a script tag can only use GET to fetch javascript).
If you want to be able to do requests cross-domain, you'll need to implement a HTTP proxy on your domain which would make HTTP requests on your behalf via a server side utility/library like Curl or Apache HTTPClient or something.
Edit: JSONP is a solution, but I wouldn't recommend it unless you only need to make GET requests (because that's all that works). JSONP also isn't necessarily REST-friendly, especially in your case where you need to make a POST request. If POST satisfies the semantics of your resource and how you intend to manipulate it, switching to GET just to use JSONP feels ugly to me.
Related
I have a javascript application calling an ajax function that looks like this
$.ajax({ url: apiURL, dataType: 'jsonp', success: function(data) {
if (data.ok) {
//do things
}}});
the ajax url im trying to access is through etsyapi
everything works fine and dandy until i try to access the application in chrome with adblock on. it makes the ajax call fail completely, returns an error with a Failed to load resource-"theActualURL" message.
I couldn't figure out how to get past this in javascript and was told that i need to do a php call to get this working.
Unfortunately, i dont know the first thing about php- ive tried to understand even the basic structure for it, and i havent been able to find any work arounds in javascript, so i think it has to be done with php.
Is there simplest way to call the ajax function in php with a dynamic url(which is passed to the php page from javascript) and have it pass the array back to javascript to maniuplate?
ive gotten this far with the php-
<?php
$json = array();
????????????????????????
$jsonstring = json_encode($json);
echo $jsonstring;
?>
but dont understand how to access a dynamic url from javascript.
If it's genuinely using jsonp you shouldn't need php. Replace your $.ajax... with:
var newScript = document.createElement('script');
newScript.src = apiURL;
document.head.appendChild(newScript);
Ignore the above, I'm out of date with jQuery. Even so, you shouldn't need php if the API endpoint is really responding with jsonp. It sounds like the url was wrong/bad if you're getting an error. Have you tried simply opening apiURL by putting it in your browser's address bar?
jsonp is a work around for cross domain ajax restrictions that wraps the returned data in a javascript function call. This allows you to load it in a script tag and the function is run with the data as a parameter when the script is executed.
I write my scripts in PHP, and there are HTML and javascripts inside. What I want is when I click a button(in HTML), it calls a javascript function, the function should visit a url like "http://localhost/1/2" And the page stays as before. Is it feasible?
I just want it work, no matter in js or php. Thanks.
Since the page is on the same domain, you may use an Ajax request:
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.send(null);
Note that this does not do any error-checking, however. If you need that, there are a multitude of available tutorials easily found with a search.
And since you ask, for pages not on the same domain, using an <iframe> is sometimes possible:
var frame = document.createElement("iframe");
frame.src = url;
frame.style.position = "relative";
frame.style.left = "-9999px";
document.body.appendChild(frame);
This is commonly known as AJAX (being able to send a request to the server and receive a response back without navigating away from the page).
AJAX is supported in ALL modern browsers, but sometimes there are inconsistencies, so it is best to use a javascript framework such as JQuery, YUI or another framework.
I tend to use YUI, so here's a quick example on how to send an AJAX request using YUI. This uses the IO Utility:
// Create a YUI instance using io module.
YUI().use("io", function(Y) {
var uri = "http://localhost/1/2";
// Define a function to handle the response data.
function complete() {
Y.log('success!');
};
// Subscribe to event "io:complete"
Y.on('io:complete', complete);
// Make an HTTP request to 'get.php'.
// NOTE: This transaction does not use a configuration object.
var request = Y.io(uri);
});
I'm trying to get an understanding of how Backbone.js, Slim PHP and Paris/Idiorm might work together and I'm having trouble completing the flow, starting with model attribute data, all the way to the database. PROBLEM: What exactly gets sent to my server when I do model.save() ?
Client-side: Backbone.js
var Donut = Backbone.Model.extend({
defaults: {
name: null,
sparkles: false,
creamFilled: false
},
url: function() {
return '/donut';
}
});
var bostonCream = new Donut({
name: 'Bawston Cream',
sparkles: true,
creamFilled: true
});
bostonCreme.save(); // <-- Problem: Not sure what & format this is sending
I think the above is my main problem. My understanding is that backbone will by default, know to send POST data since it's new. It sends it to /donut which is routed, but the question I have is WHAT does it send? And in what format? The outcome I want is to save those donut attributes to my DB. I can pass this server-side code a json like this using jQuery $.post()...
var myDonut = {"name":"Jelly Filled", "sparkles":false, "creamFilled":true};
$.post('http://localhost/donut', myDonut);
...and it happily takes it, saves it to my database. But with the current setup trying to send my backbone donut data, I get POST 500 Internal Server Error. Below I have some server-side code.
Server-side: Slim PHP w/ Paris
class Donut extends Model {}
$app->post('/donut', function() use ($app) { // Slim framework routes my POST...
$donuts = Model::factory('Donut')->create(); // Paris stuff...
$donuts->name = $app->request()->post('name'); // Slim request parameters...
$donuts->sparkles = $app->request()->post('sparkles');
$donuts->creamFilled = $app->request()->post('creamFilled');
$donuts->save(); // Paris... Save name, sparkles, and creamFilled to my DB
});
I have a feeling the answer is out there, but every example I've looked at seems to be missing one piece of the puzzle or another and I can't get that "A-hA!" moment. I thank you in advance and apologize if this is a really ignorant question. :-P
FOLLOWUP/EDIT: 1
Can you paste the error messages?
I get a POST http://localhost:8888/donut 500 (Internal Server Error) in the current state. I can get more information with the following code.
bostonCream.save({}, { // REPLACE bostonCream.save();
success: function(model, response) {
console.log('SUCCESS:');
console.log(response);
},
error: function(model, response) {
console.log('FAIL:');
console.log(response);
}
});
Now when I run backbone's save(), I still get the 500 Error but also XMLHttpRequest as my FAIL response. The only remarkable clue from the XMLHttpRequest is responseText = SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'name' cannot be null.
So my guess is that either 1) I'm messing something up with the save() in that it isn't capturing my attributes correctly, 2) It is currently sending my attributes in a format that my server isn't recognizing with the standard $app->request()->post() Slim methods (Doesn't seem to do much when I try accessing directly with $_POST either), 3) My server isn't setup correctly to take the kind of data that is being sent.
Another thing I noticed although I don't know what to make of it is that when I add
echo $_POST;
It returns to me an empty array. Still gives me the FAIL. If I do THIS however...
echo json_encode($_POST);
It gives me a SUCCESS and the response is a [ ]. Nothing in there. Clearly my POST data is still wonky.
I came up with a solution to completing the problem: how to get data from client to server using the default backbone save() and .sync - passed over to the Slim php framework and going through Paris/Idiorm to my DB.
I am including my working updated code below:
Client-side: Backbone.js
var Donut = Backbone.Model.extend({
defaults: {
name: null,
sparkles: false,
creamFilled: false
},
url: function() {
return '/donut';
}
});
var bostonCream = new Donut({
name: 'Bawston Cream',
sparkles: true,
creamFilled: true
});
bostonCream.save();
/***** If you want to check out the response to save() ? ***
bostonCream.save({}, {
success: function(model, response) {
console.log('SUCCESS:');
console.log(response);
},
error: function(model, response) {
console.log('FAIL:');
console.log(response);
}
});
************************************************************/
Sever-side: Slim PHP w/ Paris/Idorm
class Donut extends Model {}
$app->post('/donut', function() use ($app) {
$donuts = Model::factory('Donut')->create();
/* EDIT: Works... but not the Slim way
$parameters = json_decode(file_get_contents('php://input'), true);
$donuts->name = $parameters['name'];
$donuts->sparkles = $parameters['sparkles'];
$donuts->creamFilled = $parameters['creamFilled']; */
/* SLIM: Using Slim Request Object */
$requestBody = $app->request()->getBody(); // <- getBody() of http request
$json_a = json_decode($requestBody, true);
$donuts->name = $json_a['name'];
$donuts->sparkles = $json_a['sparkles'];
$donuts->creamFilled = $json_a['creamFilled'];
$donuts->save();
// echo json_encode($parameters); // Prove you've captured POST data, send it back
}
Now my code is happily using the default settings of Backbone.js (no changes to sync) and sending proper model attribute information to my server which seems to be successfully accepting the data and saving it to my DB.
The key here seems to be this line...
/* $parameters = json_decode(file_get_contents('php://input'), true); */
// EDITED: getBody() method not documented in Develop Doc, only Stable # time of post
$requestBody = $app->request()->getBody();
If you want to know "what exactly is sent to the server", you should have a look at the Backbone.sync function in Backbone's code. It is very well documented, step-by-step. Then, the cleanest way to achieve what you need is to write you own sync function, inspired by Backbone's sync.
Also, a quick way to see what is sent to the server is to use your browser debug console (Network tab). You can compare here what is sent by Backbone vs. what is sent when you use $.post directly. Please post this information if you need more help !
backbone sends json data to your php backend server, which you should expose your RESTful api to respond to http verb like get, post, put, delete and etc.
your backend api is responsible for communicating with database.
I am not sure about SLIM PHP. it seems to handle the request. Can you paste the error messages?
i tried these two codes but it is not functioning.. i only want to ask for the data output from another domain from http://vrynxzent.info/hello.php
first code
$.post("http://vrynxzent.info/hello.php",function(e){
alert(e);
});
second code
alert(askData());
function askData()
{
var strUrlList = "http://vrynxzent.info/hello.php";
var strReply = "";
jQuery.ajax({
url:strUrlList, success:function(html){strReply = html;}, async:false
});
return strReply;
}
is there another way for this? or is it posible to do this? i want the "Hello World!" output to store in a variable in javascript..
Same old same origin policy.
The most common way to solve this is to do query in back-end (php in your case). I.e., browser sends ajax request to your host, which sends requests to other domain, receives response and sends it back to browser.
There're also some options if you own that other domain. JSONP, for example.
edit
Forgot to tell, this jquery plugin allows cross-domain requests through YQL. Tried myself.
http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
It doesn't work in all cases (in particular, if webmaster has banned robots from his site), but it's still fairly simple and usable.
Because of same origin policy you cannot make ajax requests like this to some other domain,.
i would suggest using a proxy in between,.
for that what you have to do is have a script proxy.php on your own domain and then your ajax request will be
$.post( 'proxy.php' )
then proxy.php would send a request to http://vrynxzent.info/hello.php using curl and send you back the response
By default this does not work because of the "Same Origin Policy."
There are workarounds... see: http://www.ajax-cross-domain.com/
I have a PHP page that needs to make a call to a external web service. This Web service call takes a bunch of sensitive data from a html form on the PHP page, e.g. SSN, and returns info related to that person.
The problem is that the web service call should be made as soon as the customer fills in the SSN field and the field loses focus, so the page cannot be reloaded in any way. I was thinking about using jQuery to make a call to the web service, but AJAX unfortunately requires that you are on the same domain as the requested resource. So I'm thinking about creating an local PHP page that makes the call to the web service and then use JQuery to call this new page.
Questions:
How do I use JQuery to call the local PHP script that makes the call to the web service?
Because the JQuery code will take sensitive data from a html form and send it to the PHP script, how can I encrypt the data?
To call your PHP file:
var url = "http://localhost/data.php";
var params = {
"SSN" : theSSN
};
$.get(url, params, function (){
// Do whatever you need here, once the data arrives.
});
To call the external webservice from PHP, I'd suggest using cURL.
To encrypt, I'd suggest using the HTTPS protocol instead of encrypting manually from JavaScript.
1) $.get("myscript.php", function(response) { alert(response) });
2) I wouldn't encrypt using jQuery, it would be slow and easy to decrypt. Enabling SSL on the server would be a better solution.
1: Ajax request example:
$.ajax(
{
type: "GET",
url: "http://yourdomain.com/yourpage.php",
success: function (msg) { //does something }
});
More details here
2: php XOR is a pretty good encryption algorithm, I use it myself for a project with sensitive data. you can find the function here.
Enjoy! :)
This probably won't help you in particular, but some webservices support something called JSONP, which adds a callback name to a normal JSON request.
However, chances are you will need to make some sort of local proxy, as not many JSONP services exist yet.
The way to go is enabling SSL on your domain, and doing the xmlHTTPRequest to the https of the remote service