M
M
m1stik2018-09-28 08:45:46
Vue.js
m1stik, 2018-09-28 08:45:46

How to send a POST request from Vue.js to PHP?

Hello. Please help me figure out why I can't send a POST request through Vue.js, or I can't properly accept it through PHP.
Here are the Vue.js codes. Departure:

let tests = {
    cat1: {
        name: 'Авторизация',
        items: {
            authorize1: {
                name: 'Авторизация',
                subname: '',
                request: {
                    method: 'POST',
                    link: 'auth',
                    data: {
                        login: 'admin',
                        password: 'password'
                    }
                },
                test: (result, status) => {
                    if (status.status !== 404 && status.status != 403 && status.status != 500) {
                        return true;
                    }

                    return false;
                }
            }}}}

Method:
let f = (method, link, data, cb) => {
    let options = {
        method: method,
        headers: new Headers()
    };

    if(data instanceof FormData) {
        options.body = data;
    } else if(data) {
        let fd = new FormData();
        for(let key in data) fd.append(key, data[key]);
        options.body = fd;
    }
    if(vue.bearerEnabled)
        options.headers.append('Authorization', 'Bearer ' + vue.bearer);

    let status = false;
    fetch(link, options)
        .then(r => {
            if(r.status == 404) {
                cb(null, r);
            }

            status = r;
            return r.json();
        }).then(r => {
            cb(r, status);
        });
};
let vue;

window.onload = _ => {
    vue = new Vue({
        el: '#app',
        data: {
            url: 'http://wsr.cc:898/osnov1/api/',
            isStart: false,
            tests: [],
            bearer: '',
            bearerEnabled: false
        },

        methods: {
            appStart() {
                if (this.url !== '') {
                    this.isStart = true;
                    let newTests = {};

                    for(cat in tests) {
                        newTests[cat] = {};
                        newTests[cat].name = tests[cat].name;
                        newTests[cat].items = {};

                        for(id in tests[cat].items) {
                            newTests[cat].items[id] = tests[cat].items[id];
                            newTests[cat].items[id].sended = false;
                            newTests[cat].items[id].status = null;
                            newTests[cat].items[id].response = {
                                statusCode: null,
                                statusText: null,
                                body: null
                            };

                            newTests[cat].items[id].ok = false;
                        }
                    }

                    this.tests = newTests
                }
            },

            test(cat, id) {
                let item = this.tests[cat].items[id];
                let data = item.custom ? new FormData(document.querySelector('[data-form=' + cat + '_' + id + ']')) : item.request.data;
                let url = this.url + item.request.link;

                if(item.request.customLink) {
                    for(let key in item.request.customLink) {
                        url = url.replace('{' + key + '}', document.querySelector('[data-value="' + cat + '_' + id + '_' + key + '"]').value);
                    }
                }

                f(item.request.method, url, data, (result, status) => {
                    this.tests[cat].items[id].status = item.test(result, status);

                    this.tests[cat].items[id].sended = true;
                    this.tests[cat].items[id].originalUrl = url;
                    this.tests[cat].items[id].response.statusCode = status.status;
                    this.tests[cat].items[id].response.statusText = status.statusText;

                    this.tests[cat].items[id].response.body = JSON.stringify(result, null, 4);
                });
            },

        }
    });
};

There is nothing in PHP itself in POST, "file_get_contents('php://input')" doesn't help either, it's empty.

Answer the question

In order to leave comments, you need to log in

3 answer(s)
K
Konstantin Malyarov, 2018-09-28
@Konstantin18ko

Ajax, Axios, Vue resource - that's what sends post requests.

A
Alex_Zdorgor, 2018-09-28
@Alex_Zdorgor

Use ajax request from any library or pure js. But for Vue, the most commonly used library is Axios.
https://ru.vuejs.org/v2/cookbook/using-axios-to-co...

V
Viktor_Dav, 2018-09-28
@Viktor_Dav

It is not entirely clear what it is. Could you provide the complete code?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question