O meu primeiro programa em JavaScript no Laravel

[Frank K Hosaka]

O JavaScript é o único programa que eu conheço que é capaz de atualizar a página onde ele está, através do comando location.reload( ), e isso eu consegui no código PHP.

O Laravel é outra história, qualquer solicitação que você faz precisa usar a ferramenta @csrf. Mas o @csrf só é usado com o marcador <form>, e não queria sair da página porque isso ia ser um grande desastre. Copiei o código JavaScript do PHP no Laravel, e obtive o erro 419, esse é o famoso erro da ausência do csrf. O Copilot pediu para criar um comando <meta> que gera o crsf e também pedir para o JavaScript encaminhar o crsf adiante. E deu certo. Eu não sou bom com o JavaScript, mas quando consigo fazer o JavaScript trabalhar para mim, eu fico feliz da vida:

 

arquivo resources > views > nfCFOPview.blade.php
<meta name="csrf-token" content="{{ csrf_token() }}">
@include('menuView')
<script>
    btMenu.innerHTML='NF Fornecedor CFOP';document.title="NF Fornecedor CFOP"

    function getCsrfToken() { 
        return document.querySelector('meta[name="csrf-token"]').getAttribute('content'); 
    }

    function atualizar(cfop, codprod) {
        var xmlhttp = new XMLHttpRequest();
        var url = "nfCFOPatualizar";
        var formData = new FormData();
        formData.append('cfop', cfop);
        formData.append('codprod', codprod);
        formData.append('_token',getCsrfToken())

        xmlhttp.open("POST", url, true);
        
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                console.log("Estado da requisição: " + xmlhttp.readyState);
                if (xmlhttp.status == 200) {
                    location.reload();
                } else {
                    alert("Erro na requisição: " + xmlhttp.status);
                }
            }
        }; 
        xmlhttp.send(formData);
    }
</script>
<div class="flex">
    <div class="w-[50px] text-right">Cforn</div>
    <div class="w-[50px] text-right">Cod</div>
    <div class="w-[378px] ml-2">Produto</div>
    <div class="w-[50px] text-right">CFOP</div>
    <div class="w-[100px] text-right">NCM</div>
</div>
<?php foreach($previa as $p): ?>
    <div class="flex odd:bg-gray-200">
        <div class="w-[50px] text-right"><?=$p->codforn?></div>
        <div class="w-[50px] text-right"><?=$p->codprod?></div>
        <div class="w-[378px] ml-2 truncate"><?=$p->prod?></div>
        <div class="<?=$p->class?>" onclick="atualizar(<?=$p->cfop?>,<?=$p->codprod?>)">
            <?=$p->cfop?>
        </div>
        <div class="<?=$p->class2?>"><?=$p->ncm?></div>
    </div>
<?php endforeach; ?>

 

Editado Quinta às 20:10 por Frank K Hosaka