Question

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ajax</title>
</head>
<body>
    <h2>jQuery AJAX (open in Firefox)</h2>
    <h3> Get partial page content using:</h3>
       <button id="btnAjax" > .ajax() REST</button>
    <button id="btnLoadText">.load() Text File</button>
    <h2> Result</h2>
    <div id="showResult"></div>
     <div> <img id="i1"> </div>     
<hr>
<a href="https://oscarotero.com/jquery/">jQuery Quick API Reference at https://oscarotero.com/jquery/</a>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="ajax.js"></script>
</body>
</html>

ajax.js：

$('#btnLoadText').click(function () { $("#showResult").load("show.txt"); });
  $('#btnAjax').click(function () { callRestAPI() });

  // Perform an asynchronous HTTP (Ajax) API request.
  function callRestAPI() {
    var root = 'https://jsonplaceholder.typicode.com';
    $.ajax({
      url: root + '/photos/6',
      method: 'GET'
    }).then(function (response) {
      console.log(response);
      $('#i1').attr("src", response.url);
      $('#showResult').html(response.body);
    });
  }
})(jQuery);

我尝试过使用div标签的id。但我没有显示图像。有人能告诉我另一种不使用图像标签加载图像的方法吗？

Answer 1

response.url是否包含图片的正确网址？尝试记录response.url以查看您是否获得了所需的网址。

如果没有，则URL可能包含在response.body中（我不确定您是否收到JSON响应，因此发布ajax响应以获得更准确的答案会很有帮助）。

Answer 2

我删除了我之前对请求网址出错的回答/评论：我刚刚使用以下功能在我的本地项目上测试了您的代码：

function callRestAPI() {
var root = 'https://jsonplaceholder.typicode.com';
$.ajax({
    url: root + '/photos/6',
    method: 'GET',
    success: function (data) {
        console.log(data);
        $('#i1').attr("src", data.url);
    }
});
}

我使用了“jquery-1.10.2.js”，试试看，让我知道。

Answer 3

您没有获得任何更新的原因是因为您没有等待注册元素。

如果您将两个点击设置器放入$(document).ready(function(){//your setters here});来电，则应解决您的问题。

您还应该在头脑中加载jquery，按照惯例，我们在head元素中加载脚本和链接的资源。

这是它的样子：

//wait for the document to existts before assigning the jquery.
$(document).ready(function () {

	$('#btnLoadText').click(function () { $("#showResult").load("show.txt"); });
	$('#btnAjax').click(callRestAPI);

});

// Perform an asynchronous HTTP (Ajax) API request.
function callRestAPI() {
	console.log("yolo");
	var root = 'https://jsonplaceholder.typicode.com';
	$.ajax({
		url: root + '/photos/6',
		method: 'GET'
	}).then(function (response) {
		console.log(response);
		$('#i1').attr("src", response.url);
		$('#showResult').html(response.body);
	});
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ajax</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  </head>
  <body>
  
    <h2>jQuery AJAX (open in Firefox)</h2>
    <h3> Get partial page content using:</h3>
    
    <button id="btnAjax"> .ajax() REST</button>
    <button id="btnLoadText">.load() Text File</button>
    
    <h2> Result</h2>
    <div id="showResult"></div>
    
    <div>
      <img id="i1">
    </div>
    
    <hr>
    
    <a href="https://oscarotero.com/jquery/">jQuery Quick API Reference at https://oscarotero.com/jquery/</a>
  </body>
</html>

Answer 4

我不确定这是您尝试加载的图片，但是根据您提供给我们的代码有一个小错字，您还有一个额外的代码段})(jQuery); js的结尾。继承了相同的代码，删除了一个通用的图像标识就好了：

＆＃13;

$('#btnLoadText').click(function() {
  $("#showResult").load("show.txt");
});
$('#btnAjax').click(function() {
  callRestAPI()
});

// Perform an asynchronous HTTP (Ajax) API request.
function callRestAPI() {
  var root = 'https://jsonplaceholder.typicode.com';
  $.ajax({
    url: root + '/photos/6',
    method: 'GET'
  }).then(function(response) {
    console.log(response);
    $('#i1').attr("src", response.url);
    $('#showResult').html(response.body);
  });
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Ajax</title>
</head>

<body>
  <h2>jQuery AJAX (open in Firefox)</h2>
  <h3> Get partial page content using:</h3>
  <button id="btnAjax"> .ajax() REST</button>
  <button id="btnLoadText">.load() Text File</button>
  <h2> Result</h2>
  <div id="showResult"></div>
  <div> <img id="i1"> </div>
  <hr>
  <a href="https://oscarotero.com/jquery/">jQuery Quick API Reference at https://oscarotero.com/jquery/</a>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  <script src="ajax.js"></script>
</body>

</html>

＆＃13;

一切看起来都不错？

我们如何以JSON格式存储图像？

4 个答案: