使用Jquery/Ajax和WebApi加载标签获取方法

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

我无法让我的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响应？

编辑：

好吧，我的

ui.jqXHR.error(function() {}

后添加console.log(arguments)，我收到以下错误：

XMLHttpRequest cannot load http://mydomain/RestFulApi/api/Tabs?name=carlos . Origin null is not allowed by Access-Control-Allow-Origin.

来源

2013-05-29 Carlos Landeras

一些要点：确保域是相同的（注意教程只使用了相对链接），并且它不包括''标签。 – hexblot

我没有使用相对链接。已从HTML响应中删除。感谢您的提示 –

做一些研究关于访问 - 后控制 - 允许 - 来源问题，我通过在IIS服务器上执行我的应用程序并更改href路径来解决它的问题

以下几点：

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

来源

2013-05-29 09:30:33

使用Jquery/Ajax和WebApi加载标签获取方法

回答

相关问题