Jquery Ajax请求到Sinatra应用程序

Question

我已经在这一段时间了，但我错过了一些东西。 我刚刚设置了一个返回JSON的简单Sinatra应用程序：

get '/json' do
  content_type :json
  $data.to_json
end

这工作正常，然后我用来做跨域请求的JavaScript

$.getJSON("http://domain.com/json?callback=?", function(data) {
   console.log(data);
});

不幸的是，我只是继续在控制台中得到错误Uncaught SyntaxError: Unexpected token :虽然我尝试过只使用$.ajax方法，但我仍然得到相同的结果。

这是我的服务器或客户端代码上的错误吗？ 任何帮助赞赏。

Answer 1

您提到您正在提出跨域请求。 对于JSONP，您需要包装json响应以模仿函数调用。 有一个Sinatra助手让它变得简单。

Answer 2

这里有不同端口的工作示例

Ruby与Sinatra

require 'rubygems'
require 'sinatra'
require "sinatra/jsonp"

get '/note/all/' do
  data = ["hello","hi","hallo"]
  JSONP data      # JSONP is an alias for jsonp method
End

在apache上托管的HTML

<head id="Head1" runat="server">
    <title> English </title>
    <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        // to update alternative address
        $('#Updateprofile').click(function () {
        var key = "nickname"
            var details = $('#nickname').val();
        $.ajax({
            type: 'GET',
            url: 'http://localhost:4567/note/all/',
            crossDomain: true,
            data: '',
            dataType: 'jsonp',
            success: function(responseData, textStatus, jqXHR) {
            $('#controlstatus').html(+responseData);
            },
            error: function (responseData, textStatus, errorThrown) {
            alert('POST failed.'+textStatus);
            }
        });
        });
    });
</script>
</head>
<body>
    <form id="mstform" method="post" runat="server">
<input id="nickname" type="text" style="border: thin solid #C0C0C0; background-color: #EFEFEF;
        width: 300px;" />
   <br />
    <br />
    <img alt="update" id="Updateprofile" src="images/save.png" title="Clicking this button will update your profile" />
   <br />
    <br />
<div id="controlstatus"> details should be here
</div>
    </form>
</body>