为什么 JQuery 的 .post 没有返回数据?
我将 JSON 请求发布到远程服务。一切都很好,服务很好,对我的反应也很好。但我没有从远程服务返回数据。如何通过JQuery通过.post从远程json服务获取数据?为什么此示例返回数据 - “null”:
<SCRIPT>
$(function() {
$('#zzz').click(function() {
$('#lak').html('wait...');
$.post(
'http://127.0.0.1:3000/test',
"{\"ipaddr\":\"192.168.132.58\"}",
function(data) { alert(data); },
"json"
)
});
});
</SCRIPT>
但是 TCP 嗅探器向我显示服务返回了一些数据:
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Type: application/json
X-Powered-By: Mojolicious (Perl)
Date: Thu, 02 Sep 2010 06:17:10 GMT
Content-Length: 37
Server: Mojolicious (Perl)
{"status":"OK","result":"successful"}
已解决:
<SCRIPT>
$(function() {
$('#clickme').click(function() {
$.getJSON('http://domain.tld/test/?foo=bar&callback=?',
function(jsonp) {
$('#jsonp-example').html(jsonp.result);
});
});
});
</SCRIPT>
<div id="jsonp-example"><a id="clickme" href="javascript:void()">Click me</a></div>
Mojolicious JSONP 服务的示例:
# /test/?foo=bar&callback=smth
get '/test' => sub {
my $self = shift;
my $foo = $self->param('foo') || '';
my $callback = $self->param('callback') || 'jsonp';
...
my $json = $self->render(
json => {
'status' => 'OK',
'result' => 'successful'
},
partial => 1);
$self->render(data => "$callback($json)", format => 'js');
} => 'test';
I post JSON request to remote service. Everything is OK, service works fine and it response to me. But I have no data returned from remote service. How to get data from remote json service by JQuery via .post? Why this example returns the data -- ``null':
<SCRIPT>
$(function() {
$('#zzz').click(function() {
$('#lak').html('wait...');
$.post(
'http://127.0.0.1:3000/test',
"{\"ipaddr\":\"192.168.132.58\"}",
function(data) { alert(data); },
"json"
)
});
});
</SCRIPT>
But the TCP sniffer shows me that service returns some data:
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Type: application/json
X-Powered-By: Mojolicious (Perl)
Date: Thu, 02 Sep 2010 06:17:10 GMT
Content-Length: 37
Server: Mojolicious (Perl)
{"status":"OK","result":"successful"}
Solved:
<SCRIPT>
$(function() {
$('#clickme').click(function() {
$.getJSON('http://domain.tld/test/?foo=bar&callback=?',
function(jsonp) {
$('#jsonp-example').html(jsonp.result);
});
});
});
</SCRIPT>
<div id="jsonp-example"><a id="clickme" href="javascript:void()">Click me</a></div>
And example of Mojolicious JSONP service:
# /test/?foo=bar&callback=smth
get '/test' => sub {
my $self = shift;
my $foo = $self->param('foo') || '';
my $callback = $self->param('callback') || 'jsonp';
...
my $json = $self->render(
json => {
'status' => 'OK',
'result' => 'successful'
},
partial => 1);
$self->render(data => "$callback($json)", format => 'js');
} => 'test';
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
您遇到了同源策略,它阻止(除其他外)XmlHttpRequest从远程域获取数据。您的 POST将会成功,但浏览器不允许您取回响应。
由于您要访问远程域,因此最好的办法是支持 JSONP,它以不同的方式工作,你不能 POST,所以它会得到一个 GET,但它允许你取回数据。 JSONP 使用完全不同的方法来获取数据,基本上将回调定义为名称函数,然后在页面中创建
标记。远程服务器使用
namedFunction({ ...JSON data })
进行响应,您的页面可以运行该函数...而无需 XmlHttpRequest。You'e running into the same-origin policy which prevents (among other things) an XmlHttpRequest from getting data from a remote domain. Your POST will be successful, but the browser won't allow you to get the response back.
Since you're going to a remote domain, your best shot is to support JSONP, it works in a different way, you can't POST so it'll get a GET, but it will allow you to get data back. JSONP uses an entirely different method of getting the data, basically defining your callback as a name function then creating a
<script>
tag in the page. The remote server responds withnamedFunction({ ...JSON data })
, which your page runs...without needing an XmlHttpRequest.jquery 使用 post 返回的数据来确定请求是否成功。如果不是这种情况,则会引发异常。
The returned data from the post is used by jquery to determine if the request was successful or not. If it's not the case, an exception will be raised.
您的客户端代码似乎没有任何问题jsFiddle,但是,您可能想要更改< code>"{\"ipaddr\":\"192.168.132.58\"}" 到
{ipaddr:"192.168.132.58"}
因为这与发送表单相同对于名为ipaddr
且值为192.168.132.58
的字段,您自己的选择是发送名为{"ipaddr":"192.168.132.58"} 为空值。
祝你好运。
Doesn't seem to be anything wrong with your client side code jsFiddle, however, you probably want to change
"{\"ipaddr\":\"192.168.132.58\"}"
to{ipaddr:"192.168.132.58"}
since that would be the same as sending a form with a field namedipaddr
with the value192.168.132.58
, your own option was sending a field named{"ipaddr":"192.168.132.58"}
with the empty value.Good luck.
尝试检查服务器端输出中是否有随机空格,具体取决于可能会扰乱解析的浏览器。
Try and check your server side output for random whitespace, depending on browser that might mess up parsing.
“就它们的用途而言 - 唯一真正的技术差异(如果我错了,请纠正这篇文章)是 GET 对查询字符串的限制要短得多。实际上,GET 是用于获取某些内容时的当您打算在服务器上发送某些内容并让它执行某些操作时,GET 调用不应对服务器造成副作用。” ?)
(jquery.post 和 jquery.get 之间的区别 尝试过 $.get() 吗?它应该更快并且更多地用于从服务器返回数据...这是一些文档: http: //api.jquery.com/jQuery.get/
"As far as what they're meant for - the only real technical difference (please correct this post if I'm wrong) is that GET has a much shorter limit to the query string. In practice, GET is meant for when fetching something from the server. A GET call should not cause side effects on the server. POST is when you intend to send something on the server and have it do something with it." (Difference between jquery.post and jquery.get?)
Have u tried $.get()? It should be faster and is more used to return data from server... Here is some documentation: http://api.jquery.com/jQuery.get/