JSONP和批量操作功能的实现方法

推荐一个好用的在线 Markdown 编辑器,比我自己用 Python 编译成 markdown 要方便多了。

[http://mahua.jser.me]

markdown简明语法教程

[http://www.appinn.com/markdown/]

好东西会让人免费为其推广,希望我自己也能做出几个有用的小工具。

一、JSONP的使用

jsonp,是一种数据格式,用来解决跨域问题。

比如,在 admin.chugang.net 需要一个二维码,而在 www.chugang.net 中已经存在生成二维码的功能。当然可以将www.chugang.net中生成

二维码的代码复制一套到 admin.chugang.net 中。但这造成了代码的重复,此种解决方案,是不被提倡的。于是,我采用 www.chugang.net
提供API供 admin.chugang.net 调用的方案。

admin.chugang.net 使用JS调用 www.chugang.net 的接口,遇到了跨域问题。普通的ajax请求
代码,如下:

$.ajax({
type : "post",
url : 'http://www.chugang.net/api',
dataType : 'json',
data : {'id' : 5, 'type' : 3},
beforeSend : function(){},
success : function(returnMsg){
//
},
error : function(){
} 
});

在使用过程中,若使用的是firefox,firebug插件会提示不能跨域请求。

听别人说过JSONP能解决跨域调用问题,但一直没有遇到过跨域场景,也没有使用过。直到在折腾自己的博客的过程中,因为博客代码的路由功能不完善,导致我使用异步请求输出数据的时候,遭遇跨域问题。直接搜索“JSONP",对照相关资料,解决了问题。具体代码,我仍然不能
写出,如果需要我再解决相同的问题,我仍然需要查找demo,然后copy过来修改。但我记得,关键词是

$.getJSON

它是用来读取数据的。

前些天,在工作中,遇到类似问题,正好温习一下JSONP。不过,该场景下,并不是读取数据,而是写数据的。网上找来的demo是这样的:

$.ajax({
type : 'post',
url : 'http://www.chugang.net/api',
dataType : 'jsonp',
data : {'username' : 'cg', 'action' : 'add'},
beforeSend: function(){},
success : function(returnMsg){
if(returnMsg.success){ //注意,此处,与普通ajax请求并无差异
//do something
}else{
//do anthorthing
}
},
error : function(){
}
});

这是客户端的,服务端的代码是这样的:

$callBack = isset($_GET['callBack'])?$_GET['callBack']:'';
$returnMsg = [
'code' : 1000,
'success' : true,
'message' : 'Nothing is difficult if you put your heart into it!',
];
$json = json_encode($returnMsg);
echo $classBack . '(' . $json. ')';

记得不准确,不能保证上述代码的正确性,但关键点都写出来了。客户端代码,可能遗漏点多一些。

上面的场景,除了使用JSONP来解决跨域,还有另一种方案。

在 admin.chugang.net 写一个接口,在此接口中调用 www.chugang.net 提供的接口,然后再用普通的ajax请求
来调用 admin.chugang.net 中提供的接口。这样就可以避免跨域。

此种方案,引申出一个问题。刚遇到ajax调用接口跨域的时候,我很疑惑:之前我曾大量调用其他不同域名站点的接口,为啥就没有遇到跨域问题呢?稍微想想,知道了原因:之前的调用接口,是使用curl等方式,而不是JS;JS中才存在跨域。

提到跨域,工作中遇到过字体跨域的问题,需要配置nginx服务器。根据浏览器的跨域提示,一搜索就能得到大量雷同的解决方案,然而,这些方案并不起作用。后来仍然是通过检索,获得了有效的方案。具体配置代码,我不记得了,它的作用是,对需要跨域的文件(比如字体),不
光要配置跨域,还要设置这些文件所在的目录。nginx的站点目录,并不是这些跨域文件的目录。

十分佩服解决那个问题的网络大神,他根据日志,大胆假设尝试求证,解决问题。不像我,只能搜索现成的方案。

回头把解决字体跨域的代码补充到这篇文章。

不仅如此,关于jsonp的知识点,也要补充并且修正错误内容。博客不仅要起到输出知识的作用,还要尽量保证其正确性。

二、批量操作功能

列表的批量操作,并且是异步请求,需要向服务端提交两类数据,一个是需要操作的数据的标识,比如PK,一个是操作类型,比如删除。

这个请求由“确定”按钮触发。

获取需要操作的数据的标识,需要遍历

<input type="checkbox" name="id[]" />

用到的JS知识点:遍历、判断是否选中、获取 input 的value。

获取操作类型,需要获取

<select>
<option value="show">Show</option>
<option value="update">Update</option>
</select>

这些操作,快速写出来,我连百分之七十的把握都没有,当然,借助搜索引擎,可以较快搞定。

相关推荐