好记忆不如按烂笔头... ...
今天接到一个项目,让通过ajax 的方式去访问南方某公司,某系统的数据,所有东东都在html上展示,没有后台的操作。
给定了个url,规定传递的参数,其他就没有其他了,哥也不管那么多了,直接在html上写个ajax ,直接调用:
$(function(){
$("#login").click(function(){
var username = $("#username").val();
var password = $("#password").val();
if (username==null || username=="") {
$("#usernameTag").html("请输入用户名之后再提交!");
return false;
}else{
$("#usernameTag").html("");
}
if (password==null || password=="") {
$("#passwordTag").html("请输入密码之后再提交!");
return false;
}else{
$("#passwordTag").html("");
}
$.ajax({
type: "POST",
url: "http://xxxx/login",
data: {"username":username,"password":password},
dataType:"json",
async : false,
success: function(msg){
alert(msg);
}
});
});
});
哥点击了下都没有提任何的提示,哥就迅速到FF上一看,我去,403 ,不让访问,妹子,你觉得哥好欺负,这么玩我。
果断找到妹子,妹子告诉哥,要加个headers 的 HTTP_AUTHORIZATION 信息,也就ajax跨域请求的时候,需要设置请求头信息。
哥去查了下jquery的api ,好像额米有设置这玩意的东西,然后哥就去度娘上查看了。顺便把过程记录下;
jQuery API 上 没有直接说设置哪里可以设置headers信息,但是他的beforeSend 方法却说: 在发送请求之前调用,
并且传入一个XMLHttpRequest作为参数... ... 欧克 ,哥知道如何去做了!
1.只访问一次,需要的添加headers信息,那就不用那么麻烦了。
// Request with custom header
$.ajax({
url: 'url',
headers: { 'HTTP_AUTHORIZATION': 'Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a' }
});
2. 如果是给每个ajax的请求都设置一个默认的headers,那就如此操作:
$.ajaxSetup({
headers: { 'HTTP_AUTHORIZATION': 'Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a' }
});
// Sends your custom header
$.ajax({ url: 'url' });
// Overwrites the default header with a new header
$.ajax({ url: 'url', headers: { 'x-some-other-header': 'some value' } });
3.如果是给每个ajax的请求都设置一个自己的headers,那就如此操作:
$.ajaxSetup({
beforeSend: function(xmlhttp) {
xmlhttp.setRequestHeader('HTTP_AUTHORIZATION', 'Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a');
xmlhttp.setRequestHeader('Access-Control-Allow-Origin', "www.baidu.com");
}
});
// Sends your custom header
$.ajax({ url: 'url' });
// Sends both custom headers
$.ajax({ url: 'url', headers: { 'x-some-other-header': 'some value' } });
以上三种可以根据实际情况去选用,但是具体适用方式基本都是如此,无非就是多加几个设置罢了。
如此往上已添加,OK 了,能访问远程的url了,可是没有东西,哥一看,我去,500 ,就潇洒的给
妹子来了句:妹子 500 了,哥能做的就这些了,你的server 你自己来吧。
notes:
啃爹1、那边要求的是post提交方式,但是按照上面的这种设置,调试发现,方法变成了:Options,这是操蛋的很了,怎么回事?
随后加了:
document.domain = “访问的URL” ; 发现可以在FF上显示post 提交方式了。
啃爹2,本机的FF上调试是POST 了,但是到他那边的服务器就options了,哥真的是无语,真正找寻解决方案。
今天尝试了下,使用如下方式也可以实现ajax 的跨域请求:
$.ajax({
url:"http://xxxxl/list",
type: "POST",
dataType:"json",
data:{"uid":uid},
async: false,
headers: {
"Authorization":"Token a9baf4e0fc59d29a203fd7cb8ced23a3cbb5d78a", //内容的Authorization
"Content-Type":"application/x-www-form-urlencoded" //请求内容头
},
success:function(object){
if (object.success==true) {
alert("评论成功!");
}else{
alert(object.msg);
}
},
error: function() {
alert(" bad request!");
}
});
好些东西,真的是不去尝试,不知道怎么运用.