php抓取网页json数据(自学前端开发之js获取接口数据的方法及应用方法（一）)

　　php抓取网页json数据(自学前端开发之js获取接口数据的方法及应用方法（一）)

　　前言：自学前端开发，一直想研究js获取html中接口数据的实现，成功找到了获取数据的方法，但是有些接口在调用过程中无法显示数据。经过排查，发现是跨域的问题，为了以后童鞋们的方便，花了一点时间把过程记录在一篇文章中。欢迎指正。

　　文本：

　　一、如何使用js获取接口数据

　　①$get(url,[数据],[回调])

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

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

　　var url3 = '#39;;

　　$.get(url3,函数(数据){

　　警报（数据）；

　　});

　　这时候如果用json来解析数据为data，得到的值是undefined。所以我们使用这个get方法获取的值是JSON格式的，我们需要将获取的数据类型定义为json格式，如上例：

　　var url3 = '#39;;

　　$.get(url3,函数(数据){

　　$('#result').append('

　　间隔：'+data.name+'

　　') //此时返回的是JSON格式的内容，例如：我们可以使用data.name获取name字段的值并输出。

　　}, 'json');

　　②$post(url,[数据],[回调],[类型])

　　post方法中多了一种类型：获取的数据的类型格式。其实post的使用方式和get是一样的。类型未定义，返回的字符串类型定义为json格式。返回的数据是json格式的，这里你可以按照上面的get方法，把get改成post就大功告成了，我就不多说了。

　　③$ajax(选项)

　　ajax功能比较强大。可以查看相关资料了解()，可以进行很多精准控制。这是一个例子：

　　$.ajax({

　　网址：网址，

　　数据：{完整：“fu”}，

　　类型：“发布”，

　　数据类型：'json'，

　　成功：功能（数据）{

　　$('#result').append('

　　间隔：'+data.interval+'

　　')

　　//警报（“22”）；

　　},

　　错误：函数（呃）{

　　//警报（“11”）；

　　BackErr(er);

　　}

　　});

　　④$getJSON(url,[数据],[回调])

　　这里的参数和get方法一样，直接上例子：

　　$.getJSON(url,函数(数据){

　　警报（数据。名称）；

　　});

　　以上类型在访问接口时都没有参数，所以我省略了参数[data]。如果有参数，格式为：

　　{

　　id : '罗宾',

　　密码：'123456',

　　门：'索引'

　　}

　　二、解决跨域问题

　　在使用上述方法获取界面数据的过程中，我们突然发现有些界面无法显示数据。

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

　　收录在请求的响应标头中

　　// 指定允许其他域名访问

　　header('Access-Control-Allow-Origin:*');

　　// 响应类型

　　header('Access-Control-Allow-Methods:POST');

　　//响应头设置

　　header('Access-Control-Allow-Headers:x-requested-with,content-type');

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

　　在此处粘贴示例代码以帮助您入门，例如 HTML 代码：

　　php代码：

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

　　如果需要指定域名允许跨域访问，只需将 Access-Control-Allow-Origin:* 改为 Access-Control-Allow-Origin: Allowed domain name

　　例如：header('Access-Control-Allow-Origin:');

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

　　例如允许并且可以跨域访问