How to pass id parameter when calling interface in Uniapp

In Uniapp development, some parameters need to be passed when calling the backend interface. One of the common parameters is id. The id of an interface usually refers to the unique identifier of the data on which the operation needs to be performed. This article will introduce how to pass the id parameter when calling the interface in Uniapp.

1. Type of id parameter

When passing the id parameter, you need to know which type the id is represented by. Typically, the id can be of numeric or string type. In back-end development, the data type of id may be integer, long, string, etc., so the type of id needs to be determined according to the back-end interface development document.

2. Pass the id parameter when calling the interface

1. Pass the id parameter through querystring

In the GET request, the request parameters can be passed through querystring. Querystring is a string that starts with a question mark (?), followed by multiple parameters consisting of "key-value pairs", separated by "&" between parameters. For example:

http://www.example.com/api/user?id=123456

In the above URL, id=123456 is a querystring parameter, where id is the parameter name and 123456 is the parameter value.

In Uniapp, when using uni.request to initiate a GET request, you can pass the id parameter by adding querystring. For example:

uni.request({
    url: 'http://www.example.com/api/user',
    data: {
        id: '123456'
    },
    success: function (res) {
        console.log(res.data)
    }
})

In the above code, an id parameter is passed through the data attribute, and the interface address is 'http://www.example.com/api/user'. Querystring will be automatically generated in the request, and the final requested URL is 'http://www.example.com/api/user?id=123456'.

2. Pass the id parameter through the url

In some cases, the id parameter needs to be added directly to the requested URL. For example:

uni.request({
    url: `http://www.example.com/api/user/${id}`,
    success: function (res) {
        console.log(res.data)
    }
})

In the above code, a URL containing the variable id is defined using backticks (`). In the actual request the URL will be replaced with 'http://www.example.com/api/user/123456', where 123456 is the actual id value.

3. Pass the id parameter through the request body

In the POST request, the parameters cannot be added directly to the URL, but the parameters need to be added to the request body. You can use parameters in JSON format or parameters in form format, which you select according to the backend interface document.

• Use JSON format to pass parameters

uni.request({
    url: 'http://www.example.com/api/user',
    method: 'POST',
    header: {
        'content-type': 'application/json'
    },
    data: {
        id: 123456
    },
    success: function (res) {
        console.log(res.data)
    }
})

In the above code, use JSON.stringify to serialize the parameter object into JSON format, and then add it to the data attribute .

• Use form format to pass parameters

uni.request({
    url: 'http://www.example.com/api/user',
    method: 'POST',
    header: {
        'content-type': 'application/x-www-form-urlencoded'
    },
    data: {
        id: 123456
    },
    success: function (res) {
        console.log(res.data)
    }
})

In the above code, use contentType as 'application/x-www-form-urlencoded' and serialize the parameter object Format the form and add it to the data attribute.

3. Summary

There are many ways to pass the id parameter when calling the interface in Uniapp. You can choose the appropriate method according to the back-end interface usage documentation. When using querystring to pass parameters, you need to pay attention to the URI length limit; when using POST requests, you need to pay attention to the format of the request body. After mastering these skills, you can smoothly call the interface and pass the id parameter in Uniapp.

The above is the detailed content of How to pass id parameter when calling interface in Uniapp. For more information, please follow other related articles on the PHP Chinese website!