json-server,跨域

启动json-serer

json-server --watch db.json

注意: db.json为json文件的名称,你自己的文件名叫什么,就启动对应的文件就可以了 启动json-server的时候,必须在你db.json所在的文件夹下进行启动

这样服务器就可以启动成功了,可以通过配置db.json文件,访问服务器里面的数据 访问地址:127.0.0.1:3300/student

使用json-sever实现增删改查

1.get 查找

http://localhost:3000/student(资源名)/id

2.post 添加

http://localhost:3000/student 不需要id ,会自动添加

3.put 修改 使用put修改会覆盖之前原有的数据,仅有修改后的数据

patch 部分修改 只会修改你要修改的数据,原有数据不变 4.delete 删除 只需要 传递要删除的端口号

http://localhost:3000/student(资源名)/id

跨域

协议(http,https),端口号,域名只要有一个不一样就是跨域

http 默认端口号80 https默认端口号443

jsonp跨域

前端发送请求 后端配合回调函数 好处:

  1. javascript 兼容性比较好

  2. 不需要服务器支持,直接在本地运行

缺点:

  1. 它只支持GET请求而不支持POST等其它类型的HTTP请求

  2. 它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

  3. jsonp在调用失败的时候不会返回各种HTTP状态码。

  4. 安全性。万一假如提供jsonp的服务存在页面注入漏洞,即它返回的javascript的内容被人控制的。那么结果是什么?所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下...所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的

jsonp请求

前端

javascript 复制代码
<input type="text"> <button>点击</button>
var btn = document.querySelector('button');
btn.onclick = function(){
    var val = document.querySelector('input').value;
    // 1. 创建script标签
    var scriptM = document.createElement('script');
    // 2. 添加src属性
    scriptM.src = `http://suggest.taobao.com/sug?code=utf-8&q=${val}&callback=success`;
    // 3. 添加到body标签中
    document.body.appendChild(scriptM);
}

function success(data){
    console.log(data.result
    ); 
}

后端

php 复制代码
$val = $_GET['cb'];
$data = '{
    "code":1,
    "msg":"ok",
    "data":[{
        "uname":"jack",
        "class":"java"
    },{
        "uname":"rose",
        "class":"ui"
    },{
        "uname":"bob",
        "class":"鸿蒙"
    },{
        "uname":"张三",
        "class":"java"
    }]
}';
echo $val."(".$data.")"; // abc();

补充url 对象

URL的编码/解码方式

JavaScript 提供四个 URL 的编码/解码方法。

  • encodeURI()

  • encodeURIComponent()

  • decodeURI()

  • decodeURIComponent()

1.encodeURI()方法用于转码整个 URL。它的参数是一个字符串,代表整个 URL。它会将元字符和语义字符之外的字符,都进行转义

javascript 复制代码
encodeURI('http://www.example.com/q=春节')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"

2。encodeURIComponent()

encodeURIComponent()方法用于转码 URL 的组成部分,会转码除了语义字符之外的所有字符,即元字符也会被转码。所以,它不能用于转码整个 URL。它接受一个参数,就是 URL 的片段

javascript 复制代码
encodeURIComponent('春节') 
// "%E6%98%A5%E8%8A%82" 
encodeURIComponent('http://www.example.com/q=春节') 
// "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82" 1234

3.decodeURI()

decodeURI()方法用于整个 URL 的解码。它是encodeURI()方法的逆运算。它接受一个参数,就是转码后的 URL。

javascript 复制代码
decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82') 
// "http://www.example.com/q=春节" 12

4。decodeURIComponent()

decodeURIComponent()用于URL 片段的解码。它是encodeURIComponent()方法的逆运算。它接受一个参数,就是转码后的 URL 片段

javascript 复制代码
decodeURIComponent('%E6%98%A5%E8%8A%82') // "春节"

相关推荐
葬歌倾城1 天前
JSON的缩进格式方式和紧凑格式方式
c#·json
火车叨位去19492 天前
Java中的JSON序列化和反序列化
json
测试杂货铺2 天前
Jmeter(六):json断言元件,jmeter参数化实现
jmeter·json
专注VB编程开发20年3 天前
C#,VB.NET从JSON数据里提取数组中的对象节点值
c#·json·.net
草履虫建模3 天前
Postman - API 调试与开发工具 - 标准使用流程
java·测试工具·spring·json·测试用例·postman·集成学习
奔跑的蜗牛AZ13 天前
TiDB 字符串行转列与 JSON 数据查询优化知识笔记
笔记·json·tidb
jarctique14 天前
java 找出两个json文件的不同之处
java·json
wtsolutions15 天前
Excel to JSON online converter, flat and nested JSON converter
json·excel·excel-to-json·wtsolutions
漫谈网络16 天前
JSON 数据格式详解
网络·python·json·数据格式
lwb_011817 天前
Spring MVC参数绑定终极手册:单&多参对象集合JSON文件上传精讲
spring·json·mvc