Как передать значение из JS в PHP?

Question

[Роман]

Всем привет.

Сейчас осваиваю создание приложений для Битрикс24.
Там планируется опция выбора сотрудника, которая вызывается JS-методом BX24.selectUser().

<button class="btn-dismiss" onclick="BX24.selectUser(dismissUser);">Выбрать сотрудника</button>
<script>
var handler = function(result) {
    var ID = result.id;
//    console.log(result);
    $.ajax({
        url: '/index.php',
        method: 'GET',
        data: 'id='+ID,
        async: true
    }).success(function(data){
        var userId = data;
        console.log(userId);
    });
}
var dismissUser = handler;
</script>

Так вот, когда я нажимаю на кнопку, появляется диалоговое окно, я выбираю пользователя, если в обработчике просто написано console.log(result), то всё работает - в консоли выводится массив с информацией о выбранном пользователе.

Однако если я пробую написать ajax-запрос, то в консоль улетает вот такая хрень:

Причём если посмотреть заголовки, то данные передаются, и если я пишу обработчик на php, тоже срабатывает. Однако на странице приложения в Битрикс24 почему-то ничего не отображается.

JS я практически не знаю, поэтому не могу понять, что не так делаю ((

Буду благодарен за любые подсказки и советы.

Answer 1

[irishmann]

Так все правильно, вы делаете запрос в url: '/index.php', но там вывод страницы, и в консоль у вас падает html

Comments

[Роман]

а что нужно сделать, чтобы просто нужные данные передавались, без html, а также чтобы на странице приложения данные выводились в публичной части битрикс24, а не в превьюхе панели разработчика?

[irishmann]

Роман Гонюков, что вы хотите получить в ответ, можете показать обработчик?

[Роман]

irishmann,

var handler = function(result) {
    var ID = result.id;
//    console.log(result);
    $.ajax({
        url: '/index.php',
        method: 'GET',
        data: 'id='+ID,
        async: true
    }).success(function(data){
        var userId = data;
        console.log(userId);
    });
}
var dismissUser = handler;
var subUser = handler;

handler - это обработчик, который должен получать id выбранных пользователей, этот id уже передаётся в PHP, где вызываются rest api методы битрикс24 (например, нужно получить список задач выбранного пользователя и передать их другому пользователю)

[Роман]

irishmann, ещё пробовал просто вернуть id через return result.id внутри handler'a (т.к. кнопки 2, и нужно id двух пользователей отправлять), тогда вообще ничего не происходит и не возвращается (

[Stalker_RED]

Роман Гонюков, а index.php возвращает эти данные? Рискну предположить, что он возвращает страницу. Именно ее вы и видите, почему-то называя при этом "хреньью".

[Роман]

В index.php есть такой код:

if(!empty($_GET['id'])):
    $id = htmlspecialchars($_GET['id']);
    $user = CRest::call('user.get', ['ID' => $id]);
    Debug($user['result']);
endif;

Только он почему-то ничего не выводит

[irishmann]

Роман Гонюков, Страница, отвечающая на ajax-запросы, ничего не должна выводить кроме ответа на запрос. У вас же обработчик ничего не выдает. И кроме него там есть свой вывод страницы.

[Роман]

Понял. Добавил файл ajax.php, в котором пока сделал только запись POST-массива в файл:

if(!empty($_POST)):
    file_put_contents('sjax_post.json', json_encode($_POST));
endif;

В JS прописал следующее:

var hand = function(result) {
    return result.id;
}

var dismissUser = hand;
var subUser = hand;

$.ajax({
    url: 'ajax.php',
    method: 'POST',
    async: true,
    dataType: 'json',
    data: {dismissID: dismissUser, subID: subUser}
}).success(function(data){
    console.log(data);
});

Теперь в консоли появляется ошибка

script.js:16 Uncaught TypeError: Cannot read property 'id' of undefined
    at hand (script.js:16)

А ajax-запрос не отрабатывается вообще. Хотя перед этим console.log нормально result.id выводил.
Т.е. когда я аякс пишу внутри самого обработчика, то данные передаются, но когда я пытаюсь сделать, чтобы обработчик возвращал только id, он вообще ничего не возвращает

[irishmann]

Роман Гонюков,
Вот возьми в качестве примера,

HTML страница для создания запроса, index.php

<!DOCTYPE html>
<html>
    <head>
        <title>TEST</title>
    </head>
    <body>
        <button id="send_ajax">Отправить ajax-запрос</button>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">
        
            $("#send_ajax").click(function(){
                $.ajax({
                        type:'POST', //Отправляем запрос методом POST
                        url: 'ajax.php', // Обработчик
                        dataType: 'JSON', // В каком формате ожидаем ответ, в в данном случае JSON
                        data: {  //какие данные отправляем 
                            param_1: 'Параметр 1',
                            param_2: 'Параметр 2'
                        },
                        success: function(data){ //выполнится если запрос прошел успешно
                            console.log(data);
                            console.log('Первый параметр - '+data['param_1']);
                            console.log('Второй параметр - '+data['param_2']);
                        }
                });
            });
        </script>
    </body>
</html>

Обработчик ajax, ajax.php

<?php
    if($_POST){
        echo json_encode($_POST);
    }

P.S.: Документация по .ajax()

[Роман]

irishmann, Спасибо, буду разбираться

[Роман]

irishmann, ваш пример работает на ура, пока не пытаюсь вернуть результат JS-метода BX24.selectUser():

<p><button class="btn btn-md btn-danger" onclick="BX24.selectUser(dismissUser);"><i class="fas fa-user-times icon"></i> Увольняющийся сотрудник</button></p>
    <p><button class="btn btn-md btn-warning" onclick="BX24.selectUser(subUser)"><i class="fas fa-user-check icon"></i> Замещающий сотрудник</button></p>
    <p><button id="sendData" class="btn btn-md btn-success">Отправить</button></p>
    <script>
var dismissUser = function(result) {
    return result.id;
}
var subUser = function(result) {
    return result.id;
}
        $('#sendData').click(function(){
            $.ajax({
                url: 'configs/ajax.php',
                type: 'POST',
                dataType: 'JSON',
                data: {
                    dismiss: dismissUser,
                    sub: subUser
                },
                success: function(data) {
                    console.log(data);
                    console.log(data['dismiss']);
                    console.log(data['sub']);
                }
            });
        });
    </script>

Однако когда нажимаю кнопку отправить, запроса не происходит, а консоль выдаёт следующую ошибку:

script.js:2 Uncaught TypeError: Cannot read property 'id' of undefined
    at dismissUser (script.js:2)
    at o (jquery-1.10.0.min.js:6)
    at gn (jquery-1.10.0.min.js:6)
    at Function.x.param (jquery-1.10.0.min.js:6)
    at Function.ajax (jquery-1.10.0.min.js:6)
    at HTMLButtonElement.<anonymous> (index.php?DOMAIN=bitrix24.src&PROTOCOL=0&LANG=ru&APP_SID=28e72300a6508829f611d7a79e9cea9e:19)
    at HTMLButtonElement.dispatch (jquery-1.10.0.min.js:5)
    at HTMLButtonElement.v.handle (jquery-1.10.0.min.js:5)

И это при том, что если задать console.log(result.id), то возвращается id выбранного сотрудника

Если же прописываю return result, то вместо массива с данными выбранного пользователя возвращается undefined.

Не могу понять, в чём дело

PS: такой ответ возвращается, если вывести в консоль JSON.stringify(result):

{"id":"6","name":"Рюрик Давыдов","sub":true,"sup":false,"position":"","photo":"/upload/resize_cache/main/215/100_100_2/myAvatar2.png"}

[Kristina8787]

Роман, вы нашли решение? на php все норм получаю, на js перешла и вот такая же история получилась