通过 ajax 发送复选框值以进行 php/mysql 查询

Question

我正在创建一个 html 表单并使用它的值来动态过滤来自 mysql 数据库的搜索结果。我有多个下拉列表和一个复选框字段用于多个值，我无法将选中的值通过 ajax 发送到我的 php 页面。有没有办法像其他选择字段一样根据此复选框字段更新我的查询结果？

HTML 代码：

<form name="searchForm">
    <input type="checkbox" name="services" value="twic" onclick="get_check_value()">TWIC</input><br/></li>
    <input type="checkbox" name="services" value="enclosedTrucking" onclick="get_check_value()">Enclosed Trucking</input><br/>
    <input type="checkbox" name="services" value="flatBedTrucking" onclick="get_check_value()">Flat Bed Trucking</input><br/>
</form>

Java 脚本：

<script type="text/javascript">
    function get_check_value()
    {
        var c_value = "";
        for (var i=0; i < document.searchForm.services.length; i++) {
            if (document.searchForm.services[i].checked) 
            {
                c_value = c_value + document.searchForm.services[i].value + "\n";
            }
        }
        return = c_value;
        //alert(c_value);
    }
</script>
<script language="javascript" type="text/javascript">
    //Browser Support Code
    function ajaxFunction(){
        var ajaxRequest;  // The variable that makes Ajax possible!
        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        }catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        // Create a function that will receive data 
        // sent from the server and will update
        // div section in the same page.
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                var ajaxDisplay = document.getElementById('results');
                ajaxDisplay.innerHTML = ajaxRequest.responseText;
            }
        }
        // Now get the value from user and pass it to
        // server script.
        var os = document.getElementById('originState').value;
        var c = document.getElementById('commodity').value;
        var ds = document.getElementById('destState').value;
        var ser = c_value;
        var queryString = "?os=" + os ;
        queryString +=  "&c=" + c + "&ds=" + ds + "&ser=" + ser;
        //ajaxRequest.open("GET", "php/search2.php" + 
        //                           queryString, true);
        ajaxRequest.open("GET", "php/testqueries.php" + queryString, true);
        ajaxRequest.send(null); 
    }
</script>

PHP 接收变量：

$ser = $_GET['ser'];

Answer 1

用jquery试试这个，

<script type="text/javascript">
    function get_check_value() {
        var c_value = [];
        $('input[name="services"]:checked').each(function () {
            c_value.push(this.value);
        });
        return c_value.join(',');
    }
    $('#btnSubmit').on('click', function () {
        var os = $('#originState').val();
        var c = $('#commodity').val();
        var ds = $('#destState').val();
        var ser = get_check_value();
        var queryString = "os=" + os;
        queryString += "&c=" + c + "&ds=" + ds + "&ser=" + ser;
        $.ajax({
           url:'php/testqueries.php',
           data:queryString,
           success:function(data){
              $('#results').html(data);
           }
        });
        return false; // to prevent from page reload
    });
</script>

改变你的`html样，

<form name="searchForm">
    <input type="checkbox" name="services" value="twic" />TWIC
    <br/>
    <input type="checkbox" name="services" value="enclosedTrucking" />Enclosed Trucking
    <br/>
    <input type="checkbox" name="services" value="flatBedTrucking" />Flat Bed Trucking
    <br/>
    <input type="submit" id="btnSubmit" value="Submit" />
</form>