Question

我想创建一个页面，我可以在该页面上从多个API请求图像并根据用户的选择显示它们。用户将通过单击按钮选择是否要查看猫，狗或狐狸的照片。

这是我创建的代码：

<!DOCTYPE html>
<html>
<head>
<title>API</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
     <br>
     <form  method="post" enctype="multipart/form-data">
        <button type="submit" id="cat" onclick="ajaxSubmit();" name="cat" class="btn btn-primary btn-lg">Cat</button>
        <button type="submit" id="dog" onclick="ajaxSubmit();" name="dog" class="btn btn-info btn-lg">Dog</button>
        <button type="submit" id="fox" onclick="ajaxSubmit();" name="fox" class="btn btn-warning btn-lg">Fox</button>

        <br>

        <img width="100" class="form-control"  style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail"/>
    </form>
</div>



<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $("#cat").ajaxSubmit({url: 'https://aws.random.cat/meow', type: 'post'})
    $("#dog").ajaxSubmit({url: 'https://aws.random.cat/meow', type: 'post'})
    $("#fox").ajaxSubmit({url: 'https://aws.random.cat/meow', type: 'post'})
</script>

这3个API端点可获取图像的URL：

Cat Pictures -> https://aws.random.cat/meow

Dog Pictures -> https://random.dog/woof.json

Fox Pictures -> https://randomfox.ca/floof/

我正在尝试持续3个小时，但没有响应。

Answer 1

<!DOCTYPE html>
<html>
<head>
    <title>API</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <br>
        <form  method="post" enctype="multipart/form-data">
            <button type="button" id="cat" name="cat" class="btn btn-primary btn-lg">Cat</button>
            <button type="button" id="dog" name="dog" class="btn btn-info btn-lg">Dog</button>
            <button type="button" id="fox" name="fox" class="btn btn-warning btn-lg">Fox</button>

            <br>

            <img width="100" class="form-control"  style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="<?php echo $upload_path . $large_image_name . $_SESSION['user_file_ext']; ?>" id="thumbnail"/>
        </form>
    </div>



    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $("#cat").click(function () {
            $.ajax({url: "https://aws.random.cat/meow", success: function (result) {
                    $("#thumbnail").attr('src',result.file);
                }});
        });
        $("#dog").click(function () {
            $.ajax({url: "https://aws.random.cat/meow", success: function (result) {
                    $("#thumbnail").attr('src',result.file);
                }});
        });
        $("#fox").click(function () {
            $.ajax({url: "https://aws.random.cat/meow", success: function (result) {
                    $("#thumbnail").attr('src',result.file);
                }});
        });

    </script>

以这种方式尝试。您正在制造一些错误。

Answer 2

从问题描述中可以看出，单击按钮只是想更改src的{{1}}。您不需要AJAX。您只需将img属性设置为所需的图像路径即可。

还要注意，按钮必须位于src元素中，否则它们将提交父type="button"元素并导致页面被重定向。试试这个：

form

$('.btn').click(function() {
  $('#thumbnail').prop('src', $(this).data('imgsrc'));
});

#thumbnail {
  border: #000;
  z-index: 1;
  position: relative;
  border-width: 2px;
  float: left;
  width: 100px;
}

Ajax To（API密钥）按钮单击并显示图像而无需重新加载

2 个答案: