Jquery 使用ajax发出post请求
我试图向api发出一个简单的请求并返回结果,但我的请求从未启动(我也在看fiddler)。我做错了什么Jquery 使用ajax发出post请求,jquery,ajax,Jquery,Ajax,我试图向api发出一个简单的请求并返回结果,但我的请求从未启动(我也在看fiddler)。我做错了什么 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
makePostRequest("http://www.mocky.io/v2/587ccd320f000081015dxxxx", "dummy_json", null, "post", "json", "div");
});
});
function makePostRequest(url, data, headers, httpVerb, dataType, elementId){
alert('click');
$.ajax({
url: url,
type: httpVerb,
data: data,
headers: {
Header_Name_One: 'Header Value One',
"Header Name Two": 'Header Value Two'
},
dataType: 'json',
success: function (data) {
alert("success");
}
}).done(function(msg){
alert('done');
});
}
</script>
</head>
<body>
<button id="button">Send an HTTP POST request to a page and get the result back</button>
<div id="div">
</body>
</html>
$(文档).ready(函数(){
$(“#按钮”)。单击(函数(){
makePostRequest(“http://www.mocky.io/v2/587ccd320f000081015dxxxx“,“dummy_json”,null,“post”,“json”,“div”);
});
});
函数makePostRequest(url、数据、标题、httpVerb、数据类型、elementId){
警报(“点击”);
$.ajax({
url:url,
类型:httpVerb,
数据:数据,
标题:{
标题名称:“标题值一”,
“标题名称二”:“标题值二”
},
数据类型:“json”,
成功:功能(数据){
警惕(“成功”);
}
}).done(函数(msg){
警报(“完成”);
});
}
向页面发送HTTP POST请求并返回结果
如果在控制台中检查请求,您将看到以下错误:
SyntaxError:未能对“XMLHttpRequest”执行“setRequestHeader”:“Header Name Two”不是有效的HTTP标头字段名
这是因为标题键不能包含空格。如果将标题更改为header\u Name\u Two
则代码工作正常:
$(document).ready(function() {
$("#button").click(function() {
makePostRequest("http://www.mocky.io/v2/587ccd320f000081015dxxxx", "dummy_json", null, "post", "json", "div");
});
});
function makePostRequest(url, data, headers, httpVerb, dataType, elementId) {
$.ajax({
url: url,
type: httpVerb,
data: data,
headers: {
Header_Name_One: 'Header Value One',
Header_Name_Two: 'Header Value Two'
},
dataType: 'json',
success: function(data) {
alert("success");
}
}).done(function(msg) {
alert('done');
});
}
以上注意事项
您正在提出跨域请求。“mocky.io”域的响应中不包含CORS头,正如您从上面的fiddle中看到的新错误:
对飞行前请求的响应未通过访问控制检查:请求的资源上不存在“访问控制允许来源”标头
这意味着您需要更改请求以检索JSONP格式的数据——假设第三方支持这一点,而很多人不支持。或者,您需要在服务器上而不是JS上发出请求。您在控制台中看到任何错误吗?不,我在控制台中没有看到任何错误。这是您正在进行的跨域调用吗?选中此链接默认情况下会进行提交,除非您指定其
type=“button”
属性,否则按下按钮时是否会重新加载页面?我自己尝试过。如果您按照jquery文档处理“error”回调(即,我使用了error:function(jqXHR,textStatus,errorhorn){alert(“error:+textStatus+”+errorhorn);}
那么您会得到“SyntaxError:未能在'XMLHttpRequest'上执行'setRequestHeader':'headername Two'不是有效的HTTP头字段名。”是的,你的例子是有效的。但我已经更新了代码,为“完成”和“失败”添加了回调。有趣的是,即使我在fiddler中看到请求的状态为200,也会执行失败回调。你知道原因吗?但是我配置了mocky在响应>HTTP/1.1 200 OK Server:Cowboy Connection中添加此头:关闭内容类型:application/json;charset=utf-8访问控制允许来源:*日期:2017年1月18日星期三09:52:50 GMT Via:1.1 vegur这是responseOk的一部分,应该可以。如果您添加了fail()
handler您可以使用传递给它的参数来诊断错误。嗯……奇怪的是:我添加了:.fail(function(msg){alert(JSON.stringify(msg))}),在警报中我看到类似于:“status”:200,“StatusText”:“OK”,“readyState”:4…这意味着请求以成功结束,对吗?如果是,那么为什么会触发失败回调?如果否,那么为什么状态为200?