引用 jQuery .load 与 getJSON 结果中的输出

Question

我有以下 jQuery 设置每个（空）DIV（具有以字母字符开头的唯一 id）的内容，它具有 class= 'editable'。我正在使用带有 GET 方法的 MVC4 api 控制器来返回 HTML 字符串。

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

$(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 控制器

// 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

如果您可以发布控制器 API 签名，那就太好了。

load 和 getJSON 的行为是不同的，我假设控制器返回一个 JsonResult 并因此发送引号，加载盲目地发布控制器返回的任何内容作为 HTML 以及引号

Answer 2

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

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

因此，您可以让 Web API 控制器操作返回 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 方法。