菜鸟遇到的问题是:pjax改变url,并作相应刷新局部页面。但是如果直接进入到这个url,就会出现问题(页面显示Ajax返回的JSON数据),求大神提供个正确思路
大部分的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 }
如果后端用了express
框架的话就好办了。
res.format({ 'text/html': function() { // 这里是直接用 url 访问的 render 逻辑 // res.render('products', {...}); }, 'application/json': function() { // 这里是 ajax 方式的逻辑 // res.send({...}); } });
我的方法是用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来控制请求的结果,
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