jquery跨域请求示例分享

 这篇文章主要介绍了jquery跨域请求示例(jquery发送ajax请求),需要的朋友可以参考下

jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数。原型如下:
 
jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。
 
url: 发送请求的地址
data : (可选) 待发送key/value参数
callback: (可选) 载入成功时的回调函数
主要用于客户端获取服务器JSON数据。简单示例:
 
服务器脚本,返回JSON数据:
 
 代码如下:
// $.getJSON.php
$arr=array("name"=>"zhangsan", "age"=>20); 
$jarr=json_encode($arr); 
echo $jarr;
 
 
注意两点:第一:在返回客户端之前,先用PHP函数json_encode将要返回的数据进行编码。第二:返回到客户端用的是echo,而不是return。
 
下面是核心的客户端代码:
 
代码如下:
<script language="javascript" type="text/javascript" src="./js/jquery.js"></script> 
<script language="javascript" type="text/javascript"> 
function getjs() 

  $.getJSON("$.getJSON.php", {}, function(response){ 
                 alert(response.age); 
  }); 
}
 
<input type="button" name="btn" id="btn" value="test" onClick="javascript:getjs();"/>
 
 
由于在PHP中是用JSON编码返回值,所以此处必须用getJSON去调用PHP文件,从而获取数据。同时可以注意到,经由getJSON得到的数据已经变成了一个对象数组,可以用response.name,response.age很直观的获取返回值。
 
jquery提供了$.getJSON的方法,让我们可以实现跨域ajax请求,但jqueryAPI上的内容实在太少,如何用$.getJSON,请求网站应该返回怎样的数据库才能让$.getJSON获取到,下面我就用一个实际例子来说明下。
 
后端是用php的,以下代码主要实现的一个功能就是提供一个预约登记的接口,需要传入的数据分别有:用户姓名、联系电话和地址:
 
 代码如下:
/*预约登记 执行 接口*/
case "yuyue_interface":
 $name = trim($_GET['name']);
 $phone = trim($_GET['phone']);
 $addr = trim($_GET['addr']);
 $dt = date("Y-m-d H:i:s");
 $cb = $_GET['callback'];
 if($name == "" || $name == NULL){
  echo $cb."({code:".json_encode(1)."})";
 }elseif($phone == "" || $phone == NULL){
  echo $cb."({code:".json_encode(2)."})";
 }elseif($addr == "" || $addr == NULL){
  echo $cb."({code:".json_encode(3)."})";
 }else{
  $db->execute("insert into tb_yuyue (realname,telphone,danwei,dt,ischeck) values ('$name','$phone','$addr','$dt',0)");
  echo $cb."({code:".json_encode(0)."})";
 }
 exit;
break;
 
 
接着就是前端的处理了:
 
代码如下:
$(document).ready(function(){
 //以下3个为预约登记需要的参数
 var name = "name";  //varchar类型,长度最多为8位(4个汉字)
 var phone = "phone"; //varchar类型,长度为11位
 var addr = "addr";  //varchar类型,长度最多为500位(250个汉字)
 $.getJSON("http://请求网站地址/data.php?ac=yuyue_interface&name="+name+"&phone="+phone+"&addr="+addr+"&callback=?", function(data){
  if(data.code==1){
   //自定义代码
   alert("姓名不能为空");
  }else if(data.code==2){
   //自定义代码
   alert("手机不能为空");
  }else if(data.code==3){
   //自定义代码
   alert("所在单位不能为空");
  }else{
   //自定义代码
   alert("预约成功");
  }
 });
});
 
 
需要注意的是,在后端php代码里,必须把传递进来的" &callback=? "也输出来,如:
 
代码如下:
$cb = $_GET['callback'];
echo $cb."({code:".json_encode(4)."})";
 
以上就是一个简单的$.getJSON试验,通过这个试验,我们可以学到如何用$.getJSON,也能学到如何做一个接口让别人跨域请求。

时间: 2024-10-30 00:46:26

jquery跨域请求示例分享的相关文章

jquery跨域请求示例分享(jquery发送ajax请求)_jquery

jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据. url: 发送请求的地址data : (可选) 待发送key/value参数callback: (可选) 载入成功时的回调函数主要用于客户端获取服务器JSON数据.简单示例: 服务器脚本,返回JSON数据: 复制代码 代码如下: // $.getJSON.php$

深入理解jquery跨域请求方法_jquery

项目中关于ajax jsonp的使用, 出现了问题:可以成功获得请求结果,但没有执行success方法 总算搞定了,记录一下 function TestAjax() { $.ajax({ type : "get", async : false, url : "ajaxHandler.ashx", //实际上访问时产生的地址为: ajax.ashx?callbackfun=jsonpCallback&id=10 data : {id : 10}, cache

jQuery getScript()用法与跨域请求示例

通过 HTTP GET 请求从服务器载入并执行一个 JavaScript 文件 jQuery.getScript( url, [ success(data, textStatus) ] ) url一个包含发送请求的URL字符串. success(data, textStatus)当请求成功后执行的回调函数. 这是一个快速的AJax处理函数,相当于:  代码如下 复制代码 $.ajax({   url: url,   dataType: 'script',   success: success }

jquery ajax跨域请求详解

ajax要在各种浏览器下都实现完美的跨域需要借助于jsonp技术,jsonp实质是请求一个js脚本文件,在js文件载入完毕时执行某个函数,这样就可以完美的规则跨域问题了. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求.意思就是远程服务端

Jquery跨域获得Json的简单实例_jquery

这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值, 一般跨域用到的两个方法为:$.ajax 和$.getJSON 最后,仔细安静下来,细读 json 官方文档后发现这么一段: JSON数据是一种能很方便通过JavaScript解析的结构化数据.如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=?

jQuery跨域原理

JQuery 的跨域方法这篇文章作者给出了使用jQuery中的getJSON方法实现跨域的方法;示例代码没有问题,但是作者把getJSON跨域的原理解释成: "因为getJSON跨域的原理是把? 随机变一个方法名,然后返回执行的,实现跨域响应的目的." 这个未免草率了一些,是这么回事 ?Firebug里面监控的结果貌似也是这意思,本文试图探究jQuery getJson跨域的原理; 盐从哪儿咸:为什么有跨域的问题 跨域问题存在实际上源于浏览器的同源策略(same origin poli

http页面ajax https-jquery.getJSON()跨域请求

问题描述 jquery.getJSON()跨域请求 实现在http页面 同服务下的https请求,因为端口不一致,产生跨域,所以用jquery.getJSON() 功能已经实现,在chroome和Firefox下功能均是正常,但是在ie下就是不行,希望有做过相关功能的高手解答.有什么其他的解决方案可以一起讨论. 另外,我将https请求换成http,在ie下getJSON是可以正常执行的,所以这个感觉涉及的https相关的.第一次搞https,不是很清楚 解决方案 function online

使用CORS实现JavaWeb跨域请求问题的方法_java

之前用jsonp 解决跨域问题,现在用CORS实现跨域请求解决java 跨域问题: 主要代码如下 package com.hy.fliter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.

jquery的ajax跨域请求原理和示例_jquery

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.