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

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

$.getJSON()和.load()方法之间的区别在于$.getJSON方法假定响应是JSON编码的字符串=＆gt;它删除双引号wheres .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方法。

Answer 2

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

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

引用jQuery .load vs getJSON结果的输出

2 个答案: