传统的ajax(即xmlhttprequest)由于使用叫复杂,于是js新推出了fetch来获取后台数据,无需引进jq的$.ajax,也可以使用promise的链式用法去处理回调地狱,着实很方便,在谷歌上已经全部兼容,其他浏览器兼容还需要进一步的优化,推荐文章:

https://segmentfault.com/a/1190000003810652

通过这篇文章,自己写了一个fetch和PHP去测试(获取手机号码的归属地):

php:

<?php
header("Access-Control-Allow-Origin:*");
// 响应类型
header('Access-Control-Allow-Methods:POST');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with, content-type'); function getKey($key, $default = "")
{
return trim(isset($_REQUEST[$key]) ? $_REQUEST[$key] : $default);
} $phone= getKey("phone");
if (!empty($phone)) {
$menuInfo = file_get_contents("https://way.jd.com/jisuapi/query4?shouji=".$phone."&appkey=86d15a3db19f29dccae449f8426a8cb3");
echo $menuInfo;
}

  js:

<script>

    fetch("http://fm.xiaofany.com/APIpage/phone.php", {
method: "post",
headers: new Headers({
'Accept': 'application/json'
}),
body: JSON.stringify({"phone": 1393622322})
}).then(res => res.json())
.then(data => console.log(data))
.catch(e=>console.log(`错误为${e}`))
</script>

  运行以后发生了如下错误:

json意外结束,查找了官方文档,发现在传值的时候做好使用URLSearchParams的方法来传值,更改一下:

<script>

    fetch("http://fm.xiaofany.com/APIpage/phone.php", {
method: "post",
headers: new Headers({
'Accept': 'application/json'
}),
body: new URLSearchParams({"phone": 1393622322})
}).then(res => res.json())
.then(data => console.log(data))
.catch(e=>console.log(`错误为${e}`))
</script>

  完美:

使用fetch出现unexpected end of input 解决方法的更多相关文章

  1. 浏览器报错:unexpected end of input 解决方法

    直接上报错代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 电脑蓝屏提示unexpected store exception的解决方法

    在我们使用电脑的过程中常常会遇到许多问题,对于许多不熟悉电脑的用户常常摸不着头脑,而部分用户在使用电脑时,电脑常常出现蓝屏的情况,并提示你的电脑遇到问题需要重新启动,与此同时,其报告错误代码为“une ...

  3. A TLS packet with unexpected length was received 解决方法

    参考:A TLS packet with unexpected length was received. 系统环境 主系统 OS X,虚拟机 Ubuntu 14.04 64bit. 问题描述 在git ...

  4. Java Script--------问题错误解决意外的终止输入Uncaught SyntaxError: Unexpected end of input解决办法

    错误信息: Uncaught SyntaxError: Unexpected end of input 错误原因: 一般是成对的符号只出现了单只,比如说“”,‘’,{},[]. 解决办法:检查符号是否 ...

  5. Uncaught SyntaxError: Unexpected end of input 解决办法

    Unexpected end of input  的英文意思是"意外的终止输入" 他通常表示我们浏览器在读取我们的js代码时,碰到了不可预知的错误,导致浏览器 无语进行下面的读取 ...

  6. 移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法

    最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示  IOS端显示情况 Android端显示情况 解决方式: <t ...

  7. Linux中syntax error near unexpected token 错误提示解决方法

    Linux中syntax error near unexpected token ... 错误提示有一般有两种原因: 1)window和Linux下换行符不一致导致 window下的换行和Linux下 ...

  8. input获取焦点弹出系统虚拟键盘时,挡住input解决方法

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内. <input type="tel" placeholder="输入 ...

  9. bokeh 中 ValueError: Unrecognized range input: 解决方法

    bokeh_data.index =bokeh_data.index.astype(np.str) 将其转换为字符型

随机推荐

  1. 基于jquery网站左侧下拉菜单

    网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="container"& ...

  2. 一款基于jquery的手风琴显示详情

    今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div al ...

  3. Cent OS 6.5下安装gcc-5.3.0

    目录: .下载源码包 .安装以前版本的GCC编译器 .文件传输 .熟悉解压命令 .安装流程 .开始安装 .安装必备包之GMP,MPFR,MPC的安装 .继续安装         [1.下载源码包]   ...

  4. [Django学习]上传图片

    上传图片 当Django在处理文件上传的时候,文件数据被保存在request.FILES FILES中的每个键为<input type="file" name="& ...

  5. WF追忆

    前一阵子学习了一下工作流,现在写个总结记录一下这个过程.要弄工作流,首先就要有个界面来画图,做web的,没办法,只能选择javascript和silverlight,找来找去,最后用了Shareide ...

  6. NYOJ-451-光棍节的快乐

    光棍节的快乐 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描写叙述 光棍们,今天是光棍节.聪明的NS想到了一个活动来丰富这个光棍节. 规则例如以下: 每一个光棍在一个纸条上写 ...

  7. 隐藏的Swiper显示后无法获取正确的宽度和高度

    今天在使用swiper的时候,元素默认是显示的时候没毛病,但是默认是隐藏的状态,再显示的时候发现滑动的时候宽度计算有误,如下图所示: 正确的显示如下: 隐藏的元素再次显示如下: 宽度计算有误 解决方案 ...

  8. Can't connect to MySQL server on '192.168.7.175' (10060)

    原因: 1.你的ip没有被授权,无法访问. 2.端口没有打开(如:3306端口没有打开). 解决方法: 授权(http://www.cnblogs.com/SZxiaochun/p/6401424.h ...

  9. e655. 混合风格的文本

    This example applies a new font and background color to a part of the text. You can apply styles to ...

  10. Android学习CursorWrapper与Decorator模式 (转至http://www.cnblogs.com/bastard/archive/2012/05/31/2527944.html)

    一 Decorator模式 意图: 动态的给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 动态的给一个对象,而不是对整个类添加额外职责,说明此模式将采用的结 ...