使用带有 jQ​​uery 的 POST 请求将数据发送到服务器

时间:2021-07-06 13:13:16

标签: javascript php jquery post

我想做什么:

  • 我正在尝试使用 $.post jQuery 快捷方式将数据发送到我的服务器。

有什么问题:

  • 我的程序没有进入我的 switch case,可能是因为我的 action 没有正确发送。

我想做什么:

  • 我创建了一个表格,其中一个元素是一个带有 onclick JavaScript 函数的按钮:<button onclick='Delete()'></button>

  • 我的 JavaScript 函数:

function Delete(){
    $.post("<?=SITE_URL_ADMIN?>/alexcrudgenerator/res/?action=deleteRegistro", function(data){
        if(data){
            console.log("Deleteeeed");  
        }
        else {
            console.log("Not deleted :(");
       }
    });
}
  • 我的switch case声明:
switch($_POST['action']){
    case 'deleteRegistro': // NOT OK
        ?>
            <script>
                alert("I'm in deleteRegistro");
            </script>
        <?php 
        
        break;
}
  • 当我点击按钮时会发生什么:

enter image description here

这应该可以工作,因为我将发布请求中的操作 deleteRegistro 传递到我的服务器 (php)。

我需要帮助,我做错了什么?

如果你想查看,这是我的完整代码:


<?php

include_once(DIR_PLUGINS.'/alexcrudgenerator/main.php');

    $test = new GenerateCrud($_POST['tableName'], $_POST['id'], $_POST['tableFields']);

    switch($_POST['action']){
        
        case 'datosTabla': // OK.
            $res = json_decode($_POST['datos']);
            echo json_encode($res, JSON_UNESCAPED_UNICODE);
            
            break;
        
        case 'deleteRegistro': // NOT OK
            ?>
            <script>
                alert("I'm in deleteRegistro");
            </script>
            <?php 
            break;
            
        case 'showtable': // OK.
            
            $res = getEntireTable($_POST['tableName'], $_POST['id'], $_POST['tableFields']);
            $tableName = $_POST['tableName'];
            foreach ($res as $data){                
                $data->acción = "<div class='text-center'><div class='btn-group'><button id='modificar_$data->id' class='btn btn-primary btn-sm btnEditar' value='edit'><i class='material-icons'>edit</i></button><button onclick='Delete()' class='btn btn-danger btn-sm btnBorrar'><i class='material-icons' value='delete'>delete</i></button></div></div>"; 
                $resultados['data'][] = $data;
            }           
            
            $resultados = json_encode($resultados);
            
            foreach(json_decode($_POST['tableFields']) as $columnsDB){
                $fields[] = array('data'=>$columnsDB);
            }

            $fields[]['data'] = 'acción';
            $fields = json_encode($fields);
            
?>
            <head>
                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
            </head>
            
            <div class="container caja">
                <div class="row">
                    <div class="col-lg-12 col-sm-12">
                        <div>
                            <table id="tablaUsuarios" class="table table-striped table-bordered table-condensed hover" style="width:100%" >
                                <thead class="text-center">
                                    <tr>
                                        <?php
                                            foreach (json_decode($_POST['tableFields']) as $columnsTH){
                                                 echo '<th>' . strtoupper($columnsTH) . '</th>';
                                            }
                                            echo '<th>ACCIÓN</th>';
                                        ?>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <script>

                function Delete(){
                    $.post("<?=SITE_URL_ADMIN?>/alexcrudgenerator/res/?action=deleteRegistro", function(data){
                        if(data){
                            console.log("Deleteeeed");  
                        }
                        else {
                            console.log("Not deleted :(");
                        }
                    });
                }
                
                $(document).ready(function() {
                    var datos= <?=$resultados?>;
                    var dynamicColumns = <?=$fields?>;
                    datos = JSON.stringify(datos);
                    
                    $('#tablaUsuarios').DataTable({
                        "language": {"url": "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"},
                        "paging": true,
                        "lengthChange": true,
                        "searching": true,
                        "info": true,
                        "autoWidth": true,
                        "scrollX": true,

                        "ajax":{
                            "url": '<?=SITE_URL_ADMIN?>/alexcrudgenerator/crud/res/',
                            "method": 'POST',
                            "data":{action: "datosTabla", datos: datos}
                        },

                        "columns": dynamicColumns
                    });
                })
            </script>
<?php
        break;      
}
?>

3 个答案:

答案 0 :(得分:2)

您在查询字符串中传递操作,而不是请求正文,因此它将在 $_GET 而不是 $_POST 中可用。

PHP 超全局变量 $_GET$_POST 不(直接)引用请求类型。它们指的是 HTML 表单将根据 method 属性放置来自输入的数据的位置。

任何类型的 HTTP 请求都可以在 URL 中包含查询字符串,这将被放入 $_GET 超全局变量中。

并非所有 HTTP 请求都可以有请求正文,但很多(包括 POST 和 PUT)可以。如果 $_POST 以 PHP 理解的格式进行编码并且 Content-Type 是正确的,PHP 将使用请求正文中的数据填充 //FONTS $heading-font: 'Roboto', sans-serif; $main-font: 'Open Sans', sans-serif; //COLORS $btn-blue: #35A7FF; * { padding: 0; margin: 0; } #header__chat { position: absolute; top: 30%; left: 40%; transform: translate(-50%, -50%); width: 50vw; max-width: 1000px; display: flex; padding: 20px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius: 50px; animation: 5s; } #header__btn { position: absolute; top: 30%; left: 72%; transform: translate(-50%, -50%); width: 6vw; display: flex; padding: 30px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius: 50px; background-color: $btn-blue; color: white; align-items: center; h2{ font-size: 2vw; padding: 10px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); text-transform: uppercase; } } h1 { font-size: 5vw; font-family: $heading-font; } h2 { font-size: 2vw; font-family: $heading-font; } .typing { width: 12ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; } @keyframes typing { from { width: 0 } } @keyframes blink { 50% { border-color: transparent } }。 (PHP 也可能会检查请求类型,并且只对 POST 请求执行此操作,这不是我调查过的)。

答案 1 :(得分:1)

您以错误的方式发布到文件中,据我所知,这可能是问题所在。

$.post("URL", {
            action: "deleteRegistro"
        }, function (data, status) {
        //  alert (data + '\n' + "status" + status);
            if (status === 'error') {
                console.log("Not deleted"); // For debugging purpose
            } else if (status === 'success') {
              console.log("Deleted successfully");
            }
        });

用正确的 URl 代替“URL” 无需更改 switch case 中的任何内容。

但即使在此之后您可能看不到表中的数据被删除,您需要刷新页面。

由于您在单页中拥有所有这些功能,我建议您使用隐藏表单来发布数据。

答案 2 :(得分:0)

也许这段 php 代码在 js 中不起作用。您可以在这样的隐藏输入中获取它;

<input id="takeUrl" type="hidden" value="<?=SITE_URL_ADMIN?>">
let url = $('#takeUrl').val();