jQuery Ajax 请求成功但结果为空

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18243319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 21:15:38  来源:igfitidea点击:

Ajax request succeeds but result is empty

javascriptjqueryhtmlajaxgoogle-chrome-extension

提问by Brannon

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

我正在构建一个 Google Chrome 浏览器扩展,它使用$.ajax请求将数据从网页发送到我的服务器(目前使用 localhost 托管)。在扩展程序有权访问content_script.js的网页上下文中执行的文件(更多内容脚本)运行以下代码:

//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 Ajaxrequest is succeeding but the dataargument that it returns is empty...

问题是Ajax请求成功但data它返回的参数是空的......

The console looks like this after the code is run:enter image description here

代码运行后控制台如下所示:在此处输入图片说明

Currently the contents of the uploadedendpoint.phpfile are:

目前uploadedendpoint.php文件内容为:

<?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 datavariable.

这意味着至少应该在data变量中返回一些东西。

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 errorparameter is executed.

我进一步确认请求成功,因为当我将请求发送到损坏的 url(即 uploaddddddendpoint.php)时,将执行$.ajax'serror参数中的代码。

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

我读过类似的问题,如jQuery $.ajax response empty, but only in Chrome但无济于事......

UPDATE:

更新

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

我已经type: "jsonp"完全删除了无效的第二个参数并添加了dataType: "text/html". 我现在ajax每次运行代码时都会收到失败的请求。

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

更新:奇怪地更改dataType : "text/html"dataType : "html"导致ajax请求成功但再次使用空白data变量。 更新:当使用开发工具包监控网络 XHR 时,这些是发送/响应消息:

enter image description hereenter image description here

在此处输入图片说明在此处输入图片说明

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.

关于chrome 扩展中不可能跨站点 ajax api 调用可能重复的标志 我建议否则!我已经调查过这个问题,但问题似乎不一样。

回答by ktm5124

Why do you have two typefields in your AJAX request? jsonpand POST.

为什么type你的 AJAX 请求中有两个字段?jsonpPOST

$.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:

我认为您应该使用 URL 的相对路径。尝试将您的请求更改为以下内容:

$.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.

你可以看到我用/quartzsite/uploadendpoint.php. 这可能会解决问题……绝对 URL 可能表示跨域请求,这不是您所追求的。

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.

另外,作为旁注,没有必要设置 contentType,因为您设置的内容已经是默认值。如果您要发送 JSON 或 XML,那么您需要设置 contentType。

回答by Федор Пересадов

One way to solve the problem: In chrome was an empty answer. In FF show a php warnings in the answer Warning: .... on line ...

解决问题的一种方法:在 chrome 中是一个空洞的答案。在 FF 中,在答案中显示 php 警告警告:.... 在线...

After removing the warnings, chrome began to display a response.

删除警告后,chrome 开始显示响应。

回答by sivaprakash

Use "echo" instead of "return" while sending the response data to ajax.

在将响应数据发送到 ajax 时使用“echo”而不是“return”。