Ajax request succeeds but result is empty

问题

I am building a Google Chrome browser extension that uses $.ajax requests to send data from webpages to my server (currently hosted using localhost). The content_script.js file that is being executed in the context of the webpages (more on content scripts) that the extension has access to runs this code:

//note: encode64String is assigned earlier in the script...

$.ajax({
type: "POST",
url: "http://localhost:8888/quartzsite/uploadendpoint.php",
type: "jsonp",
data: {img: encode64String},
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
success: function(data){
    console.log("The ajax request succeeded!");
    console.log("The result is: ");
    console.log(data);
},
error: function(){
    console.log("The request failed");
}
});

The problem is that the Ajax request is succeeding but the data argument that it returns is empty...

The console looks like this after the code is run:

Currently the contents of the uploadedendpoint.php file are:

<?php
  header("Access-Control-Allow-Origin: *");
  echo 'This comes from php file'; die();
?>

<!DOCTYPE html>
<html>
<head>
    <title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

This means there should be at least something being returned in the data variable.

I have further confirmed that the request is succeeding because when I send the request to a broken url (i.e. uploaddddddendpoint.php) the code inside the $.ajax's error parameter is executed.

I have read similar questions like jQuery $.ajax response empty, but only in Chrome but to no avail...

UPDATE:

I have removed the invalid second type: "jsonp" parameter entirely and have added dataType: "text/html". I am now getting a failed ajax request each time the code is run.

UPDATE: Strangely changing dataType : "text/html" to dataType : "html" causes the ajax request to succeed but again with a blank data variable. UPDATE: When using the dev toolkit to monitor the Network XHR these are the sent/response messages:

With regards to the flag of possible duplication to Impossible to cross site ajax api calls in a chrome extension? I suggest otherwise! I have investigated that question and the problem does NOT seem to be the same.

回答1:

Why do you have two type fields in your AJAX request? jsonp and POST.

$.ajax({
    type: "POST",  // OK
    url: "http://localhost:8888/quartzsite/uploadendpoint.php",
    type: "jsonp", // ???
    // ...
});

UPDATE:

I think you should be using the relative path for the URL. Try changing your request to the following:

$.ajax({
    type: "POST",
    url: "/quartzsite/uploadendpoint.php",
    dataType: "text/html",
    data: {img: encode64String},
    success: function(data){
        console.log("The ajax request succeeded!");
        console.log("The result is: ");
        console.dir(data);
    },
    error: function(){
        console.log("The request failed");
    }
});

You can see I replaced the URL with /quartzsite/uploadendpoint.php. This may solve the problem... the absolute URL might signal a cross-domain request which is not what you're after.

Also, as a side note, it's unnecessary to set the contentType, since what you're setting it to is already the default value. If you were sending a JSON or XML, then you'd want to set the contentType.