jquery使用jsonp进行跨域调用

news/2024/7/10 23:16:30 标签: jquery, javascript, ajax

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用

                 首先介绍下$.ajax的参数

                   type:请求方式 GET/POST

                   url:请求地址

                   async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步。

                   dataType:返回的数据类型

                   jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)

                   jsonpCallback:自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据

                  success:调用成功执行的函数

                  error:异常处理函数

            

             1.示例1

                服务器端我们采用MVC的ACTION来返回数据

                

[csharp] view plaincopy

  1. public class HomeController : Controller  
  2.    {  
  3.        //  
  4.        // GET: /Home/  
  5.   
  6.        public ActionResult Index()  
  7.        {  
  8.            return View();  
  9.        }  
  10.   
  11.        public ActionResult ReturnJson()  
  12.        {  
  13.            string callback = Request.QueryString["callback"];  
  14.            string json = "{'name':'张三','age':'20'}";  
  15.            string result = string.Format("{0}({1})", callback, json);  
  16.            return Content(result);  
  17.        }  
  18.   
  19.    }  


            客户端使用jsonp来传输数据

            

[html] view plaincopy

  1. @{  
  2.     ViewBag.Title = "Index";  
  3.     Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }  
  5.   
  6. <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"> </script>  
  7.  <script type="text/javascript">  
  8.      function SendData()  
  9.      {  
  10.          $.ajax({  
  11.              type: "get",  
  12.              async: false,  
  13.              url: "/home/ReturnJson",  
  14.              dataType: "jsonp",  
  15.              success: function(data){  
  16.                  alert(data.name);  
  17.              },  
  18.              error: function(){  
  19.                  alert('fail');  
  20.              }  
  21.          });  
  22.      }  
  23.   
  24.   
  25.  </script>  
  26.   
  27. <input  type="button" value="提交" οnclick="SendData();"/>  
  28.    


            点击提交按钮后,发现服务器端的Request.QueryString["callback"]返回一个随机函数名。这样就被设置成JSONP格式来传递数据了

     2.自定义函数名

         可以在传递过程中自定义函数名,只要使用jsonpCallback参数就可以了。

      jsonp:表示传递的参数,默认为callback,我们也可以自定义,服务器段通过此参数,获取自定义的函数名称,服务器这样获取 Request.QueryString["callback"]

      jsonpCallback表示传递的参数值,也就是回调的函数名称,这是自定义的名称。

             

[html] view plaincopy

  1. <script type="text/javascript">  
  2.     function SendData() {  
  3.         $.ajax({  
  4.             type: "get",  
  5.             async: false,  
  6.             url: "/home/ReturnJson",  
  7.             dataType: "jsonp",  
  8.             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)  
  9.             jsonpCallback: "receive",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据  
  10.             success: function (data) {  
  11.                 alert(data.name);  
  12.             },  
  13.             error: function () {  
  14.                 alert('fail');  
  15.             }  
  16.         });  
  17.     }  
  18.   
  19.     function receive(data) {  
  20.         alert(data.age);  
  21.     }  
  22. </script>  


http://www.niftyadmin.cn/n/4562.html

相关文章

从零到壹搭建一个商城架构--MySQL集群

1&#xff09;、集群原理 以上可以作为企业中常用的数据库解决方案 MySQL-MMM是Master-Master Replication Manager for MySQL(mysql主主复制管理器)的简称&#xff0c;是Google的开源项目&#xff08;Perl脚本&#xff09;。MMM基于MySQL Replication 做的扩展架构&#xff0…

缺陷检测相关论文阅读总结(记录自己读过的论文主要内容/Ideas)

缺陷检测相关论文阅读总结&#xff08;记录自己读过的论文主要内容&#xff09; Attention!!! 点击论文题目即可访问原文or下载原文PDF文件&#xff1b;每篇文章的内容包含&#xff1a;内容总结、文章Ideas&#xff1b;更多关于缺陷检测以及图像融合/拼接等方向的相关文章学习…

【零基础入门MyBatis系列】第十三篇——缓存机制

一、概述 &#x1f314; 1、如何理解缓存&#xff1f; 提前将数据放到缓存中&#xff08;内存中&#xff09;&#xff0c;下一次用的时候&#xff0c;直接从缓存中取数据&#xff0c;效率更高。使用减少文件读写&#xff08;IO&#xff09;的方式提高执行效率什么时候会使用缓…

刷题笔记之七(统计每个月兔子的总数+汽水瓶+查找两个字符串a,b中的最长公共子串+公共子串计算)

目录 1. 数据库中&#xff0c;count不会返回null值&#xff0c;max和concat可能会返回null值 2. 数据库特点&#xff1a; 共享性高&#xff0c;冗余度小&#xff0c;安全性强&#xff0c;独立性强 3. top是sql server中的关键字&#xff0c;用于求前n条数据 4. 数据库使用…

idea启动项目很久很慢的一种解决方案

一、问题描述 IntelliJ idea 在启动项目时&#xff0c;很久很慢。 二、解决 在不买个更强更贵的前提下&#xff0c;有以下一种解决方案(ಥ_ಥ) ​​​​​​​ 1、方案依据 一般地&#xff0c;JVM实例默认最大堆内存是机器的1/64&#xff0c;在启动时会不断地fullGC&#xf…

HTTP协议详解

1.HTTP协议介绍 先来给大家介绍以下HTTP&#xff1a; HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;&#xff1a; 全称超文本传输协议&#xff0c;是用于从万维网&#xff08;WWW:World Wide Web &#xff09;服务器传输超文本到本地浏览器的传送协议。HTTP 是一种…

信息学奥赛一本通:1170:计算2的N次方

1170&#xff1a;计算2的N次方 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 27334 通过数: 14606 【题目描述】 任意给定一个正整数N(N<100)&#xff0c;计算2的n次方的值。 【输入】 输入一个正整数N。 【输出】 输出2的N次方的值。 【输入样例】 5 【输…

Qt编写ffmpeg本地摄像头显示(16路本地摄像头占用3.2%CPU)

一、前言 内核ffmpeg除了支持本地文件、网络文件、各种视频流播放以外&#xff0c;还支持打开本地摄像头&#xff0c;和正常的解析流程一致&#xff0c;唯一的区别就是在avformat_open_input第三个参数传入个AVInputFormat参数&#xff0c;这个参数用于指定输入设备的格式&…