jquery ajaxが機能していないようです

Question

ここに私のHTMLがあります。単純なフォーム：

<form> 
    Username: 
    <input type="text" id="username"/> 
    <br/> 
    Password: 
    <input type="password" id="password"/> 
    <br/> 
    <input type="submit" id="submit" value="submit"/> 
</form> 

ここでは、それに関連付けられている私のJSです：

function init(){ 
$("#submit").click(function() { 
    var url = "http:example.com/mail"; 
    alert("what?"); 
    $.ajax(url, { 
     type : 'post', 
     data : { 
      'username' : $("#username").val(), 
      'password' : $("#password").val() 
     }, 
     success : function() { 
      alert("done"); 
     } 
    }); 
}); 
} 

私は送信ボタンをクリックした後、$.ajax機能は、私が続けてURLにポストを行うことになっています私のサーバーは動いています。

しかし、私のサーバー側のログやFirebugネットワークの監視からは、POSTメソッドの兆候は見られませんでした。 （最初のalertがトリガが、2番目はありませんでした。）

を彼らは私が開発した2つの異なるアプリケーションなので、私はいくつかの研究をした後、ここに一つの説明です：$.ajax()はXMLHttpRequestを使用しているため

は、 XHRのクロスドメイン制限が適用されます。あなたのSiteAとSiteBは異なるホスト/ポートにありますか？そうであれば、期待される動作が見られます。

そうですか？もしそうなら、回避策はありますか？

Answer 1

フォームの既定の送信を防ぐには、クリックハンドラの最後にreturn false;が必要です。フォームを送信しないようにすると、クロスドメイン制限が適用されますが、解決するのは簡単ではありません。解決方法はjsonpを参照してください。

Answer 2

は

function init(){ 
$("#submit").click(function(event) { 
    event.preventDefault(); 

    var url = "http:example.com/mail"; 
    alert("what?"); 
    $.ajax(url, { 
     type : 'post', 
     data : { 
      'username' : $("#username").val(), 
      'password' : $("#password").val() 
     }, 
     success : function() { 
      alert("done"); 
     } 
    }); 
}); 
} 

この

は、実際にサーバへの完全なポストをやってからフォームを停止します...これにあなたのイベントハンドラを変更し

。

Answer 3

私は、これは

function init(){ 

$（ "＃は提出を"）に動作すると思います。（関数（イベント）{
event.preventDefaultを（）;

var url = "http:example.com/mail"; 
alert("what?"); 
$.ajax(url, { 
    type : 'post', 
    data : { 
     'username' : $("#username").val(), 
     'password' : $("#password").val() 
    }, 
    cache: 'false', 
    async: 'false', 
    success : function() { 
     alert("done"); 
    } 
}); 

}）; }