如何从 HTML 复选框构建 SQL 查询？答案

【问题标题】：How to build an SQL query from HTML checkboxes?如何从 HTML 复选框构建 SQL 查询？
【发布时间】：2016-02-08 23:06:41
【问题描述】：

我需要为 SQL 创建一个查询构建器，您可以在其中通过 HTML 复选框选择查询约束。每个复选框都有一个名称，用于列名称（例如 ActorName）和列值的值（例如 Tom Hanks）。

我在决定什么是最好的方法时遇到了麻烦。我尝试向 JavaScript 对象添加/删除，然后遍历每个键值对，即每个 ActorName、每个 DirectorName，并将它们附加到 SQL 中的WHERE 约束，但由于复选框名称不是唯一的，即有很多演员，流派等，这使事情变得复杂。现在，我正在使用这种方法：

https://jsfiddle.net/Lompm0ew/5/

选中复选框时，将复选框的名称和值添加到 JS 对象，其中 ActorName 作为对象键（因为这将始终是唯一的），复选框名称作为对象值。我觉得这是一种不好的做法，我确信有更好的方法来实现我的目标，但我没有想法。

谁能推荐一种从复选框构建查询的更好方法？

【问题讨论】：

对于基于服务器的数据库，您可以将选择传递回服务器并在那里构建（参数化）SQL，您不会在客户端中构建 SQL 字符串。
当然，我同意。但是将选择传回的最佳方法是什么？键值对象、数组、字符串？这里的最佳做法是什么？

标签： javascript sql checkbox

【解决方案1】：

您可以使用“序列化”来通过 Ajax 获取和发送数据

首先，在您的 HTML 代码中添加一个表单 balsise

例子：

<form>
    <div id="checkboxes">
        <label>
            <input type="checkbox" value="Tom Hanks" name="actorName[]">Tom Hanks</label>
        <label>
            <input type="checkbox" value="Tim Allen" name="actorName[]">Tim Allen</label>
        <label>
            <input type="checkbox" value="Don Rickles" name="actorName[]">Don Rickles</label>
        <label>
            <input type="checkbox" value="Jim Varney" name="actorName[]">Jim Varney</label>
        <label>
            <input type="checkbox" value="Wallace Shawn" name="actorName[]">Wallace Shawn</label>
        <label>
            <input type="checkbox" value="Fantasy" name="genreName[]">Fantasy</label>
        <label>
            <input type="checkbox" value="Comedy" name="genreName[]">Comedy</label>
        <label>
            <input type="checkbox" value="Children" name="genreName[]">Children</label>
        <label>
            <input type="checkbox" value="Animation" name="genreName[]">Animation</label>
        <label>
            <input type="checkbox" value="Adventure" name="genreName[]">Adventure</label>
        <label>
            <input type="checkbox" value="USA" name="countryName">USA</label>
    </div>
</form>

你的javascript：

jQuery(document).ready(function($){
    $(':checkbox').change(function() {
        sendData();
    });
})

function sendData () {
    var $form = $('form');
        $.ajax({
            url : 'ajax.php',
            data: $form.serialize(),
            async : false,
            success : function(response){
                console.log(response);
            }
        });
}

你的 ajax.php

<?php
var_dump($_REQUEST);

显示：

array(2) {
  ["actorName"]=>
  array(3) {
    [0]=>
    string(9) "Tim Allen"
    [1]=>
    string(10) "Jim Varney"
    [2]=>
    string(13) "Wallace Shawn"
  }
  ["genreName"]=>
  array(1) {
    [0]=>
    string(9) "Animation"
  }
}

每次单击复选框时，都会为 ajax.php 发送数据。所以，你可以做查询服务器端

编辑：对不起，我忘记了：您可以重命名复选框名称以发送数组

<label>
    <input type="checkbox" value="Tom Hanks" name="actorName[]">Tom Hanks</label>
<label>
    <input type="checkbox" value="Tim Allen" name="actorName[]">Tim Allen</label>
<label>

【讨论】：