Question

我在使用$.post时面临这个奇怪的错误。

工作原理

$("#add-video").click(function(){
    var url = $("#new-video-url").val();
    $('#loader').show();
    $.post( base_url + "forms/coach/get_url.php", { url:url, base_url:base_url }, function(data){
        alert(data);
                    $('#loader').hide();        
    });
});

上面这段代码向我展示了我使用php文件接收的json数组，并在此处显示了title字段，并隐藏了加载器图像。

但是当我alert(data.title)时，它显示我未定义。更重要的是，当我将数据类型'json'添加到$.post时，

不起作用

$("#add-video").click(function(){
    var url = $("#new-video-url").val();
    $('#loader').show();
    $.post( base_url + "forms/coach/get_url.php", { url:url, base_url:base_url }, function(data){
        alert(data);
                    $('#loader').hide();        
    }, "json"); //Added datatype here.
});

这既不会发出任何警报，也不会隐藏加载程序图像。我也试过了，

$("#add-video").click(function(){
    var url = $("#new-video-url").val();
    $('#loader').show();
    $.post( base_url + "forms/coach/get_url.php", { url:url, base_url:base_url }, function(data){
        jQuery.parseJSON(data);
                    alert(data.title);
                    $('#loader').hide();        
    });
});

以上也没有提醒任何东西，也没有隐藏装载机。然后我也尝试了这个，什么也没做。

$("#add-video").click(function(){
    var url = $("#new-video-url").val();
    $('#loader').show();
    $.post( base_url + "forms/coach/get_url.php", { url:url, base_url:base_url }, function(data){
        jQuery.parseJSON(data);  //tried without this too.
                    alert(data['title']);
                    $('#loader').hide();        
    });
});

最奇怪的是，我之前使用过json，就像我在第二个脚本中显示的那样（4个中），这是正常的。我的JS控制台也没有显示任何错误或警告。我在这做错了什么？如何访问数据的标题字段？

如果这有帮助，这就是我发送json数组的方式，

$json = array("title" => $title, "embed" => $embed, "desc" => $desc, "duration" => $duration, "date" => $date);
print_r(json_encode($json));

如果有人可以指出错误并告诉我为什么我的脚本失败，我会非常感激，类似的功能在其他js文件中有效。

这是我的数据，由服务器返回，

{“title”：“Sunn Raha Hai Na Tu Aashiqui 2 Full Song With Lyrics |   Aditya Roy Kapur，Shraddha Kapoor“，”嵌入“：”\ r \ t \ t \ t \ t \ t \ t \ t \ t \ t＆t＆lt; / param＆gt;＆lt; / param＆gt; \ r \ tt \吨\吨\吨\ T＆LT; / PARAM＆GT; \ r \吨\吨\吨\吨\吨\ r \吨\吨\吨\吨\ T＆LT; /嵌入＆GT;＆LT; /对象＆gt;”， “降序” ：“呈现   来自电影“Aashiqui 2”的歌词“Sun Raha Hai Na Tu”   由T-Series Films＆amp; Co.生产Vishesh Films，由Aditya Roy Kapur主演，   Shraddha Kapoor在Ankit Tiwari的声音中。 \ n \ nSong：SUNN RAHA   HAI \ nSinger：ANKIT TIWARI \ n音乐总监：ANKIT TIWARI \ nAnistant Mix   工程师 - MICHAEL EDWIN PILLAI \ n混合并由ERIC PILLAI掌握   （BOMBAY的未来声音）\ n歌词：SANDEEP NATH \ n电影：AASHIQUI   2 \ n制片人：BHUSHAN KUMAR KRISHAN KUAMR制片人：MUKESH BHATT
  \ n导演：MOHIT SURI \ n音乐标签：T-SERIES \ n \ n从iTunes购买 -   https://itunes.apple.com/in/album/aashiqui-2-original-motion/id630590910?ls=1\n\nEnjoy   ＆安培;与我们保持联系!! \ n \ nSUBSCRIBE T系列频道   无限娱乐\ nhttp：//www.youtube.com/tseries \ n \ nCircle   我们在G + \ nhttp：//www.google.com/+tseriesmusic \ n \ n和我们一样   Facebook的\ nhttp：//www.facebook.com/tseriesmusic \ n \ nFollow   我们\ nhttp：//www.twitter.com/_Tseries”， “持续时间”： “391”， “日期”： “2013年4月3日”}

修改

突然工作了......：o

  $("#add-video").click(function(){
    var url = $("#new-video-url").val();
    $('#loader').show();
    $.post( base_url + "forms/coach/get_url.php", { url:url, base_url:base_url }, function(data){
            alert(data.desc);
            console.log(data.desc);
            $("#loader").hide();

    }, "json");
});

Answer 1

在评论中，您提到此AJAX对应于YouTube API。

YouTube's blog在2012年宣布他们将支持CORS，它使用兼容浏览器解释为允许浏览器安全禁止请求的服务器端标头Same-Origin-Policy。

假设，正如你所说，第一个例子有效，第一个问题是“为什么（后续）alert(data.title)失败？（我的编辑）”。如果在控制台中键入alert(data.title)，它将失败，因为scope data是回调函数，它被定义为参数，并且在全局范围data中未定义。如果您尝试以某种方式将data传递回global scope，它仍然可以是未定义的，因为$.post会在获取数据之前立即返回，并且只是对请求进行排队并设置回调您提供的功能来处理回复。

第二个示例（明确将$.post dataType参数设置为'json'）可能因基于CORS的API而失败，因为mime types for json不允许以Content-Type: simple CORS request发送到服务器，$.post据我所知，只做简单请求而不进行预检。如果正确应用，$.ajax可能会执行更复杂的请求。

继续使用$.post的工作不是使用json作为预期的数据类型，将请求作为表单数据发送，无论如何，服务器可能会将jsen发回给API说会发生，可以在测试代码时验证。

来自https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

简单请求

一个简单的跨站点请求是：

仅使用GET，HEAD或POST。

如果使用POST将数据发送到   server，使用HTTP发送到服务器的数据的Content-Type   POST请求是application / x-www-form-urlencoded之一，   multipart / form-data，或text / plain。

请注意，application/json未列出Content-Type允许simple CORS request的列表。

另见A CORS POST request works from plain javascript, but why not with jQuery?

Answer 2

使用ajax作为

$.ajax({
url:url,
type:'post',
dataType:'json',
success:callback
})

使用此类型，您可以在低级别设置大量参数。使用数据类型属性jQuery解析JSON并将数据作为回调函数发送。

Answer 3

我认为您必须将所有单\替换为双'\'才能将其提供给JSON.parse。

解析JSON时出现奇怪的$ .post（）AJAX错误

3 个答案: