前言:本人自学前端开发,一直想研究下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');
此处贴上示例代码以帮助大家上手,例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
$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:允许的域名
例如: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);
?>
相关推荐
本文将详细介绍如何在微信小程序中获取JSON格式的页面数据。 #### 二、基础知识概述 1. **JSON(JavaScript Object Notation)**:一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。 2. **...
在以上代码中,服务器接收到请求后,将返回的数据以JSON格式封装在回调函数内,客户端接收到响应后会自动执行这个函数,将数据解析并处理。 总结起来,jQuery的jsonp机制使得跨域请求变得简单。通过在客户端设置`...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成,是Web服务和客户端之间交换数据的常用方式。 首先,让我们了解jQuery中的$.ajax()函数,它是处理...
在本篇ExtJs学习资料中,我们探讨了如何从服务器获取JSON数据并进行分页处理。这是一项在Web应用程序中非常常见的任务,特别是在构建数据密集型界面时。下面我们将详细阐述实现这一功能的关键步骤和涉及的技术点。 ...
标题中的“ajax跨域访问WCP搜索,返回JSON数据”涉及到的是Web开发中关于AJAX、跨域资源共享(CORS)以及JSON数据格式的应用。在Web应用中,AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它是JavaScript的一个子集,易于阅读和编写,同时也易于机器解析和生成。JSONP(JSON with Padding)是解决跨域问题的一种方式。它利用了浏览器允许...
在文章中提到的“快速解决处理后台返回json数据格式的问题”,主要是围绕如何判断和处理后端返回数据的格式进行展开。核心知识点在于,我们需要首先确定后端返回的数据是否已经是字符串格式。如果已经是字符串,那么...
Java Web中的跨域问题主要涉及浏览器的同源策略限制,这是一种安全机制,防止恶意网站通过JavaScript获取其他网站的敏感信息。然而,在开发过程中,我们有时需要在不同的域名、端口或协议之间进行数据交换,这就需要...
1. **数据格式错误**:JSON数据必须遵循特定的语法规则,如键值对用冒号分隔,对象用花括号包围,数组用方括号包围,以及所有字符串都必须用双引号括起来。如果发送的数据不符合这些规则,服务器可能无法正确解析,...
根据提供的文件信息,本文将详细解释“JS跨域访问后台”的相关知识点,包括跨域的基本概念、实现方式以及具体的代码示例。 ### 跨域基本概念 在浏览器中,为了安全考虑,存在一种称为“同源策略”的机制。简单来说...
在天气预报的例子中,JavaScript会使用AJAX发送HTTP请求获取天气数据,然后解析响应并在HTML中展示。 5. **CSS样式**:为了使天气预报信息更美观、易读,CSS(Cascading Style Sheets)用于控制网页的布局和外观。...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,被广泛用于Web应用程序之间传递数据。它以文本形式存储和传输数据,易于人阅读和编写,同时也容易让机器解析和生成。JSON类库则是在PHP中处理JSON...
1. 确保服务器返回的JSON数据格式正确,避免语法错误。 2. 验证Ajax请求的URL是否可用,以及是否允许跨域请求(如果适用)。 3. 检查输入的`minLength`参数,以决定用户输入多少字符后开始触发autoComplete。 4. ...
2. `cc.sys.saveData()` 和 `cc.sys.loadData()`: 这两个函数用于在浏览器环境中保存和加载数据,支持JSON格式。例如: ```javascript // 保存数据 let jsonData = { key: 'value' }; cc.sys.saveData('userData', ...
JSON文件(在这里以.js后缀出现)被放置在服务器的某个目录中,当需要获取数据时,通过$.getJSON方法调用,并传入JSON文件的URL路径作为参数。JSON文件加载后,会自动被解析成JavaScript对象,然后就可以进行后续...
JSON是一种基于文本的数据格式,它的结构与JavaScript对象非常相似,由键值对组成,以大括号`{}`包裹。例如: ```json { "name": "张三", "age": 30, "city": "北京" } ``` JSON数据可以被JavaScript直接解析,...
【jersey-json-1.7.jar】是Java RESTful Web服务框架Jersey的一个扩展模块,主要专注于处理JSON(JavaScript Object Notation)数据格式。Jersey是JAX-RS(Java API for RESTful Web Services)规范的参考实现,它...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在Web开发中,JSON常用于前后端数据传输,因为它可以被JavaScript直接解析为对象,无需额外的序列化...
JSON API 是一种基于 JSON(JavaScript Object Notation)数据格式的接口,它允许应用程序通过 HTTP 协议进行数据交换。在互联网开发中,JSON API 被广泛应用,因为它们提供了轻量级、易于理解和解析的数据传输方式...
在Web前端开发中,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它以其易读性、易写性和高效性被广泛应用于前后端数据交互。JSON是基于JavaScript的一个子集,但它是独立于语言的,有明确的规范...