前言：本人自学前端开发，一直想研究下js获取接口数据在html的实现，顺利地找到了获取数据的方法，但是有部分接口在调用中出现无法展示数据。经查，发现时跨域的问题，花费了一通时间，随笔记录下过程，以方便后来的童鞋。欢迎指正。

正文：

一、使用js获取接口数据的方法

①$get(url,[data],[callback])

url:请求的地址;data:请求数据的列表;callback:请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个为服务器的状态,是可选参数。

其中服务器返回数据的格式其实是字符串形式,并不是我们想要的JSON数据格式。上例子：

var url3 = 'http://mshop.gemstc.com/ApiService/msgget.PHP';  
       $.get(url3,function(data){  
  alert(data);
        
       });

此时如果对data采用json解析数据，得到的值为undefined。所以我们使用这种get方法获取到的值要是JSON格式，需要定义获取的数据类型为json格式，上例子：
var url3 = 'http://mshop.gemstc.com/ApiService/msgget.php';  
       $.get(url3,function(data){  
     $('#result').append('<p>interval:'+data.name+'</p>')    //此时返回的是JSON格式的内容，例：我们可以使用data.name获取到name字段的值并输出。
          }, 'json');



②$post(url,[data],[callback],[type])


post方法中多了一个type：获取数据的类型格式，post其实和get是一样的用法，type不定义，返回的是字符串类型的，定义为json格式，返回的就是json格式的数据，此处可以仿照上面的get方法，把get改成post就搞定了，就不多说了。


③$ajax(opiton)


ajax功能比较强大，自己可以去查相关资料学习了解(http://blog.csdn.NET/wolf6699/article/details/50039627)，可以有很多精确的控制，这里直接上例子：


$.ajax({
   url: url,
data:{Full:"fu"},
type: "POST",
dataType:'json',
 success:function(data){
      $('#result').append('<p>interval:'+data.interval+'</p>')
     //alert("22");    
 },
   error:function(er){
      //alert("11");
       BackErr(er);
 }
});


④$getJSON(url,[data],[callback])


此处参数和get方法是一致的，直接上例子：


$.getJSON(url,function(data){
         alert(data.name);           
    });


以上类型因为接口访问时没有带参数，所以[data]这个参数我都省去了。如果有参数的话，格式为：


{  
    id      : 'Robin',  
    password: '123456',  
    gate    : 'index'  
  }


二、跨域问题的解决


在使用以上方法获取接口数据的过程中，我们突然发现有些接口无法将数据获取展示出来，使用chrome浏览器调试，我们发现报错如图：




此处我们使用设置Access-Control-Allow-Origin来实现跨域访问。


在被请求的Response header中加入


// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');


这样就可以实现ajax的跨域访问。


此处贴上示例代码以帮助大家上手，例HTML代码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title> 跨域测试 </title>
  <script src="//code.jQuery.com/jquery-1.11.3.min.js"></script>
 </head>
 <body>
    <div id="show"></div>
    <script type="text/JavaScript">
    $.post("http://xxx.xxx.xxx/data.php",{name:"fdipzone",gender:"male"})
      .done(function(data){
        document.getElementById("show").innerHTML = data.name + ' ' + data.gender;
      });
    </script>
 </body>
</html>


php代码:http://xxx.xxx.xxx/data.php


<?php
$ret = array(
    'name' => isset($_POST['name'])? $_POST['name'] : '',
    'gender' => isset($_POST['gender'])? $_POST['gender'] : ''
);


header('content-type:application:json;charset=utf8');
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');


echo json_encode($ret);
?>


这里Access-Control-Allow-Origin:*表示允许任何域名跨域访问。


如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名


例如：header('Access-Control-Allow-Origin:http://www.baidu.com');


如果需要设置多个域名允许访问，这里需要用php处理一下


例如允许 www.baidu.com 与 www.sina.com 可以跨域访问


<?php
$ret = array(
    'name' => isset($_POST['name'])? $_POST['name'] : '',
    'gender' => isset($_POST['gender'])? $_POST['gender'] : ''
);
header('content-type:application:json;charset=utf8');
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
$allow_origin = array(
    'http://www.baidu.com',
    'http://www.sina.com'
);
if(in_array($origin, $allow_origin)){
    header('Access-Control-Allow-Origin:'.$origin);
    header('Access-Control-Allow-Methods:POST');
    header('Access-Control-Allow-Headers:x-requested-with,content-type');
}
echo json_encode($ret);
?>
												


											
html中通过js获取接口JSON格式数据解析以及跨域问题的更多相关文章
	

    
								
  1. Android之JSON格式数据解析
		
    查看原文:http://blog.csdn.net/hantangsongming/article/details/42234293 JSON:JavaScript 对象表示法(JavaScript  ...
    
		
    2. 
						
  2. HTML和JSON的数据交互-jsonp跨域
		
    HTML和json的数据交互 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapi ...
    
		
    3. 
						
  3. js获取后台map格式数据
		
    后台: @RequestMapping("/dictList") @ResponseBody public Map<String, Object> positionLi ...
    
		
    4. 
						
  4. JSON（二）——JavaScript中js对象与JSON格式字符串的相互转换
		
    首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是j ...
    
		
    5. 
						
  5. Go net/http获取body中json格式数据
		
    Go net/http获取body中json格式数据 package main import ( "encoding/json" "fmt" "io/ ...
    
		
    6. 
						
  6. MVC4中视图获取控制器中返回的json格式数据
		
    再开发MVC项目时,有时只需要从控制器中返回一个处理的结果,这时返回Json格式的数据非常的方便,在Controller中,提供了几种返回类型和方法,如: Content() 返回文本类型的Conte ...
    
		
    7. 
						
  7. ASP.NET API(MVC) 对APP接口(Json格式)接收数据与返回数据的统一管理
		
    话不多说,直接进入主题. 需求:基于Http请求接收Json格式数据,返回Json格式的数据. 整理:对接收的数据与返回数据进行统一的封装整理,方便处理接收与返回数据,并对数据进行验证,通过C#的特性 ...
    
		
    8. 
						
  8. jQuery获取JSON格式数据方法
		
    getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ ...
    
		
    9. 
						
  9. 使用C#中JavaScriptSerializer类将对象转换为Json格式数据
		
    将对象转换为json格式字符串: private JavaScriptSerializer serializer = new JavaScriptSerializer(); protected voi ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [dpdk][kni] dpdk kernel network interface
			
    文档:https://doc.dpdk.org/guides/prog_guide/kernel_nic_interface.html 摘要: The KNI kernel loadable modu ...
    
			
    2. 
						
  2. mysql学习【第2篇】：MySQL数据管理
			
    狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! mysql学习[第2篇]:MySQL数据管理 外键管理 外键概念 如果公共关键字在一个关系中是主 ...
    
			
    3. 
						
  3. CloudStack和OpenStack该如何选择（如果准备选择OpenStack，请做好hack的准备。CloudStack的底层功能已经做的很完善了，更适合商用）
			
    国内做云计算的目前基本会在OpenStack和CloudStack中做一个选择.CloudStack 和OpenStack选哪一个,要根据自己的业务模式和研发力量来定. 作者:来源:cloudstac ...
    
			
    4. 
						
  4. 快速安装elkstack
			
    一.介绍 The Elastic Stack - 它不是一个软件,而是Elasticsearch,Logstash,Kibana 开源软件的集合,对外是作为一个日志管理系统的开源方案.它可以从任何来源 ...
    
			
    5. 
						
  5. linux内存不足，swap交换分区创建
			
    为什么需要swap 根 据Redhat公司的建议,Linux系统swap分区最适合的大小是物理内存的1-2倍.不过Linux上有些软件对swap分区得需求较大,例如要顺 利执行Oracle数据库软件, ...
    
			
    6. 
						
  6. python基础数据类型考试题
			
    Python基础数据类型考试题 考试时间:两个半小时                      满分100分(80分以上包含80分及格) 一,基础题. 1,简述变量命名规范(3分) 2,字节和位的关系 ...
    
			
    7. 
						
  7. s3存储桶：s3可扩展的云存储
			
    S3(Simple Storage Service,简单存储服务),即可扩展的云存储,又称桶存储,S3 是一种面向 Internet 的存储服务.S3为任意类型的文件提供临时或永久的存储服务.用于存储 ...
    
			
    8. 
						
  8. .NET Core 指南 官方
			
    https://docs.microsoft.com/zh-cn/dotnet/core/index
    
			
    9. 
						
  9. sqlserver2008出现数据库主体在该数据库中拥有架构，无法删除的解决方案
			
    当要删除数据库中的某个用户名的时候会报错 出现数据库主体在该数据库中拥有架构,无法删除的解决方案(MicrosoftSQLServer,错误:15138) 和sql server2000不同 第一:这 ...
    
			
    10. 
						
  10. oracle sql小结（主要讲横列转换的例子）group by以及wmsys.wm_concat()的使用
			
    ---计算九月每个电厂的数量select f_dcname,count(f_dcname) as 九月份的数量 from W_EC_PLACESTATION_COLLECT twhere f_coll ...
    
			
    11.