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>

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

以上所述是小编给大家介绍的JSONP和批量操作功能的全部叙述，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的,在此也非常感谢大家对脚本之家网站的支持！

最新评论