Кнопка Ajax To (API Key) нажимает и показывает изображение без перезагрузки - PullRequest
Новая
       1

Кнопка Ajax To (API Key) нажимает и показывает изображение без перезагрузки

0 голосов
/ 13 февраля 2019

Я хочу создать страницу, на которой я могу запрашивать изображения из нескольких 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 часа, но ответа нет.

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Из описания вопроса следует, что вы просто хотите изменить src на img при нажатии кнопок.Вам не нужен AJAX для этого.Вы можете просто установить для свойства 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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <form method="post" enctype="multipart/form-data">
    <button type="button" data-imgsrc="https://aws.random.cat/meow" name="cat" class="btn btn-primary btn-lg">Cat</button>
    <button type="button" data-imgsrc="https://aws.random.cat/meow" name="dog" class="btn btn-info btn-lg">Dog</button>
    <button type="button" data-imgsrc="https://aws.random.cat/meow" name="fox" class="btn btn-warning btn-lg">Fox</button>

    <br>

    <img class="form-control" src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail" />
  </form>
</div>
0 голосов
/ 13 февраля 2019 
<!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>

Попробуйте таким образом.Вы создаете несколько ошибок.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...