使用 Jquery / Ajax 和 WebApi Get 方法加载选项卡答案

【问题标题】：Loading tabs with Jquery / Ajax and WebApi Get Method使用 Jquery / Ajax 和 WebApi Get 方法加载选项卡
【发布时间】：2013-05-24 11:12:24
【问题描述】：

我正在学习 jquery/ajax 并进行一些测试。我正在尝试从 asp.net WebApi 应用程序提供 html，并在用户选择所需的选项卡时将其加载到 JqueryUI 选项卡中。

我无法加载我的 html 内容。

我正在关注这个link的教程

这是我正在使用的 html：

<!DOCTYPE html>
<html>

<head>
<title> Este es el pedazo de titulo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/ui.tabs.closable.min.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
<script>
$(document).ready(function(){

    $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
     });
   });  
 });

</script>
</head>

<body>

<div id="tabs">
  <ul>   
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="http://localhost/RestFulApi/api/Tabs?name=carlos">Tab 2</a></li>    
  </ul> 
   <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>  

</body>

</html>

如您所见，我已修改 Tab2 上的 href 以从我的 WebApi 服务加载

在 webApi 服务中，我正在使用以下函数，它返回 html没有任何问题：

public class TabsController : ApiController
    {
        //
        // GET: /Tabs/

        public HttpResponseMessage Get(string name)
        {

            string div= "<div style=\"color:white;background-color:red;width:350px;height:300px\"> Hello " +
                  name+ "<br>This html have being server from webApi!</div>";
            return new HttpResponseMessage
            {
                Content = new StringContent(div, Encoding.UTF8, "text/html")
            };
        }

    }

问题是每当我单击 tab2 时，我都会收到预定义的错误消息：

Couldn't load this tab We'll try to fix this as soon as possible.

知道为什么我的标签没有填满我的 Html 响应吗？

编辑：

好的，我在后面加了console.log(arguments)

 ui.jqXHR.error(function() {}

我收到以下错误：

XMLHttpRequest 无法加载 http://mydomain/RestFulApi/api/Tabs?name=carlos。原点 null 不是 Access-Control-Allow-Origin 允许。

【问题讨论】：

一些提示：确保域相同（注意本教程仅使用相对链接），并且不包含<html><body> 标签。
我没有使用相对链接。已从 html 响应中删除。感谢您的提示

标签： c# jquery html ajax asp.net-web-api

【解决方案1】：

在对 Access-Control-Allow-Origin 问题进行一些研究后，我通过在 IIS 服务器上执行我的应用程序并更改 href 路径来修复它

到以下：

 <li><a href="/RestfulApi/api/Tabs?name=carlos">Tab 2</a></li>

【讨论】：