七叶笔记 » golang编程 » 4种Jquery常见请求，Get、Post、Put、Delete

4种Jquery常见请求，Get、Post、Put、Delete

分类: golang编程 | 浏览: 207

GET的2种方法

设置2个按钮

POST的2种方法

POST的方法

DELETE的方法

文件源码 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.css">
</head>
<body class="container">
<div id="app">
    <h1>Get请求</h1>
    <button class="btn btn-block btn-primary" @click="GetAjax()">Get请求(ajax方法)</button>
    <button class="btn btn-block btn-primary" @click="GetGet()">Get请求(Get方法)</button>
    <h1>Post请求</h1>
    <button class="btn btn-block btn-primary" @click="PostAjax()">Post请求(ajax方法)</button>
    <button class="btn btn-block btn-primary" @click="PostPost()">Post请求(Post方法)</button>
    <h1>Put请求</h1>
    <button class="btn btn-block btn-primary" @click="PutAjax()">Put请求(ajax方法)</button>
    <h1>Delete请求</h1>
    <button class="btn btn-block btn-primary" @click="DeleteAjax()">Delete请求(ajax方法)</button>

    <pre v-html="resp1"></pre>
    <pre v-html="resp1.user"></pre>
</div>
<script src="static/js/vue.js"></script>
<script src="static/js/jquery-3.6.0.js"></script>
<script>
    Vue.config.productionTip = false
    var vm = new Vue({
        el: "#app",
        data: {
            resp: [
                {
                    "id": 0,
                    "name": "",
                    "age": "0",
                    "address": "",
                    "color": ["",]
                },
            ],
            resp1: {
                "id": 0,
                "name": "",
                "age": "0",
                "address": "",
                "color": ["",]
            }
        },
        methods: {
            //Get请求(ajax方法)
            GetAjax: function () {
                $.ajax({
                    type: 'GET',
                    url: "#34;,
                    data: {
                        "id": 10,
                        "name": "张三",
                        "age": 18,
                        "address": "南京",
                        "color": ["红色", "白色"]
                    },
                    success: function (data, status) {
                        console.log(data);
                        console.log(status);
                        vm.resp1 = data
                    },
                });
            },
            //Get请求(Get方法)
            GetGet: function () {
                $.get(
                    "#34;,
                    {
                        "id": 10,
                        "name": "张三",
                        "age": 18,
                        "address": "南京",
                        "color": ["红色", "白色"]
                    },
                    function (data, status) {
                        console.log(data);
                        console.log(status);
                        vm.resp1 = data
                    });
            },
            // Post请求(ajax方法)
            PostAjax: function () {
                $.ajax({
                    type: 'POST',
                    url: "#34;,
                    data: {
                        "id": 10,
                        "name": "张三",
                        "age": 18,
                        "address": "南京",
                        "color": ["红色", "白色"]
                    },
                    success: function (data, status) {
                        console.log(data);
                        console.log(status);
                        vm.resp1 = data
                    },
                });
            },
            //Post请求(Post方法)
            PostPost: function () {
                $.post(
                    "#34;,
                    {
                        "id": 10,
                        "name": "张三",
                        "age": 18,
                        "address": "南京",
                        "color": ["红色", "白色"]
                    },
                    function (data, status) {
                        console.log(data);
                        console.log(status);
                        vm.resp1 = data
                    });
            },
            // Put请求(ajax方法)
            PutAjax: function () {
                $.ajax({
                    type: 'PUT',
                    url: "#34;,
                    data: {
                        "id": 10,
                        "name": "张三",
                        "age": 18,
                        "address": "南京",
                        "color": ["红色", "白色"]
                    },
                    success: function (data, status) {
                        console.log(data);
                        console.log(status);
                        vm.resp1 = data
                    },
                });
            },
            //Delete请求(ajax方法)
            DeleteAjax: function () {
                $.ajax({
                    type: 'DELETE',
                    url: "#34;,
                    data: {
                        "id": 10,
                        "name": "张三",
                        "age": 18,
                        "address": "南京",
                        "color": ["红色", "白色"]
                    },
                    success: function (data, status) {
                        console.log(data);
                        console.log(status);
                        vm.resp1 = data
                    },
                });
            }
        }
    })
</script>
</body>
</html>

相关文章