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和批量操作功能的全部叙述，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的,在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 简单介绍jsonp 使用小结

    Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略. 同源策略,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略. 首先:jsonp是json用来跨域的一个东西. 原理是通过script标签的跨域特性来绕过同源策略. 经过测试实验: 发送端: $.a

  • json与jsonp知识小结(推荐)

    json 1. json 的值可以是下面这些类型: ① 数字(整数或浮点数),比如123,1.23 ② 字符串(在双引号中) ③ 逻辑值(true 或 false) ④ 数组(在方括号中) ⑤ 对象(在花括号中) ⑥ null 2. json解析方法 ① eval('(' + jsondata + ')' ); 使用时永远是不安全的,代码注入 ② JSON.parse(jsondata); JSONLint json:字符串校验工具 3. jQuery 实现ajax jQuery.ajax([s

  • AJAX实现跨域的三种方法（代理,JSONP,XHR2）

    AJAX实现跨域的三种方法（代理,JSONP,XHR2）

    域: 域是WIN2K网络系统的安全性边界.我们知道一个计算机网最基本的单元就是"域",这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域.在独立的计算机上,域即指计算机本身,一个域可以分布在多个物理位置上,同时一个物理位置又可以划分不同网段为不同的域,每个域都有自己的安全策略以及它与其他域的信任关系.当多个域通过信任关系连接起来之后,活动目录可以被多个信任域域共享. 由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只

  • 浅析json与jsonp区别及通过ajax获得json数据后格式的转换

    有关json与jsonp的区别(json才是目的,jsonp只是手段)介绍如下所示: 一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展.简单地讲,json其实就是JavaScript中的对象(Object)和数组(Array,其实也是对象)这倆好基友在那儿你嵌我我嵌你地套上n多层,以此模拟出许多复杂的数据结构. json易于人阅读和编写,也易于机

  • Node.js返回JSONP详解

    Node.js返回JSONP详解

    在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP.基于安全性考虑,浏览器会存在同源策略,然而<script/>标签却具有跨域访问数据的能力,这就是JSONP工作的基本原理.有关同源策略以及什么是JSONP. 在Node.js中实现JSONP非常简单,通过下面的代码我们从服务器返回并运行一个JavaScript函数,这个JavaScript函数已经在调用方提前被定义好了,于是当它被返回的时候就自动执行了.

  • 关于JSON与JSONP简单总结

    关于JSON与JSONP简单总结

    一.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python

  • 浅析JSONP解决Ajax跨域访问问题的思路详解

    前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

  • 深入浅析Jsonp解决ajax跨域问题

    深入浅析Jsonp解决ajax跨域问题

    一.介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的东西百度的话东西确实很多,很多人都是复制别人的,如此下去,其实找的资料就那么几份,关键是我还看不懂,可能是能力问题吧,自己经过很多尝试,所以总结了一下,终究还是弄懂了皮毛.注意一点是,这里是用Jsonp解决ajax的跨域问题,具体的实现其实不是ajax. 1.同源策略 浏览器有一个很重要的概念--同源策略(Same-Origin Policy).所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(JavaS

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

    推荐一个好用的在线 Markdown 编辑器,比我自己用 Python 编译成 markdown 要方便多了. [http://mahua.jser.me] markdown简明语法教程 [http://www.appinn.com/markdown/] 好东西会让人免费为其推广,希望我自己也能做出几个有用的小工具. 一.JSONP的使用 jsonp,是一种数据格式,用来解决跨域问题. 比如,在 admin.chugang.net 需要一个二维码,而在 www.chugang.net 中已经存在

  • AngularJS 购物车全选/取消全选功能的实现方法

    AngularJS 购物车全选/取消全选功能的实现方法

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还

  • iOS表视图之下拉刷新控件功能的实现方法

    iOS表视图之下拉刷新控件功能的实现方法

    下拉刷新是重新刷新表视图或列表,以便重新加载数据,这种模式广泛用于移动平台,相信大家对于此也是非常熟悉的,那么iOS是如何做到的下拉刷新呢? 在iOS 6之后,UITableViewControl添加了一个refreshControl属性,该属性保持了UIRefreshControl的一个对象指针.UIRefreshControl就是表视图实现下拉刷新提供的类,目前该类只能用于表视图界面.下面我们就来试试该控件的使用. 编写代码之前的操作类似于前面几篇文章.代码如下: #import "View

  • IOS 集成微信支付功能的实现方法

    IOS 集成微信支付功能的实现方法 第一步:集成微信的SDK https://pay.weixin.qq.com/wiki/doc/api/index.html 点击进入 下载对应SDK或示例,最后可以看看示例程序 第二步:在Xcode中填写微信开放平台申请的Appid Xcode>info>URL Types  中新建加入Appid 第三步:在Appdelegate.m 中注册微信支付 和回调 #import "WXApi.h" 添加 代理 WXApiDelegate -

  • iOS缓存文件大小显示功能和一键清理功能的实现方法

    iOS缓存文件大小显示功能和一键清理功能的实现方法

    缓存占用了系统的大量空间,如何实时动态的显示缓存的大小,使用户清晰的了解缓存的积累情况,有效的进行一键清理呢? 为方便读者和未来自己更好理解,我们创建这样场景.(在表视图的清除缓存一单元格内创建一个UILabel *cacheLabel用于显示当前缓存,当点击单元格弹出提示框,点击确定,清除缓存). 下面是实现代码: #pragma mark - 计算缓存大小 - (NSString *)getCacheSize { //定义变量存储总的缓存大小 long long sumSize = 0; /

  • Spring MVC 中 短信验证码功能的实现方法

    Spring MVC 中 短信验证码功能的实现方法

    在外部网站中短信的验证很有必要,比如在实现注册.验证用户信息等的情况下.在SpringMVC中的实现如下: 短信接口 短信接口,有些企业会购买的有移动的短信平台接口.如果是个人或者是小企业可以使用一些云服务的.比如百度的API Store上面的. 我使用的是:http://apistore.baidu.com/apiworks/servicedetail/1018.html 当然短信接口肯定都是要付费的,而且是基于模板的,具体的使用说明可以看这个网址里面的使用说明. 前端界面 前端的界面,可能如

  • iOS中设置清除缓存功能的实现方法

    iOS中设置清除缓存功能的实现方法

    绝大多数应用中都存在着清楚缓存的功能,形形色色,各有千秋,现为大家介绍一种最基础的清除缓存的方法.清除缓存基本上都是在设置界面的某一个Cell,于是我们可以把清除缓存封装在某一个自定义Cell中,如下图所示: 具体步骤 使用注意:过程中需要用到第三方库,请提前安装好:SDWebImage.SVProgressHUD. 1. 创建自定义Cell,命名为GYLClearCacheCell 重写initWithStyle:(UITableViewCellStyle)style reuseIdentif

  • 网页中右键功能的实现方法之contextMenu的使用

    网页中右键功能的实现方法之contextMenu的使用

    本文介绍一种网页中实现右键功能的方案–contextMenu. 1.下载 下载地址 https://github.com/swisnl/jQuery-contextMenu 下载得到压缩文件jQuery-contextMenu-master.zip 解压后,使用dist目录下css.js. 2.使用方法 使用步骤: (1) 引用css.js. (2) html.js代码. 简单例子如下: 代码test.html: <!DOCTYPE html> <html lang="en&q

  • ThinkPHP登录功能的实现方法

    登陆功能是PHP程序设计中常见的功能.本文ThinkPHP实例主要完成注册成功后进入首页,并告诉你是登录用户的功能.具体实现步骤如下: 第一步:在config.php文件中加上: 'USER_AUTH_KEY'=>'authId' 示例如下: <?php if(!defined('THINK_PATH')) exit(); return array( // 定义数据库连接信息 'DB_TYPE'=> 'mysql',// 指定数据库是mysql 'DB_HOST'=> 'local

  • thinkPHP订单数字提醒功能的实现方法

    thinkPHP订单数字提醒功能的实现方法

    本文实例讲述了thinkPHP订单数字提醒功能的实现方法.分享给大家供大家参考,具体如下: 运行效果图如下: html: <ul class="am-avg-sm-5"> <li class="condition-li" status="0"> <span class="condition">全部<if condition="$num.all neq 0">&

随机推荐