84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
菜鸟遇到的问题是:pjax改变url,并作相应刷新局部页面。但是如果直接进入到这个url,就会出现问题(页面显示Ajax返回的JSON数据),求大神提供个正确思路
学习是最好的投资!
我的方法是用Accept头来判断请求类型。比如对于同样一个url,/products:请求的时候设置accept为text/html,方法为get,则会返回一个html页面。如果accept为application/json,方法为get,则返回一个json格式的product列表。/products?limit=20则会返回列表中前20个项目。如果accept为application/json,方法为put,则会添加一个product。大概就是这样,通过url,http method,accept来控制请求的结果,
/products
/products?limit=20
Request URL:/products Request Method:GET Request Headers Accept:application/json, text/plain, */* Response Headers date:Sun, 24 Nov 2013 07:02:46 GMT items-count:3 page-count:1 page-number:1 page-step:20 Server:BWS/1.0 vary:Accept-Encoding x-powered-by:Express
如果后端用了express框架的话就好办了。
express
res.format({ 'text/html': function() { // 这里是直接用 url 访问的 render 逻辑 // res.render('products', {...}); }, 'application/json': function() { // 这里是 ajax 方式的逻辑 // res.send({...}); } });
大部分的JavaScript框架在发送Ajax请求时会附带一个标识Ajax的请求头:
{"HTTP_X_REQUESTED_WITH" : "XmlHttpRequest"}
如果没有,可以手动设置一个,在jQuery中是这样:
$.ajax { beforeSend: function(jqXHR, settings) { jqXHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); } };
这样在服务端就可以根据请求头作判断了,类似于这样:
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { /* special ajax here */ // send JSON data } else { // send html data }
我的方法是用Accept头来判断请求类型。
比如对于同样一个url,
/products
:请求的时候设置accept为text/html,方法为get,则会返回一个html页面。
如果accept为application/json,方法为get,则返回一个json格式的product列表。
/products?limit=20
则会返回列表中前20个项目。如果accept为application/json,方法为put,则会添加一个product。
大概就是这样,通过url,http method,accept来控制请求的结果,
如果后端用了
express
框架的话就好办了。大部分的JavaScript框架在发送Ajax请求时会附带一个标识Ajax的请求头:
如果没有,可以手动设置一个,在jQuery中是这样:
这样在服务端就可以根据请求头作判断了,类似于这样: