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被触发，但第二个不被触发。）

它们是我开发的两个不同的应用程序，所以在我做了一些研究后，这里有一个解释：

由于$.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");
        }
    });
});
}

这将阻止表单实际执行完整的POST到服务器。

Answer 3

我认为这会起作用

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()
    },
    cache: 'false',
    async: 'false',
    success : function() {
        alert("done");
    }
});

}）; }

jquery ajax似乎无法正常工作

3 个答案: