how to convert ajax json call to jsonp

Question

I have an ajax call like this:

$.ajax({
    type: "POST",
    url: "www.something.com/login.php",
    cache:false,
    dataType: "json",
    data: { 
        username: $('#user').val(),
        password: $('#pass').val()
           },
        success: function(response) 
        {
           localStorage.setItem('user',response.results[0].user);
           localStorage.setItem('company',response.results[0].company);

        }
});

This is not working because I'm trying to connect to the script which is not on the same root as my files, this PHP file is located on the external server.

How do I need to use JSONP to get this script working?

You'll have to change what the server actually outputs, as JSONP has to be wrapped in a callback function, otherwise I won't work. In other words, just changing the dataType does nothing. — adeneo, Aug 17 '13 at 19:22
I'm creating json object in the php and echo it..can you show me an example? — user123_456, Aug 17 '13 at 19:23
That json object will have to be wrapped in a function, as JSONP isn't really ajax, it inserts a script tag into the document, and the wrapping callback function is needed to know when the file has loaded. — adeneo, Aug 17 '13 at 19:25

score 1 · Accepted Answer · answered Aug 17 '13 at 19:27

1

Sure you can. The only difference between JSON and JSONP is that JSONP is wrapped with a function name;

{ "x": "hello" } // JSON
foo({ "x": "hello" }); // JSONP.

answered Aug 17 '13 at 19:27

Amith

1,424
1
10
22

How can I change PHP and JS to retrieve data in this form as you said. Here is my PHP for creating json object: `echo json_encode( array( "results" => array( array( "user" => $member['user'], "company" => $member['company'] ) ) ));` – user123_456 Aug 17 '13 at 20:03
can you please provide me with a solution? Because I can't get this to work – user123_456 Aug 18 '13 at 09:01

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

You need to pass the information through URL variables.

type: "GET",
url: "www.something.com/login.php?login="+username+"&password="+password,

Then on the server side:

$_GET["username"];
$_GET["password"];

But now that I've told you this, DO NOT DO THIS FOR PASSWORDS AND LOGINS! THIS IS VERY INSECURE!!!

Instead, create a local PHP file, that shares data with the other website on the backend. If you can't do this, then use iframes and use your original method.

Another way is to use cURL. cURL allows you to login just like you were on the page in your browser. It's not very fast, but it works very well on websites you don't have much control over and that don't have an API.

Using PHP CURL to login to a remote web site

edited May 23 '17 at 12:28

Community

1
1

answered Aug 17 '13 at 19:20

Jack Cole

1,528
2
19
41

So ajax call stays the same and just need to add variables in the url and change post to get? – user123_456 Aug 17 '13 at 19:23
@user123_456 - If it's cross domain, as in the page you're trying to connect to has another domain, this answer isn't even close. – adeneo Aug 17 '13 at 19:24
Also change the type to "GET". To do cross domain, the receiving data must be json encoded. Do you have control of the other site? – Jack Cole Aug 17 '13 at 19:26
If the dataType is changed to JSONP, the method will always be GET, no matter what you type in the `type` property. – adeneo Aug 17 '13 at 19:27
@adeneo this is jquery mobile app deployed as smartphone app, so yes this is cross domain I think. Can you give example? – user123_456 Aug 17 '13 at 19:29
No, not really. It's really simple, change the dataType to JSONP and wrap the JSON in a callback function, as shown in the answer by Amith, and as long as it's valid JSONP it should work. An other option would be to set CORS headers on the serverside. – adeneo Aug 17 '13 at 19:32
@adeneo I can't get this to work. can you please provide me with a solution? – user123_456 Aug 18 '13 at 09:02

score 0 · Answer 3 · answered Aug 19 '13 at 05:41

0

Try this...

$.ajax({
type: "POST",
url: "www.something.com/login.php",
cache:false,
dataType: "jsonp",
crossDomain: true,
data: { 
    username: $('#user').val(),
    password: $('#pass').val()
       },
    success: function(response) 
    {
       localStorage.setItem('user',response.results[0].user);
       localStorage.setItem('company',response.results[0].company);

    }
});

answered Aug 19 '13 at 05:41

Premshankar Tiwari

3,006
3
24
30

I get this error in the console: `Uncaught SyntaxError: Unexpected token :` – Si8 Jan 26 '17 at 21:32

how to convert ajax json call to jsonp

3 Answers3