Question

Html

<div>
    <select id="method">
        <option value="get">GET</option>
        <option value="post">POST</option>
        <option value="put">PUT</option>
    </select>
    <input type="button" value="Try it" onclick="sendRequest()" />
    <span id='value1'>(Result)</span>
</div>

Jquery的

@section scripts {
    <script>
        // TODO: Replace with the URL of your WebService app
        var serviceUrl = 'http://localhost:99999/api/books';

        function sendRequest() {
            var method = $('#method').val();

            $.ajax({
                type: method,
                url: serviceUrl,
                dataType: 'json',
                success: function (data) {
                    $('#value1').text(data);
                    console.log(data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#value1').text(jqXHR.responseText || textStatus);
                }
            });
        }
    </script>

success函数显示的是[object，Object]数组。控制台显示每个对象的数据，但不显示在页面上。

对于每本书，我必须列出身份证，头衔和作者。

public IHttpActionResult Get()
        {
            IQueryable<BookDTO> books;
            books = from b in db.Books
                    select new BookDTO()
                    {
                        Id = b.Id,
                        Title = b.Title,
                        AuthorName = b.Author.Name
                    };
            return Ok(books);

console.log Output

Answer 1

$('#value1').text(data);

这是您要设置为文本的整个对象。

您可能希望查看data变量的内容，然后将其中的值作为文本追加。

Answer 2

正如其他人所说，你看到这个的原因是因为将data对象分配给文本值。由于该对象不是字符串，因此调用Object.prototype.toString()来显示对象的字符串表示形式，或"[object Object]"。

放置debugger语句并打开浏览器的开发控制台/检查器并重新加载页面。执行将在语句的位置停止，允许您以交互方式浏览对象并确定哪些字段适合显示（例如，如果data对象包含有关某人的信息，您将发现data.name和而是将其分配给元素。）

success: function (data) {
    $('#value1').text(data);
    debugger;
    console.log(data);
},

Answer 3

由于您现在知道data是一个数组，因此您可以使用Array#forEach来迭代它。

您必须修改html，为容器<div>添加id以定位并排除第一个<span>元素。

然后，您可以在每次迭代时附加一个HTML元素，其中包含data数组中每个元素的数据：

<div id="container">
  <select id="method"> 
    <option value="get">GET</option> 
    <option value="post">POST</option> 
    <option value="put">PUT</option> 
  </select> 
  <input type="button" value="Try it" onclick="sendRequest()" /> 
  <!--- <span id='value1'>(Result)</span> remove because these can be added dynamically --->
</div>

然后你的成功回调看起来像：

success: function (data) { 
  data.forEach(function(dataObj, index){
    var id = dataObj.Id,
      title = dataObj.Title,
      author  = dataObj.AuthorName;

    // Target div.container and append a span for every element in the data array
    $('#container').append(
      '<span>' +
        '<h3>' + title + '</h3>' +
        '<p>' + author + '</p>' +
      '</span>'
    ); 
  });
}

Ajax调用返回[object Object]

3 个答案: