使用Jquery / Ajax和WebApi Get方法加載選項卡

Question

我正在學習jquery / ajax並進行一些測試。 我試圖從asp.net WebApi應用程序提供html，並在用戶選擇所需的標簽時將其加載到JqueryUI標簽中。

我無法加載我的HTML內容。

我正在關注此鏈接上的教程

這是我正在使用的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 。 Access-Control-Allow-Origin不允許使用Origin null。

Answer 1

在對Access-Control-Allow-Origin問題進行了一些研究之后，我通過在IIS服務器上執行應用程序並更改href路徑來解決了該問題。

到以下內容：

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

使用Jquery / Ajax和WebApi Get方法加載選項卡

問題描述

1 個解決方案

解決方案1
0 已采納 2013-05-29 09:30:33

使用Jquery / Ajax和WebApi Get方法加載選項卡

問題描述

1 個解決方案

解決方案1 0 已采納 2013-05-29 09:30:33

解決方案1
0 已采納 2013-05-29 09:30:33