html中通过js获取接口JSON格式数据解析以及跨域问题
前言：本人自学前端开发，一直想研究下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格式数据解析以及跨域问题的更多相关文章
- Android之JSON格式数据解析
查看原文:http://blog.csdn.net/hantangsongming/article/details/42234293 JSON:JavaScript 对象表示法(JavaScript ...
- HTML和JSON的数据交互-jsonp跨域
HTML和json的数据交互 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapi ...
- js获取后台map格式数据
后台: @RequestMapping("/dictList") @ResponseBody public Map<String, Object> positionLi ...
- JSON（二）——JavaScript中js对象与JSON格式字符串的相互转换
首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是j ...
- Go net/http获取body中json格式数据
Go net/http获取body中json格式数据 package main import ( "encoding/json" "fmt" "io/ ...
- MVC4中视图获取控制器中返回的json格式数据
再开发MVC项目时,有时只需要从控制器中返回一个处理的结果,这时返回Json格式的数据非常的方便,在Controller中,提供了几种返回类型和方法,如: Content() 返回文本类型的Conte ...
- ASP.NET API(MVC) 对APP接口(Json格式)接收数据与返回数据的统一管理
话不多说,直接进入主题. 需求:基于Http请求接收Json格式数据,返回Json格式的数据. 整理:对接收的数据与返回数据进行统一的封装整理,方便处理接收与返回数据,并对数据进行验证,通过C#的特性 ...
- jQuery获取JSON格式数据方法
getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ ...
- 使用C#中JavaScriptSerializer类将对象转换为Json格式数据
将对象转换为json格式字符串: private JavaScriptSerializer serializer = new JavaScriptSerializer(); protected voi ...
随机推荐
- pyhton 爬虫爬去吾爱精品软件的信息并写入excel
2018的最后一天了,感觉今年有得有失,这里就不再浪费时间了,愿2019万事如意 之前的爬虫信息下载后只写入txt文档,想到了以后工作加入有特殊需求,趁放假有时间将这写数据写入excel表格 以吾爱精 ...
- nginx最基本操作
1.安装 yum install nginx 2.查看配置位置 nginx -t 3.查看nginx.conf,找到默认html配置路径 vi /etc/nginx/nginx.conf cd /us ...
- 【pyqtgraph绘图】案例-动态的正余弦波形图
先看一个简单的小例子: 完整代码: import numpy as np import pyqtgraph as pg import sys from PyQt5.QtWidgets import Q ...
- ReentrantLock可重入锁的原理及使用场景
摘要 从使用场景的角度出发来介绍对ReentrantLock的使用,相对来说容易理解一些. 场景1:如果已加锁,则不再重复加锁 a.忽略重复加锁.b.用在界面交互时点击执行较长时间请求操作时,防止多次 ...
- （1.15）mysql锁问题之InnoDB锁
关键词:innodb锁,mysql锁 概要: 1.事务的隔离级别 2.InnoDB锁争用 3.innodb锁 [3.1]innodb的行锁模式及加锁方法 其实,默认情况下,mysql 的 select ...
- SQL SERVER 基于数据库镜像的主从同步(数据库镜像实践汇总)
SQL SERVER 基于数据库镜像的主从同步 Author:chaoqun.guo createtime:2019-03-26 目录 SQL SERVER 基于数据库镜像的主从同步... 1 ...
- what's the 头寸
头寸,是一种市场约定,承诺买卖外汇合约的最初部位,买进外汇合约者是多头,处于盼涨部位:卖出外汇合约为空头,处于盼跌部位.头寸可指投资者拥有或借用的资金数量. “头寸”一词来源于近代中国,银行里用于日常 ...
- what's the 爬虫之基本原理
what's the 爬虫? 了解爬虫之前,我们首先要知道什么是互联网 1.什么是互联网? 互联网是由网络设备(网线,路由器,交换机,防火墙等等)和一台台计算机连接而成,总体上像一张网一样. 2.互联 ...
- Linux系统下我的/etc/sysconfig/路径下无iptables文件
转载于:https://blog.csdn.net/zzm8421/article/details/78083582 虚拟机新装了一个CentOs7,然后做防火墙配置的时候找不到iptables文件, ...
- jsp在select中的option中编写if标签
<select onchange="lxx(this)"> <option value="">全部</option> < ...