2

Никак не могу разобраться как передать данные собранные с помощью Vue.js в php переменную. Пробовал с помощью axios, но ничего не вышло.

Задача такова: выбираем 2 значения с поля , нажимаем обновить, эти значения передаются в php функцию, там эти значения использую для запроса в БД, потом всё что получил вывожу в html.

Вот код JS:

< script type = "text/javascript" >
  new Vue({
    el: '#all',
    data: {
      items: [],
      selected1: '',
      selected2: '',
    },
    methods: {
      get() {
        axios({
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            url: 'query.php',
            responseType: 'json'
          })
          .then(response => (this.items = (response.data)))
          .catch(function(error) {
            console.log(error)
          });
      }
    },
    mounted() {

}



}) <
  /script>

Вот так пытаюсь принять на стороне сервера:

 if($_SERVER['REQUEST_METHOD']==='POST' && empty($_POST)) {
    $_POST = json_decode(file_get_contents('http://php://input'));
    $data = 10;
    $data = $_POST;
}
A K
  • 28,718
fusrodah
  • 27
  • Может, условие изменть !empty($_POST)? – Stepan Kasyanenko Apr 22 '19 at 14:54
  • странно парсить json когда вы передаёте в x-www-form-urlencoded (я писал об этом в контексте asp.net но пара ссылок оттуда вам пригодится почитать теорию), потому что в urlencode ключ-значения передаются, а не json – A K Apr 22 '19 at 15:18
  • Не вижу, что конкретно отправляется в качестве нагрузки. Вижу метод, вижу заголовки, вижу урл, вижу ещё что-то, а самой нагрузки не вижу. Поля где? :) – Alex Sazonov Apr 22 '19 at 16:55
  • 2
    file_get_contents('http://php://input') - поправить на file_get_contents('php://input') – Total Pusher Apr 23 '19 at 05:48

2 Answers2

1

Вам нужно отправлять не как x-www-form-urlencoded , а как json:

const config = {
  baseURL: API_URL,
  headers: {
    post: {
      'Content-Type': 'application/json',
    },
  },
};
const instance = axios.create(config);
instance.post('/url', {param1: value1, param2:value2 });

Вот отсюда могу порекомендовать пару ссылок для понимания механики:

На стороне PHP код у вас правильный, я похожим разбираю:

$data = file_get_contents("php://input")
$json = json_decode($data, true);
A K
  • 28,718
0

Всем большое спасибо за ответы, всё помогло.

Реализовал так:

new Vue({
  el: '#all',
  data: {
    items: '',
    selected1: '',
    selected2: '',
  },
  methods: {
    get() {
      axios({
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          data: {
            sel1: '2',
            sel2: '5',
          },
          url: 'query.php',
          responseType: 'json'
        })
        .then(response => (this.items = response.data))
        .catch(function(error) {
          console.log(error)
        });
    }
  },
})

На стороне сервера:

$data = file_get_contents("php://input");
echo json_encode($data, true);

Но ещё появился вопрос, если я на стороне сервера ещё попытаюсь что то вывести, например:

data = file_get_contents("php://input");
echo json_encode($data, true);
echo 10;

Тогда не выводит совсем ничего (что логично). Как быть в таком случае? В том же ajax эту проблему решить легко.

fusrodah
  • 27