0

一般的なhtmlファイル（モバイルにロードされる）からサーバーにajaxリクエストを送信しようとしていますが、ここでいくつかの問題が発生しています。

RestClientを使用する場合、WizToolsから、bodyを使用してjson POSTコマンドを簡単に作成し、{"email":"myemail", "password":"mypassword"}ヘッダー"Content-type":"application/json"とを設定できます"Accept":"application/json"。

しかし、ブラウザからcontentTypeを追加すると、POSTではなくOPTIONSメソッドが送信され、サーバーは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はPOSTではなくGETリクエストを使用します...

2010年には、ドメイン間でjsonpでPOSTを使用できなかったことがわかりました...今はそうなのだろうか。

編集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で解決されました。

トムの投稿、フォレスト・ザイスラーのコメント、サムの投稿に感謝します。

この行をルートファイルに追加します

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 に答える