Question

我正在尝试向网站发出ajax请求并仅显示部分内容。我的代码不起作用，我看不出原因。另外，我如何解析对象并仅显示其中的一部分（只有一个属性）？非常感谢！

JS：

  $(document).ready(function(){
   $('#buttonClick').on('click', 'button',function(){
    $.ajax('http://ShakeItSpeare.com/api/sentence', {
     success: function(response){
      console.log(response)
   //console.log of response works 
        $('.screen').html(response).fadeIn();
      }
    })
  });
});

HTML

<body>
    <div id="buttonClick">
<button>click Me</button>
<ul class="screen"></ul>
    </div>

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

<script type="text/javascript" src="shakes.js"></script>
</body>

Answer 1

添加您尝试插入HTML的JSON属性名称只应插入该值。例如，在下面的代码中，我在“response.sentence”中添加了“sentence”属性。

$(document).ready(function(){
  $('#buttonClick').on('click', 'button',function(){
    $.ajax('http://ShakeItSpeare.com/api/sentence', {
     success: function(response){
        console.log(response)
        //changed original code from ".html(response)" to ".html(response.sentence)"
        $('.screen').html(response.sentence).fadeIn();
      }
    })
  });
});

工作代码笔：Working Codepen

Answer 2

我会使用这种结构：

 $(document).ready(function() {
            $('#buttonClick').on('click', 'button', function() {
                $.ajax({
                    type: "GET",
                    url: "http://ShakeItSpeare.com/api/sentence",
                    success: function(response) {

                        console.log(response);
                        console.log(response.sentence);
                        console.log(response.markov);
                        //console.log of response works

                        $('.screen').html(JSON.stringify(response)).fadeIn();
                        //$('.screen').html(response.sentence).fadeIn();

                    },
                    error: function(xhr, status, error) {
                        var err = eval("(" + xhr.responseText + ")");
                        console.log(err.Message);
                    }
                });
            });
        });

基于您的评论的替代方法：

   $(document).ready(function() {
        $('#buttonClick').click(function() {
            $.ajax({
                type: "GET",
                url: "http://ShakeItSpeare.com/api/sentence",
                dataType:'text',  // specify dataType as text and you wont need to convert the JSON 
                success: function(response) {
                    //console.log of response works
                    $('.screen').html(response).fadeIn();

                },
                error: function(xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });
        });
    });

Answer 3

嗯..你应该从Object获取String。这将是

 $(document).ready(function(){
   $('#buttonClick').on('click', 'button',function(){
    $.ajax('http://ShakeItSpeare.com/api/sentence', {
     success: function(response){
      console.log(response)
   //console.log of response works 
        $('.screen').html(response["sentence"]); // Changed this one from "response" to "response["sentence"]
      }
    })
  });
});


Object {sentence: "Nor goodly ilion stand.", markov: 2}

或将其字符串化。

Answer 4

您似乎缺少请求中的网址密钥

$(document).ready(function(){
   $('#buttonClick').on('click', 'button',function(){

    $.ajax({url:'http://ShakeItSpeare.com/api/sentence', //Add url: and move the {

     success: function(response){
      console.log(response)
        $('.screen').html(response).fadeIn();
      }
    })
  });
});

如果返回的响应具有内容类型的application / json，那么您将不需要执行JSON.parse（）如果它是json格式但是是字符串，那么您可以使用JSON.parse（）然后它将数据用作对象。

如果你做console.log（响应）它应该显示整个对象。

Answer 5

在console.log（响应）之后放一个分号

Ajax请求url并在div中显示响应不起作用？

5 个答案: