通过jquery的$.getJSON自己做一个跨域ajax请求试验

简介:

 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,也能学到如何做一个接口让别人跨域请求。

  如果有疑问,可以在下面提出来,如果我哪里写错了,也请帮我指出来。



   本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2011/05/03/2035074.html,如需转载请自行联系原作者


相关文章
|
4月前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
40 2
|
4月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
3月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
33 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
16天前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
33 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
2月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
|
16天前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
24 0
|
3月前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
|
3月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
2月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
|
4月前
|
JSON 前端开发 JavaScript
Fetch API与Ajax请求
Fetch API是JavaScript的一种新方法,用于网络请求,提供简洁的Promise-based语法和更多功能,如处理头、取消请求及跨域支持,比Ajax更强大。尽管不完全替代Ajax,尤其在老浏览器或需要底层控制时,Fetch API仍是现代浏览器中获取资源的优选工具。例如,以下代码展示了如何使用Fetch API进行GET和POST请求。