Output jQuery AJAX response via PHP script intermediary

Question

I have the following script that successfully completes an AJAX request:

var input = $("#input").val();
$(".pure-button").click(function() {
    $.ajax({
        type: "POST",
        url: "script.php",
        data: input
    }).done(function(data) {
        $("#output").val(data);
    });
});

input contains a string:

grant_type=refresh_token&amp;client_id=abcd-efgh&amp;client_secret=ijkl-mnop&amp;refresh_token=qrst-uvwx

However, the .done() does not seem to be working. Running the AJAX request in the Chrome Extension POSTMAN gives me the following output:

{"access_token":"123-456-789",
"token_type":"bearer",
"refresh_token":"987-654-321",
"expires_in":14399}

But how do I get this to display in #output? It's a blank input field.

EDIT:

I thought it might be worth nothing that script.php contains the following code:

<?php
header("Content-type: application/xml");
echo file_get_contents("https://api.example.com");
?>

If the echo file_get_contents() is having any bearing on what is returned? Is my initial input string in an XML format? Is the POSTed data even reaching the other server?

2nd EDIT:

Changing my .done() to alert(output); gives me a pop-up containing nothing but null. Seems like my PHP script (an apparent hacky way of getting around the Cross-Origin problem) isn't returning the request in a way that I can use.

var input = $("#input").val();
$(".pure-button").click(function() {
    $.ajax({
        type: "POST",
        url: "script.php",
        data: input
    }).done(function(output) {
        alert(output); // returns "null"
    });
});

use a div tag instead of input field and use $("#output").html(data); — Riad, Oct 29 '14 at 11:27
is it possible for you to set breakpoint on done function and check data object? e.g. somethimes the data from .net services are stored in data.d property — alexsuslin, Oct 29 '14 at 11:49

AGB · Answer 1 · 2014-10-29T11:33:36.410

0

You need to pass a success function in when creating the call, as below:

var input = $("#input").val();
$(".pure-button").click(function() {
    $.ajax({
        type: "POST",
        url: "script.php",
        data: input,
        success: function (data) {
          $("#output").val(data);
    });
});

See the docs: http://api.jquery.com/jquery.ajax/

edited Oct 29 '14 at 11:33

answered Oct 29 '14 at 11:22

AGB

2,200
16
31

2

The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. – jln-dk Oct 29 '14 at 11:23

score 0 · Answer 2 · answered Oct 29 '14 at 11:33

You are passing data ...try using ... data:{input_data:input} and use the .html instead of val() ...

$.ajax({
    type: "POST",
    url: "script.php",
    data: {input_data:input},
    success: function (data) {
      $("#output").html(data);  // to display as text... "output" could be a div element
});

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

Have you tried changing the content-type of your response to application/json in the script.php file?

See this: What is the correct JSON content type?

edited May 23 '17 at 12:10

Community

1
1

answered Oct 29 '14 at 11:45

jln-dk

274
2
10

Having done this, I now do not get an `alert()` at all. The POST still goes through okay. – mpdc Oct 29 '14 at 11:46

Output jQuery AJAX response via PHP script intermediary

3 Answers3