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

前端之家收集整理的这篇文章主要介绍了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请求 代码,如下:

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

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

$.getJSON

它是用来读取数据的。

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

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

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

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

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

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

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

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

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

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

二、批量操作功能

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

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

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

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

获取操作类型,需要获取

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

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

原文链接:https://www.f2er.com/js/46420.html

猜你在找的JavaScript相关文章