时间戳

首页 > 解决方案 > 通过ajax传递给PHP时如何为每个数组元素添加单引号？

javascript - 通过ajax传递给PHP时如何为每个数组元素添加单引号？

问题描述

我创建了一个带有复选框选项的下拉菜单。这个想法是当用户选择一个或多个复选框时，选中的值应该通过 AJAX传递给php页面中的 SQL 语句。但是，我的 sql 似乎没有生成应有的结果。我的 SQL 语句使用 IN 运算符，其中检查的值应位于 WHERE 子句内。例如，如果我从下拉菜单复选框中选择 CONSTRUCTION、HCL 和 RSS，则php页面中的 SQL 语句应该是SELECT * FROM STAFF WHERE SERVICE IN ('CONSTRUCTION', 'HCL', 'RSS'). 但是，当我回显我的 SQL 语句时，它显示的检查值没有单引号 -SELECT * FROM STAFF WHERE SERVICE IN (CONSTRUCTION, HCL, RS)这是不正确的。如何从 IN 运算符的下拉列表中为每个检查值包含单引号？任何人都可以帮忙吗？

下面是我的 PHP 和下拉菜单

sql.php

<?php

if($_POST['dataarray'] != ""){

$sql = "SELECT * FROM STAFF WHERE SERVICE IN (".$_POST['dataarray'].")";
.....
...
/*************SQL output*********************/
}

?>

带有复选框的下拉菜单 

$(document).ready(function(){

/*********************convert select into multiselect************************/
$("#service").CreateMultiCheckBox({ width: '300px', defaultText : 'Select Below', height:'auto' }); 

    $("#service").on('change', function (){
                    var dataarray = [];
                
                    $("#service option").each(function(){
                        if($(this).is(":checked"))
                        {dataarray.push($(this).val());}    
                    }); 
                    
                    dataarray = dataarray.toString(); 
                 $.ajax({
                          url: "sql.php",
                          method:"POST",
                          data: {dataarray:dataarrayy},
                          success: function(data){                          
                          }             
                        });                 

                });
            
/**********************creating of checkboxes for each select option************************/
 $(document).on("click", ".MultiCheckBox", function () {
                var detail = $(this).next();
                detail.show();
            });

            $(document).on("click", ".MultiCheckBoxDetailHeader input", function (e) {
                e.stopPropagation();
                var hc = $(this).prop("checked");
                $(this).closest(".MultiCheckBoxDetail").find(".MultiCheckBoxDetailBody input").prop("checked", hc);
                $(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();
            });

            $(document).on("click", ".MultiCheckBoxDetailHeader", function (e) {
                var inp = $(this).find("input");
                var chk = inp.prop("checked");
                inp.prop("checked", !chk);
                $(this).closest(".MultiCheckBoxDetail").find(".MultiCheckBoxDetailBody input").prop("checked", !chk);
                $(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();
            });

            $(document).on("click", ".MultiCheckBoxDetail .cont input", function (e) {
                e.stopPropagation();
                $(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();

                var val = ($(".MultiCheckBoxDetailBody input:checked").length == $(".MultiCheckBoxDetailBody input").length)
                $(".MultiCheckBoxDetailHeader input").prop("checked", val);
            });

            $(document).on("click", ".MultiCheckBoxDetail .cont", function (e) {
                var inp = $(this).find("input");
                var chk = inp.prop("checked");
                inp.prop("checked", !chk);

                var multiCheckBoxDetail = $(this).closest(".MultiCheckBoxDetail");
                var multiCheckBoxDetailBody = $(this).closest(".MultiCheckBoxDetailBody");
                multiCheckBoxDetail.next().UpdateSelect();

                var val = ($(".MultiCheckBoxDetailBody input:checked").length == $(".MultiCheckBoxDetailBody input").length)
                $(".MultiCheckBoxDetailHeader input").prop("checked", val);
            });

            $(document).mouseup(function (e) {
                var container = $(".MultiCheckBoxDetail");
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    container.hide();
                }
            });
        });

        var defaultMultiCheckBoxOption = { width: '220px', defaultText: 'Select Below', height: '200px' };

        jQuery.fn.extend({
            CreateMultiCheckBox: function (options) {

                var localOption = {};
                localOption.width = (options != null && options.width != null && options.width != undefined) ? options.width : defaultMultiCheckBoxOption.width;
                localOption.defaultText = (options != null && options.defaultText != null && options.defaultText != undefined) ? options.defaultText : defaultMultiCheckBoxOption.defaultText;
                localOption.height = (options != null && options.height != null && options.height != undefined) ? options.height : defaultMultiCheckBoxOption.height;

                this.hide();
                this.attr("multiple", "multiple");
                var divSel = $("<div class='MultiCheckBox'>" + localOption.defaultText + "<span class='k-icon k-i-arrow-60-down'><svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='sort-down' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-2x'><path fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z' class=''></path></svg></span></div>").insertBefore(this);
                divSel.css({ "width": localOption.width });

                var detail = $("<div class='MultiCheckBoxDetail'><div class='MultiCheckBoxDetailHeader'><input type='checkbox' class='mulinput' value='-1982' /><div>Select All</div></div><div class='MultiCheckBoxDetailBody'></div></div>").insertAfter(divSel);
                detail.css({ "width": parseInt(options.width) + 10, "max-height": localOption.height });
                var multiCheckBoxDetailBody = detail.find(".MultiCheckBoxDetailBody");

                this.find("option").each(function () {
                    var val = $(this).attr("value");

                    if (val == undefined)
                        val = '';

                    multiCheckBoxDetailBody.append("<div class='cont'><div><input type='checkbox' class='mulinput' value='" + val + "' /></div><div>" + $(this).text() + "</div></div>");
                });

                multiCheckBoxDetailBody.css("max-height", (parseInt($(".MultiCheckBoxDetail").css("max-height")) - 28) + "px");
            },
            UpdateSelect: function () {
                var arr = [];

                this.prev().find(".mulinput:checked").each(function () {
                    arr.push($(this).val());
                });

                this.val(arr).change();
            },

});
.MultiCheckBox {
            border:1px solid #e2e2e2;
            padding: 5px;
            border-radius:4px;
            cursor:pointer;
            background:#ffffff;
        }

        .MultiCheckBox .k-icon{ 
            font-size: 15px;
            float: right;
            font-weight: bolder;
            margin-top: -7px;
            height: 10px;
            width: 14px;
            color:#787878;
        } 

        .MultiCheckBoxDetail {
            display:none;
            position:absolute;
            border:1px solid #e2e2e2;
            overflow-y:hidden;
            background:#ffffff;
        }

        .MultiCheckBoxDetailBody {
            overflow-y:scroll;
        }

            .MultiCheckBoxDetail .cont  {
                clear:both;
                overflow: hidden;
                padding: 2px;
            }

            .MultiCheckBoxDetail .cont:hover  {
                background-color:#cfcfcf;
            }

            .MultiCheckBoxDetailBody > div > div {
                float:left;
            }

        .MultiCheckBoxDetail>div>div:nth-child(1) {
        
        }

        .MultiCheckBoxDetailHeader {
            overflow:hidden;
            position:relative;
            height: 28px;
            background-color:#3d3d3d;
        }

            .MultiCheckBoxDetailHeader>input {
                position: absolute;
                top: 4px;
                left: 3px;
            }

            .MultiCheckBoxDetailHeader>div {
                position: absolute;
                top: 5px;
                left: 24px;
                color:#fff;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name="service" class="service" id="service">
  <option value="CONSTRUCTION">Construction</option>
  <option value="HCL">HCL</option>
  <option value="MANUFACTURING">Manufacturing</option>
  <option value="MYE">MYE</option>
  <option value="RSS">RSS</option>
  <option value="SERVICE">SERVICE</option>
  <option value="NA">NA</option>
</select>

标签： javascriptphparraysajax

解决方案

你在那里做的事情是非常危险的。您将$_POST输入直接放入您的 sql-Query 中。这可能会导致严重的 mysql 注入问题。

您应该$_POST首先清理您的数据。例如，使用诸如 stripslashes删除可能导致 sql 注入的不需要的字符之类的方法。

或者使用使用准备好的语句（如Pdo）的数据库包装器

要回答您的字符串相关问题：

您可以遍历您的数据数组并用引号包裹字符串：例如

$dataArray = [];
foreach ($_POST['dataarray'] as $item) {
    $dataArray[] = "'" . $item . "'";
}

$sql = "SELECT * FROM STAFF WHERE SERVICE IN (". implode(', ', $dataArray) .")";

推荐阅读