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


Posted in Javascript onAugust 21, 2016

推荐一个好用的在线 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和批量操作功能的全部叙述,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
全面解析标签页的切换方式
Aug 21 #Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 #Javascript
JS实现图片局部放大或缩小的方法
Aug 20 #Javascript
JS获取及验证开始结束日期的方法
Aug 20 #Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 #Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 #Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 #Javascript
You might like
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
详解Python with/as使用说明
2018/12/13 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
Python偏函数实现原理及应用
2020/11/20 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
工伤赔偿协议书
2014/04/15 职场文书
我的长生果教学反思
2014/04/28 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
假期安全教育广播稿
2014/10/04 职场文书
综治维稳工作汇报
2014/10/27 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
工程资料员岗位职责
2015/04/13 职场文书
高中同学会致辞
2015/08/01 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
卖车协议书范文
2016/03/23 职场文书