Как передать переменную на стороне сервера в файл stati c JS на стороне клиента - PullRequest
Новая
       34

Как передать переменную на стороне сервера в файл stati c JS на стороне клиента

0 голосов
/ 29 апреля 2020

Хорошо, я переписываю этот вопрос в надежде сделать его более понятным и получить ответ, который я могу понять.

У меня есть три файла - первый - php / html, стоящий вперед, второй это файл js, который включен в заголовок файла html, а третий - это файл php на стороне сервера, который обрабатывает на стороне сервера данные API извлечения на основе ajax.

В переднем файле есть кнопка, предназначенная для того, чтобы при щелчке она запускала функцию проверки на заднем конце, чтобы проверить, содержат ли обязательные поля формы значение или они пусты. Кнопка выглядит следующим образом: 

<button class="dark" type="button" id="checkApp" name="checkApp" value="checkApp" onclick="checkHandler(this)">CHECK APPLICATION</button>

Внутри файла js у меня есть это: 

// Function to perform the form check
function checkHandler(input) {
    const id = input.id;
    const formData = new FormData();
    formData.append(input.name, input.value);

    fetch(`./collect/post.2.php?data=${secData}`, {
        method: 'POST',
        body: formData,
    })
    .then((response) => response.json())
    .then((data) => {
        document.getElementById(`firstItem`).className = data[`firstItem`];
        document.getElementById(`marker_firstItem`).className = data[`marker_firstItem`];
        document.getElementById(`reply_firstItem`).className = data[`repcl_firstItem`];
        document.getElementById(`reply_firstItem`).innerHTML = data[`reply_firstItem`];

        document.getElementById(`secondItem`).className = data[`secondItem`];
        document.getElementById(`marker_secondItem`).className = data[`marker_secondItem`];
        document.getElementById(`reply_secondItem`).className = data[`repcl_secondItem`];
        document.getElementById(`reply_secondItem`).innerHTML = data[`reply_secondItem`];

....

    document.getElementById(`checker1`).className = data[`chkcl_1`];
    document.getElementById(`checker1`).innerHTML = data[`check_1`];

    });
}

и так далее - в реальном списке есть несколько элементов.

php выглядит следующим образом: 

// Set an array of items that require values
$part_1 = array('firstItem', 'secondItem', 'thirdItem', 'apple', 'orange', 'cheese', 'carrot' .... );

// $cRes holds the result of the entire values pulled from the database for comparison

$err1 = 0;
$err1Name = array();
foreach($part_1 as $name) {
    if($cRes[0][$name] == null) {
        $err1++;
        $err1Name[] = $name;
    } else {}
}

if($err1 != 0) {
    foreach($err1Name as $name) {
        $response[$name] = "block";
        $response['marker_'.$name] = "cr";
        $response['repcl_'.$name] = "notice alert";
        $response['reply_'.$name] = "This field cannot be left blank";
    }
    $response['chkcl_1'] = "notice center alert";
    if($err1 > 1) { $response['check_1'] = "There are ".$err1." problems on this page<br><br>"; }
    else if($err1 == 1) { $response['check_1'] = "There is a problem on this page<br><br>"; }
} else if($err1 == 0) {
    $response['chkcl_1'] = "notice center";
    $response['check_1'] = "Part 1 appears ok<br><br>";
}

Похоже, этот метод правильно отправляет правильные значения $ response в файл JS на лицевой стороне html, как показано на сетевой консоли. , Однако для того, чтобы это работало правильно, мне нужно было бы добавить действительный ответ для записей, которые не были нулевыми, чтобы избежать ошибки undefined, и хотя это функционально, это также чрезвычайно громоздко.

Что бы я хотел как сделать, это заменить части файла JS, как эти: 

        document.getElementById(`firstItem`).className = data[`firstItem`];
        document.getElementById(`marker_firstItem`).className = data[`marker_firstItem`];
        document.getElementById(`reply_firstItem`).className = data[`repcl_firstItem`];
        document.getElementById(`reply_firstItem`).innerHTML = data[`reply_firstItem`];

на что-то вроде этого: 

    document.getElementById(`${id}`).className = data[`${id}`];
    document.getElementById(`marker_${id}`).className = data[`marker_${id}`];
    document.getElementById(`reply_${id}`).className = data[`repcl_${id}`];
    document.getElementById(`reply_${id}`).innerHTML = data[`reply_${id}`];

, чтобы я мог просто отправить соответствующие $response к полям, которые являются нулевыми, на лету без необходимости обращаться к каждому полю по одному. Я могу установить соответствующее значение $id (которое в каждом php l oop равно $name) в php и отправить его в файл JS, но я не знаю, как его получить в файл JS и затем использовать его как значение ${id}. Как я могу этого добиться?

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

.
...