0

我正在尝试从一个常见的 html 文件（要在移动设备上加载）向我的服务器发送一个 ajax 请求，并且在这里遇到了一些问题。

如果我使用来自 WizTools 的 RestClient，我可以轻松地创建一个带有 body 的 json POST 命令{"email":"myemail", "password":"mypassword"}，并设置标题"Content-type":"application/json"和"Accept":"application/json".

但是当我添加 contentType 时，从浏览器中，它只是发送一个 OPTIONS 方法而不是 POST，并且服务器正在等待一个 POST。如果我取出 contentType 标签，则请求通过 POST 正常，但服务器不会将其识别为 JSON，因此会阻止请求。

为什么会这样？我该如何解决这个问题并列出用户的数据？

<html>
<head>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.mobile-1.2.0-alpha.1.min.js"></script>
    <script>

function runAjax() {
var url_p = "https://myserver/list";
var emailVal = "email@email.com"
var passwordVal = "mypwd"

  $.ajax({
type: 'POST', 
url: url_p,
dataType: "application/json",
contentType: "application/json; charset=utf-8",

data: { "email": emailVal, "password": passwordVal },
success: function (data, textStatus, jqXHR) {
                                            $("#result").html(data);
        },
error: function(jqXHR,error, errorThrown) {  
               if(jqXHR.status&&jqXHR.status==400){
                    alert(jqXHR.responseText); 
               }else{
                   alert("Something went wrong");
               }
          }, 
dataType: "json"
});
}


function resetValue(){
        $("#result").html("");
    }

</script>


</head>
<body>
    <button onclick="runAjax()">Post Ajax call</button>
    <button onclick="resetValue()">Reset value</button>
    <p>Result</p>
    <p id="result"></p>
</body>
</html>

谢谢

编辑

这似乎是 Ajax 的跨域问题。从那以后，我尝试使用 jsonp 作为数据类型，但是 HTTP 使用 GET 请求而不是 POST ......

我已经看到，在 2010 年不可能跨域使用 POST 和 jsonp ......我想知道现在是不是......

编辑 2

我最终使用了这个 ajax 代码（归功于 Pedro Carmona）：

<html>
<head>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.mobile-1.2.0-alpha.1.min.js"></script>
    <script>


    function rpc_call(){
        var http = new XMLHttpRequest();
        var url = "https://yourserver/list";
        var params = "email=Useremail&password=pwd";

        http.open("POST", url, true);
        http.setRequestHeader("Accept", "application/json");
        http.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        http.onreadystatechange = function() {//Call a function when the state changes.
            if(http.readyState == 4 && http.status == 200) {
                $("#resposta").html(http.responseText);
            }
        }
        http.send(params);

    }
    function apagaConteudo(){
        $("#resposta").html("");
    }
    </script>
</head>
<body>
    <button onclick="rpc_call()">Post Ajax call</button>
    <button onclick="apagaConteudo()">Apagar conteudo</button>
    <p>Resposta</p>
    <p id="resposta">____Cena______</p>
</body>
</html>
4

1 回答 1

0

这是一个苛刻的问题，但现在终于用 CORS 解决了。

感谢 Tom 的帖子，Forrest Zeisler 的评论，Sam 的帖子

将此行添加到您的路线文件

match '/list', to: 'things#options', via: :options

这给你的“东西”控制器：

def options

    render text:""

end

和

将这些行添加到 application_controller.rb 文件

...
before_filter :cors_preflight_check
after_filter :cors_set_access_control_headers
...
def cors_set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
    headers['Access-Control-Max-Age'] = "1728000"
    headers['Access-Control-Allow-Headers'] = 'content-type, accept'

  end

  def cors_preflight_check
    if request.method == :options
      headers['Access-Control-Allow-Origin'] = '*'
      headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
      headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version, X-CSRF-Token'
      headers['Access-Control-Max-Age'] = '1728000'
      render :text => '', :content_type => 'text/plain'
    end
  end
于 2012-08-10T18:49:33.787 回答