jquery - jQuery .load 与 getJSON 结果中的引号输出

Question

我有以下 jQuery，用于设置每个(空)DIV(具有以字母字符开头的唯一 id)的内容，该 DIV 具有 class = 'editable'。我使用带有 GET 方法的 MVC4 api Controller 来返回 HTML 字符串。

由于某种原因，下面的 loadStuff 函数正在输出引号，这些引号可以在网页中返回的内容之前和之后看到。这种情况发生在每个 DIV 上，并且绝对不会在返回字符串的 api Controller 方法中返回。

$(document).ready(function () {
     $('.editable').each(function () {
          var curId = this.id.replace('content', '');
          loadStuff(curId, this.id);
     })
});

function loadStuff(curId, targetId) {
     $('#' + targetId).load('api/briefingItem/' + curId);
}

但是，当我用下面的代码替换 loadStuff 函数并使用 .appendTo 时，引号不会出现。

function loadStuff(curId, targetId) {
     $.getJSON("api/briefingItem/" + curId,
          function (data) {
               $(data).appendTo('#' + targetId);
          })          
}

对于返回一个简单的字符串和文档表明，这似乎有点过分了。谁能解释一下这种不寻常的行为？

API Controller

// GET api/BriefingItem/5
public string Get(int id)
{
    string newVal = string.Empty;

    switch (id)
    {
        case 12:
            newVal = @"<p>this is some example text that you can edit inside the <strong>tinymce editor</strong>.</p><p>nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. nam sed lectus quam, ut sagittis tellus. quisque dignissim mauris a augue rutrum tempor. donec vitae purus nec massa vestibulum ornare sit amet id tellus. nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. aliquam molestie volutpat dapibus. nunc interdum viverra sodales. morbi laoreet pulvinar gravida. quisque ut turpis sagittis nunc accumsan vehicula. duis elementum congue ultrices. cras faucibus feugiat arcu quis lacinia. in hac habitasse platea dictumst. pellentesque fermentum magna sit amet tellus varius ullamcorper. vestibulum at urna augue, eget varius neque. fusce facilisis venenatis dapibus. integer non sem at arcu euismod tempor nec sed nisl. morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros.</p>";
            break;
        case 13:
            newVal = @"<p>look up $(content).load() jquery method and the callback function.</p>";
            break;
        default:
            newVal =  @"<h3>click to enter content.</h3>";
            break;
    }

    return newVal;
}

Answer 1

来自 Web API 的实际响应是一个用双引号括起来的字符串。

$.getJSON() 和 .load() 方法之间的区别在于 $.getJSON 方法假设响应是一个 JSON 编码字符串 => 它去掉了双引号，其中 .load 假定为 HTML，并且不对结果进行任何处理。

因此，您可以让 Web API Controller 操作返回 text/html 而不是 application/json 编码的请求:

public HttpResponseMessage Get(int id)
{
    string newVal = string.Empty;

    switch (id)
    {
        case 12:
            newVal = @"<p>this is some example text that you can edit inside the <strong>tinymce editor</strong>.</p><p>nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. nam sed lectus quam, ut sagittis tellus. quisque dignissim mauris a augue rutrum tempor. donec vitae purus nec massa vestibulum ornare sit amet id tellus. nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. aliquam molestie volutpat dapibus. nunc interdum viverra sodales. morbi laoreet pulvinar gravida. quisque ut turpis sagittis nunc accumsan vehicula. duis elementum congue ultrices. cras faucibus feugiat arcu quis lacinia. in hac habitasse platea dictumst. pellentesque fermentum magna sit amet tellus varius ullamcorper. vestibulum at urna augue, eget varius neque. fusce facilisis venenatis dapibus. integer non sem at arcu euismod tempor nec sed nisl. morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros.</p>";
            break;
        case 13:
            newVal = @"<p>look up $(content).load() jquery method and the callback function.</p>";
            break;
        default:
            newVal =  @"<h3>click to enter content.</h3>";
            break;
    }

    var response = Request.CreateResponse(HttpStatusCode.OK);
    response.Content = new StringContent(newVal, Encoding.UTF8, "text/html");
    return response;
}

现在您可以使用 .load() 方法，但不能使用 $.getJSON 方法。