Detailed explanation of json-server

Zero, article directory

Detailed explanation of json-server

1 Introduction

• Json-server is a零代码快速搭建本地 RESTful API 的工具. It uses JSON 文件作为数据源 and provides a simple set of routes and endpoints that simulate the behavior of the backend server.
• github地址：https://github.com/typicode/json-server
• npm地址：https://www.npmjs.com/package/json-server

2. Installation

• json-server is installed based on npm. After installing node, npm is automatically installed. Therefore, to install json-server, you need to install node first. For node-related knowledge, please refer toGetting Started with Node< /span>. npm Getting Started, for npm related knowledge, please refer to
• 安装json-server：Install json-server globally using npm or yarn.

npm install -g json-server

• Verify whether the installation is successful: if the version number is displayed, the installation is successful.

json-server -v

3. Quick use

1. 创建JSON文件：Create a JSON file as the data source, for example db.json, and define the data you want to simulate in it, for example:

{
    
    
  "users": [
    {
    
     "id": 1, "name": "John" },
    {
    
     "id": 2, "name": "Jane" }
  ]
}

2. 启动json-server：Use the following command to start json-server and pass the JSON file as a parameter to the server. This will start the server on your local machine and expose the data in the db.json file as a RESTful API. 3000端口

json-server --watch db.json

3. 使用API：The data provided by json-server can be accessed using a web browser or any HTTP client program (such as Postman). For example, the following URL will retrieve all users in a JSON file:

http://localhost:3000/users

4. Parameter description

• grammar:json-server [options] <source>

parameter	abbreviation	illustrate	default value
–config	-c	Specify configuration file path	json-server.json
–port	-p	Specify port	3000
–host	-H	Specify hostname	localhost
–watch	-In	Monitor file changes
–routes	-r	Specify routing file path
–middlewares	-m	Specify middleware file path
–static	-s	Specify static file folder path
–read-only	–ro	Specify that only get requests are allowed
–no-cors	–nc	Cross-domain sharing prohibited
–no-gzip	-of	Disable gzip compression
–snapshots	-S	Specify snapshot directory	.
–delay	-d	Specify delayed return duration (ms)
–id	-i	Specify the ID attribute of the database	id
–foreignKeySuffix	- for example	Specify foreign key prefix	Id
–quiet	-q	Suppress log messages from output
–help	-h	show help
–version	-in	Show version number

(1) Create json data

• In the empty folder test, execute the command

json-server --watch db.json

• db.jsonA file with default content will be generated in the folder

{
    
    
  "posts": [
    {
    
    
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
    
    
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    
    
    "name": "typicode"
  }
}

• Access addresshttp://localhost:3000/The following pages will be displayed, you can click respectively/posts /comment /profile Link, you can see the respective json data. http://localhost:3000/dbThe link can access the complete data.

(2) Modify port

• The default port of json-server is 3000. We can also specify the port ourselves. The instructions are as follows:

json-server --watch db.json --port 8887

(3) Use configuration files

• Configuring through the command line will make the commands very long and easy to type incorrectly;
• json-server allows us to put all configurations into a configuration file. This configuration file is generally namedjson_sever_config.json

{
    
    
  "port": 8887,            
  "watch": true,
  "read-only": false, 
  "no-cors": false, 
  "no-gzip": false
}

• Then start the service command as follows

json-server -c json_sever_config.json db.json

(4) Static server

• You can configure a static server,./static is the static file path, with a picture in ittest.jpg
• After the service is started, enter directly in the browserhttp://localhost:3000/test.jpg to access this image

json-server -s ./static db.json

5. Add, delete, modify and check

(1) Prepare data

• We have exactly one test datadb.json, which is the content data of 15 articles. Please note that the data format must comply with JSON format. If the data format is incorrect, the command window will report an error. You can follow The error message needs to be corrected.
• Start the service:json-server --watch db.json

{
    
    
    "articles": [{
    
    
            "userId": 1,
            "id": 1,
            "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
            "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
        },
        {
    
    
            "userId": 1,
            "id": 2,
            "title": "qui est esse",
            "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
        },
        {
    
    
            "userId": 1,
            "id": 3,
            "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
            "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
        },
        {
    
    
            "userId": 2,
            "id": 11,
            "title": "et ea vero quia laudantium autem",
            "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
        },
        {
    
    
            "userId": 2,
            "id": 12,
            "title": "in quibusdam tempore odit est dolorem",
            "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
        },
        {
    
    
            "userId": 2,
            "id": 13,
            "title": "dolorum ut in voluptas mollitia et saepe quo animi",
            "body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
        },
        {
    
    
            "userId": 3,
            "id": 21,
            "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
            "body": "repellat aliquid praesentium dolorem quo\nsed totam minus non itaque\nnihil labore molestiae sunt dolor eveniet hic recusandae veniam\ntempora et tenetur expedita sunt"
        },
        {
    
    
            "userId": 3,
            "id": 22,
            "title": "dolor sint quo a velit explicabo quia nam",
            "body": "eos qui et ipsum ipsam suscipit aut\nsed omnis non odio\nexpedita earum mollitia molestiae aut atque rem suscipit\nnam impedit esse"
        },
        {
    
    
            "userId": 3,
            "id": 23,
            "title": "maxime id vitae nihil numquam",
            "body": "veritatis unde neque eligendi\nquae quod architecto quo neque vitae\nest illo sit tempora doloremque fugit quod\net et vel beatae sequi ullam sed tenetur perspiciatis"
        },
        {
    
    
            "userId": 4,
            "id": 31,
            "title": "ullam ut quidem id aut vel consequuntur",
            "body": "debitis eius sed quibusdam non quis consectetur vitae\nimpedit ut qui consequatur sed aut in\nquidem sit nostrum et maiores adipisci atque\nquaerat voluptatem adipisci repudiandae"
        },
        {
    
    
            "userId": 4,
            "id": 32,
            "title": "doloremque illum aliquid sunt",
            "body": "deserunt eos nobis asperiores et hic\nest debitis repellat molestiae optio\nnihil ratione ut eos beatae quibusdam distinctio maiores\nearum voluptates et aut adipisci ea maiores voluptas maxime"
        },
        {
    
    
            "userId": 4,
            "id": 33,
            "title": "qui explicabo molestiae dolorem",
            "body": "rerum ut et numquam laborum odit est sit\nid qui sint in\nquasi tenetur tempore aperiam et quaerat qui in\nrerum officiis sequi cumque quod"
        },
        {
    
    
            "userId": 5,
            "id": 41,
            "title": "non est facere",
            "body": "molestias id nostrum\nexcepturi molestiae dolore omnis repellendus quaerat saepe\nconsectetur iste quaerat tenetur asperiores accusamus ex ut\nnam quidem est ducimus sunt debitis saepe"
        },
        {
    
    
            "userId": 5,
            "id": 42,
            "title": "commodi ullam sint et excepturi error explicabo praesentium voluptas",
            "body": "odio fugit voluptatum ducimus earum autem est incidunt voluptatem\nodit reiciendis aliquam sunt sequi nulla dolorem\nnon facere repellendus voluptates quia\nratione harum vitae ut"
        },
        {
    
    
            "userId": 5,
            "id": 43,
            "title": "eligendi iste nostrum consequuntur adipisci praesentium sit beatae perferendis",
            "body": "similique fugit est\nillum et dolorum harum et voluptate eaque quidem\nexercitationem quos nam commodi possimus cum odio nihil nulla\ndolorum exercitationem magnam ex et a et distinctio debitis"
        }
    ]
}

(2) Get all data

• Get all article content and return对象数组

http://localhost:3000/articles

(3) Filter conditions

• Get data based on id and return单个对象

http://localhost:3000/articles/1

{
    
    
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

• You can also use the url parameter writing method to return对象数组

http://localhost:3000/articles?id=1

[
  {
    
    
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  }
]

• You can also specify multiple conditions, connect them with & symbols, and return对象数组

http://localhost:3000/articles?userId=1&id=1

[
  {
    
    
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  }
]

• Use_gte, _lte to set the value range of a field. Includes beginning and end.

http://localhost:3000/articles?id_gte=1&id_lte=12

[
  {
    
    
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    
    
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    
    
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    
    
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
    "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
  },
  {
    
    
    "userId": 2,
    "id": 12,
    "title": "in quibusdam tempore odit est dolorem",
    "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
  }
]

• Use_ne to exclude a value.

http://localhost:3000/articles?id_ne=1&id_ne=2

[
  {
    
    
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    
    
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
    "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
  },
  {
    
    
    "userId": 2,
    "id": 12,
    "title": "in quibusdam tempore odit est dolorem",
    "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
  }
  ......
]

• _start to specify the starting position, _end to specify the ending position, or _limit to specify how many data to take from the starting position. Does not contain_start, contains_end.

http://localhost:3000/articles?_start=2&_end=5

[
  {
    
    
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    
    
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
    "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
  },
  {
    
    
    "userId": 2,
    "id": 12,
    "title": "in quibusdam tempore odit est dolorem",
    "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
  }
]

• Use_like to set a fuzzy matching field

http://localhost:3000/articles?id_like=3

[
  {
    
    
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    
    
    "userId": 2,
    "id": 13,
    "title": "dolorum ut in voluptas mollitia et saepe quo animi",
    "body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
  },
  {
    
    
    "userId": 3,
    "id": 23,
    "title": "maxime id vitae nihil numquam",
    "body": "veritatis unde neque eligendi\nquae quod architecto quo neque vitae\nest illo sit tempora doloremque fugit quod\net et vel beatae sequi ullam sed tenetur perspiciatis"
  },
  {
    
    
    "userId": 4,
    "id": 31,
    "title": "ullam ut quidem id aut vel consequuntur",
    "body": "debitis eius sed quibusdam non quis consectetur vitae\nimpedit ut qui consequatur sed aut in\nquidem sit nostrum et maiores adipisci atque\nquaerat voluptatem adipisci repudiandae"
  },
  {
    
    
    "userId": 4,
    "id": 32,
    "title": "doloremque illum aliquid sunt",
    "body": "deserunt eos nobis asperiores et hic\nest debitis repellat molestiae optio\nnihil ratione ut eos beatae quibusdam distinctio maiores\nearum voluptates et aut adipisci ea maiores voluptas maxime"
  },
  {
    
    
    "userId": 4,
    "id": 33,
    "title": "qui explicabo molestiae dolorem",
    "body": "rerum ut et numquam laborum odit est sit\nid qui sint in\nquasi tenetur tempore aperiam et quaerat qui in\nrerum officiis sequi cumque quod"
  },
  {
    
    
    "userId": 5,
    "id": 43,
    "title": "eligendi iste nostrum consequuntur adipisci praesentium sit beatae perferendis",
    "body": "similique fugit est\nillum et dolorum harum et voluptate eaque quidem\nexercitationem quos nam commodi possimus cum odio nihil nulla\ndolorum exercitationem magnam ex et a et distinctio debitis"
  }
]

• Use q to set up full-text search

http://localhost:3000/articles?q=maxime

[
  {
    
    
    "userId": 3,
    "id": 23,
    "title": "maxime id vitae nihil numquam",
    "body": "veritatis unde neque eligendi\nquae quod architecto quo neque vitae\nest illo sit tempora doloremque fugit quod\net et vel beatae sequi ullam sed tenetur perspiciatis"
  },
  {
    
    
    "userId": 4,
    "id": 32,
    "title": "doloremque illum aliquid sunt",
    "body": "deserunt eos nobis asperiores et hic\nest debitis repellat molestiae optio\nnihil ratione ut eos beatae quibusdam distinctio maiores\nearum voluptates et aut adipisci ea maiores voluptas maxime"
  }
]

(4) Data paging

• Paging uses _page to set the page number, and _limit to control the number of items displayed on each page. If _limit is not specified, the default is 10 items per page.

http://localhost:3000/articles?_page=2&_limit=3

[
  {
    
    
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
    "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
  },
  {
    
    
    "userId": 2,
    "id": 12,
    "title": "in quibusdam tempore odit est dolorem",
    "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
  },
  {
    
    
    "userId": 2,
    "id": 13,
    "title": "dolorum ut in voluptas mollitia et saepe quo animi",
    "body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
  }
]

(5) Interception of data

• (6) Data sorting

• _sort specifies the field to be sorted, _order specifies forward or reverse order (asc | desc, the default is asc)

http://localhost:3000/articles?_sort=id&_order=desc

[
  {
    
    
    "userId": 5,
    "id": 43,
    "title": "eligendi iste nostrum consequuntur adipisci praesentium sit beatae perferendis",
    "body": "similique fugit est\nillum et dolorum harum et voluptate eaque quidem\nexercitationem quos nam commodi possimus cum odio nihil nulla\ndolorum exercitationem magnam ex et a et distinctio debitis"
  },
  {
    
    
    "userId": 5,
    "id": 42,
    "title": "commodi ullam sint et excepturi error explicabo praesentium voluptas",
    "body": "odio fugit voluptatum ducimus earum autem est incidunt voluptatem\nodit reiciendis aliquam sunt sequi nulla dolorem\nnon facere repellendus voluptates quia\nratione harum vitae ut"
  },
  {
    
    
    "userId": 5,
    "id": 41,
    "title": "non est facere",
    "body": "molestias id nostrum\nexcepturi molestiae dolore omnis repellendus quaerat saepe\nconsectetur iste quaerat tenetur asperiores accusamus ex ut\nnam quidem est ducimus sunt debitis saepe"
  },
  ......
]

• You can also specify multiple fields to sort. The first field will be sorted first, and if the previous fields are the same, the second field will be sorted.

http://localhost:3000/articles?_sort=userId,id&_order=desc,asc

[
  {
    
    
    "userId": 5,
    "id": 41,
    "title": "non est facere",
    "body": "molestias id nostrum\nexcepturi molestiae dolore omnis repellendus quaerat saepe\nconsectetur iste quaerat tenetur asperiores accusamus ex ut\nnam quidem est ducimus sunt debitis saepe"
  },
  {
    
    
    "userId": 5,
    "id": 42,
    "title": "commodi ullam sint et excepturi error explicabo praesentium voluptas",
    "body": "odio fugit voluptatum ducimus earum autem est incidunt voluptatem\nodit reiciendis aliquam sunt sequi nulla dolorem\nnon facere repellendus voluptates quia\nratione harum vitae ut"
  },
  {
    
    
    "userId": 5,
    "id": 43,
    "title": "eligendi iste nostrum consequuntur adipisci praesentium sit beatae perferendis",
    "body": "similique fugit est\nillum et dolorum harum et voluptate eaque quidem\nexercitationem quos nam commodi possimus cum odio nihil nulla\ndolorum exercitationem magnam ex et a et distinctio debitis"
  },
  {
    
    
    "userId": 4,
    "id": 31,
    "title": "ullam ut quidem id aut vel consequuntur",
    "body": "debitis eius sed quibusdam non quis consectetur vitae\nimpedit ut qui consequatur sed aut in\nquidem sit nostrum et maiores adipisci atque\nquaerat voluptatem adipisci repudiandae"
  },
  {
    
    
    "userId": 4,
    "id": 32,
    "title": "doloremque illum aliquid sunt",
    "body": "deserunt eos nobis asperiores et hic\nest debitis repellat molestiae optio\nnihil ratione ut eos beatae quibusdam distinctio maiores\nearum voluptates et aut adipisci ea maiores voluptas maxime"
  },
  {
    
    
    "userId": 4,
    "id": 33,
    "title": "qui explicabo molestiae dolorem",
    "body": "rerum ut et numquam laborum odit est sit\nid qui sint in\nquasi tenetur tempore aperiam et quaerat qui in\nrerum officiis sequi cumque quod"
  }
  ......
]

(6) Add data

• You can use the api calling tool apifox to call directly, and the return value is a complete data object.

• You can also use ajax to initiate a request

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加数据</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>

<body>
    <button id="add">添加数据</button>
    <script>
        //添加数据
        $("#add").click(function() {
      
      
            $.ajax({
      
      
                type: 'post',
                url: 'http://localhost:3000/articles',
                data: {
      
      
                    userId: 6,
                    id: 51,
                    title: '添加数据',
                    body: '添加数据'
                },
                success: function(data) {
      
      
                    console.log("post success")
                },
                error: function() {
      
      
                    alert("post error")
                }
            })
        })
    </script>
</body>

</html>

(7) Update data

• Interface debugging tool

• ajax request

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更新数据</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>

<body>
    <button id="update">更新数据</button>
    <script>
        //更新数据
        $("#update").click(function() {
      
      
            $.ajax({
      
      
                type: 'put',
                url: 'http://localhost:3000/articles/51',
                data: {
      
      
                    userId: 7,
                    title: '更新数据',
                    body: '更新数据'
                },
                success: function(data) {
      
      
                    console.log("put success")
                },
                error: function() {
      
      
                    alert("put error")
                }
            })
        })
    </script>
</body>

</html>

(8) Delete data

• Interface debugging tool

• ajax request

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除数据</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>

<body>
    <button id="delete">删除数据</button>
    <script>
        //删除数据
        $("#delete").click(function() {
      
      
            $.ajax({
      
      
                type: 'delete',
                url: 'http://localhost:3000/articles/51',
                dataType: "json",
                success: function(data) {
      
      
                    console.log("delete success")
                },
                error: function() {
      
      
                    alert("delete error")
                }
            })
        })
    </script>
</body>

</html>