模拟数据 json-server 增删改查 操作

一、准备页面

html

<ul class="list">
  <li class="add">添加数据</li>
  <li class="change">修改数据</li>
  <li class="del">删除数据</li>
  <li class="sel">查找指定数据</li>
</ul>

json

{
  "listData": [
    {
      "id": "1",
      "title": "标题一",
      "content": "描述一",
      "city": "上海"
    },
    {
      "id": "2",
      "title": "标题二",
      "content": "描述二 ",
      "city": "苏州"
    },
    {
      "id": "3",
      "title": "标题三",
      "content": "描述三 ",
      "city": "南京"
    },
    {
      "id": "4",
      "title": "标题四",
      "content": "描述四 ",
      "city": "香港"
    },
    {
      "id": "5",
      "title": "标题五",
      "content": "描述五 ",
      "city": "北京"
    }
  ]
}

二、请求数据

//请求数据
$.ajax({
	type:"get",
	url:"http://localhost:50000/listData",
	dataType:"json",
	success:function(e){
		console.log(e, '请求成功')
	},
	error:function(e){
		console.log(e, '请求失败')
	}
})

运行结果

二、查询数据（ 查询id=1的为例 ，点击查询按钮 ）

//获取指定用户
$(".sel").click(function(){
    $.ajax({
	type:"get",
	url:"http://localhost:50000/listData/1",
        dataType:"json",
        success:function(e){
            console.log(e, '请求成功')
        },
        error:function(e){
            console.log(e, '请求失败')
        }
    })
});

运行结果

三、增加数据

//增加数据
$(".add").click(function(){
    var newData={
	"id": "6",
	"title": "新加入的数据",
	"content": "new ",
	"city": "new",
	"adrs": "new"
    };
    $.ajax({
        type:"post",
        url:"http://localhost:50000/listData",
        data:newData,
        success:function(e){
            console.log(e, '请求成功')
        },
        error:function(e){
            console.log(e, '请求失败')
        }
    })
});

运行结果

可以刷新页面在看下，或者查看db.json里已经添加了新增的数据

四、修改数据（ 这里是以修改id为6的为例 ，id=6的是上一步新增的数据 ）

//修改数据
$(".change").click(function(){
    var upData={
	"title":"我是修改数据",
	"content":"我是修改描述",
	"city":"我是修改城市"
    };
    $.ajax({
        type:"put",
        url:"http://localhost:50000/listData/6",
        data:upData,
        success:function(e){
            console.log(e, '请求成功')
        },
        error:function(e){
            console.log(e, '请求失败')
        }
    })
});

运行结果

在刷新页面就可以更清楚的看到第六条数据的变化

五、删除数据（ 这里还是以删除上一步修改的数据为例 ）

//删除数据
$(".del").click(function(){
    var delId=6;
    $.ajax({
        type:"delete",
        url:"http://localhost:50000/listData/"+delId,
        dataType:"json",
        success:function(e){
            console.log(e, '请求成功')
        },
        error:function(e){
            console.log(e, '请求失败')
        }
    })
})

运行结果

刷新页面可以清楚看到数据变化，上一条id=6的数据已经删除了

最后，关于json-server的安装 在上一篇博客有操作步骤 → vue配置json-server, 与vue配合使用 数据请求_闲来无事垂钓的博客-CSDN博客