前言:本人自学前端开发,一直想研究下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. HTML和JSON的数据交互-jsonp跨域

    HTML和json的数据交互 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapi ...

  3. js获取后台map格式数据

    后台: @RequestMapping("/dictList") @ResponseBody public Map<String, Object> positionLi ...

  4. JSON(二)——JavaScript中js对象与JSON格式字符串的相互转换

    首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是j ...

  5. Go net/http获取body中json格式数据

    Go net/http获取body中json格式数据 package main import ( "encoding/json" "fmt" "io/ ...

  6. MVC4中视图获取控制器中返回的json格式数据

    再开发MVC项目时,有时只需要从控制器中返回一个处理的结果,这时返回Json格式的数据非常的方便,在Controller中,提供了几种返回类型和方法,如: Content() 返回文本类型的Conte ...

  7. ASP.NET API(MVC) 对APP接口(Json格式)接收数据与返回数据的统一管理

    话不多说,直接进入主题. 需求:基于Http请求接收Json格式数据,返回Json格式的数据. 整理:对接收的数据与返回数据进行统一的封装整理,方便处理接收与返回数据,并对数据进行验证,通过C#的特性 ...

  8. jQuery获取JSON格式数据方法

    getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ ...

  9. 使用C#中JavaScriptSerializer类将对象转换为Json格式数据

    将对象转换为json格式字符串: private JavaScriptSerializer serializer = new JavaScriptSerializer(); protected voi ...

随机推荐

  1. 使用XPath对象解析xml文件

    使用XPath对象解析xml文件 1.DocumentBuilderFactory类  工厂API,使应用程序能从XML文档获取生成DOM对象树的解析器 其构造方法受保护,用newInstance() ...

  2. 转:Eclipse 各种小图标的含义

    原文地址:https://www.cnblogs.com/widget90/p/7592507.html Eclipse 各种小图标的含义,记录一下. Eclipse的Package Explorer ...

  3. java 集合(五)MapDemo

    package cn.sasa.demo3; import java.util.HashMap; import java.util.Iterator; import java.util.LinkedH ...

  4. PostgreSQL 自动输入密码

    在 Shell 命令行中,使用 postgresql-client 连接 PostgreSQL 数据库时,每次都要输入密码.如果要写 Shell Script,做一些类似于备份的自动化管理工作,每次都 ...

  5. FPGA设计中的异步复位、同步释放思想

    1.一个简单的异步复位例子: module test( input clk, input rst_n, input data_in, output reg out ); always@(posedge ...

  6. HDFS介绍及简单操作

    目录 1.HDFS是什么? 2.HDFS设计基础与目标 3.HDFS体系结构 3.1 NameNode(NN)3.2 DataNode(DN)3.3 SecondaryNameNode(SNN)3.4 ...

  7. oracle添加字段,备注

    1.添加字段: alter table  表名  add (字段  字段类型)  [ default  '输入默认值']  [null/not null]  ; 2.添加备注: comment on ...

  8. cookie存值 后取值是string string字符串转对象

    实现方法 // 得到 对象 格式或 json 格式的一个字符串 var str = '{"name":"张根硕","age":"1 ...

  9. vue/cli 3.0 font-size随屏幕大小变化而变化 rem设置

    在安装cube-ui框架时 安装成功后在[E:\WWW\xxx\node_modules\vue-cli-plugin-cube-ui\generator\rem\index.js]修改remUnit ...

  10. BBS项目

    一.需求分析 1.首页(显示文章) 文章详情 点赞,点踩 文章评论(子评论,评论的展示) 登录功能(图片验证码) 注册功能(基于form验证,ajax) 个人站点(不同人不同样式,文章过滤) 后台管理 ...