javascript - 无法附加图像

Question

我正在尝试根据用户输入在弹出窗口中添加所有 gif，但我无法让它工作图像没有附加到它打开的对话框但为空我该如何解决这个问题？
问候

$( function() {
  $( "#dialog" ).dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });
  $('#rio').on('click',function () {
    let user_input = prompt();
    const base_url = 'https://api.giphy.com/v1/gifs/search?'
    const  key = 'kibe1qE9jIYwWBU0V5YTuNJqYZPEOxOy';
    $( "#dialog" ).dialog( "open" );
        $.ajax({
          url:  base_url + 'api_key=' + key + '&q=' + user_input,
          dataType:' text/html',
          }).done(function(data) {
            console.log(data)
            for (let i = 0; i < data.data.length; i++) {
              // console.log(data.data[i].embed_url);
              let image = document.createElement('img')
              image.src = data.data[i].embed_url;
              document.getElementById('gifs_div').appendChild(image);
            }
          });
          console.log(user_input);
          console.log('looking up!');
        });
      } );

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <div id="dialog" title="Basic dialog">
      <div class="gifs_div"></div>
    </div>
    <input id="rio" type="button" value="Gifs" title="Gifs"/>

Answer 1

$( function() {
  $( "#dialog" ).dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });
  $('#rio').on('click',function () {
    let user_input = prompt();
    const base_url = 'https://api.giphy.com/v1/gifs/search?'
    const  key = 'kibe1qE9jIYwWBU0V5YTuNJqYZPEOxOy';
    $( "#dialog" ).dialog( "open" );
        $.ajax({
          method: 'get',
          url:  base_url + 'api_key=' + key + '&q=' + user_input,
          }).done(function(data) {
             // console.log(data)
            for (let i = 0; i < data.data.length; i++) {
              let frame = document.createElement('iframe');
              frame.src = data.data[i].embed_url;
              frame.title = "GIPHY GIF for " + user_input;
              document.body.appendChild(frame);
            }
          });
          console.log(user_input);
          console.log('looking up!');
        });
      } );

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <div id="dialog" title="Basic dialog">
      <div class="gifs_div"></div>
    </div>
    <input id="rio" type="button" value="Gifs" title="Gifs"/>

在这里试试我删除了 dataType:' text/html',来自 ajax 调用，并添加了 method: 'get', ，希望可以帮到你。