jQuery/Ajax登录框-JSONP还是CORS

Question

我需要构建一个满足以下要求的登录框：

• 将其构建为一个UI组件，可以在网站的多个位置使用
• 该组件的两个实例可以存在于同一页面上
• 使用jQuery、HTML5和CSS3
• 您的网站支持IE9+和Safari、Chrome、，Firefox
• 您的网站支持iOS6
• 登录表单使用AJAX将用户名和密码数据提交给：api.yoursite.com/login

这是一个演示/测试，所以引用的站点是假设的(但解决方案显然需要在真实的站点上通过)

最后一个要求的措辞有点奇怪——我应该假设api.yoursite.com/login存在于同一个域上吗？也许我想得太多了，但我最初的想法正好相反，并开始研究跨领域的方法。我的小提琴可以在这里找到：http://jsfiddle.net/manh2244/rwxq5/8/.我尝试使用JSONP，但没有成功：

$(":submit").click(function (e) {
var username = $(".loginID").val();
var password = $(".loginPassword").val();
$.ajax({
url: "http://api.yoursite.com/login",
type: "GET",
data: {
username: username,
password: password
},
dataType: "jsonp",
success: function (data) {
console.log(data);
},
error: function (jq, status, message, data) {
alert('A jQuery error has occurred. Status: ' + status + ' - Message: ' + message);
console.log(data);
}
});
e.preventDefault();
});

我不知所措，现在想知道是否：

1. 我应该调查CORS
2. 如果我真的想得太多了，也许解决方案比我想象的要简单得多
3. 不管怎样，我仍然没有考虑表单提交后服务器端会发生什么。一个要求表明我只能使用jQuery、HTML和CSS，这些似乎都不合适。也就是说，除非我可以有一个login.php文件，否则这些要求仅用于构建登录框。它们不考虑提交登录凭据后会发生什么

Answer 1

尝试如下修改您的ajax调用：

$.ajax({
url: "http://api.yoursite.com/login",
type: "POST",
crossDomain: true,
data: {
username: username,
password: password
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (jq, status, message, data) {
alert('A jQuery error has occurred. Status: ' + status + ' - Message: ' + message);
console.log(data);
}
});

如果您的应用程序适用于最新的浏览器，请使用CORS。这会让你的生活轻松很多。使用CORS时，您必须更改服务器端的响应标头。下面是python中的一个例子，您应该能够用php或服务器端使用的任何语言编写类似的代码：

response = HttpResponse(json.dumps('{"status" : "success"}'))
response.__setitem__("Content-type", "application/json")
response.__setitem__("Access-Control-Allow-Origin", "*")
return response