Jquery 无法调用GIPHY API

我有一个文本框和一个搜索按钮。根据用户输入，我想查询Giphy api以获取匹配的GIF。但是我的ajax调用总是出错。 有人能帮我吗

 $('#button2').click(function() {
   var srchParam = $('#srcCriteria').val();

   $.ajax({
    url: "http://api.giphy.com/v1/gifs/search?q=dog&api_key=dc6zaTOxFJmzC",
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
   alert("hello");
    //console.log(response.data[0].bitly_url);
   },
  error: function(xhr, status, error) {
     alert("bye");
   }
 }); 
});

---

这里是jsfiddle链接：

问题在于jsfiddle上的url。如果您检查控制台，您将看到以下消息：

已阻止加载混合活动内容“”

你问这是什么意思？这意味着您正在从

https

调用

http

为了进行测试，您可以将url更改为

//api.giphy.com/v1/gifs/search？q=“+$（'#srcriterias'）.val（）+”&api_key=dc6zaTOxFJmzC

你会看到它的工作原理

---

更新的工作

从URL中删除Http

var srchParam = $('#srcCriteria').val();
$.ajax({
    url: "//api.giphy.com/v1/gifs/search?q=" + srchParam  +  "&api_key=dc6zaTOxFJmzC",
    type: "GET",
    success: function(response) {
    //alert("hello");
        console.log(response.data);
    },
   error: function (e) {
   alert(e);
   }
});

有关更多信息，请访问HTML标题中的“升级不安全请求”CSP指令

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

我的问题是嵌入url链接（https）重定向到giffy s3 bucket（http）导致“混合内容”错误。通过将“内容安全策略”设置为“升级不安全请求”，从html发出的所有请求都将通过https（除了“导航”之外）

---

为什么要执行

var srchParam=$（“#srchcriteria”）.val（）

并使用

$（'#srcriteria'）.val（）在get参数中？检查最新的JSFIDLE。图像未加载。。但当在新标签中打开时，它们会显示@ArpitaDutta，您现在使用的url实际上不是图像的url，而是giphy站点的工具/页面的url。使用
response.data[0]。图像。固定高度。url
。检查对象
响应。数据[0]。图像可以看到有多种大小。包括您可以使用
response.data[0].images.original.url获得的原始文件，您是个天才。谢谢你，AGAINAlso也有类似的问题，但它可能会帮助其他人知道这些URL是区分大小写的。如果不尊重该案例，则您可能会收到“此内容不可用”gif。