如何通过PHP MVC使用Ajax jQuery Post发送复选框数组和其他一些值

Question

我正在尝试使用AJAX / JQUERY / PHP（MVC）将数据发送到数据库中；

我的桌子上有很多数据。 该表包含用于检查可发送到数据库的行的复选框。

对于查看文件； 我试图发送这样的数据：

编辑

<form action="<?php echo URL ?>etudiants/affectation" method="POST" id="affectStudents"  class='form-vertical'>
    <div class="span3">
        <div class="control-group">
            <div class="input-append">
                <select name="id_salle" id="id_salle" class='input-medium'>
                    <option value="0">«Choisir Salle»</option>
                    <?php foreach($this->fetchSalle AS $key => $value): ?>
                    <option value="<?php echo $value['id_salle'] ?>">
                    <?php echo $value['intitule_salle']; ?>
                    => C: <?php echo $value['capacite']; ?>
                    => M: <?php echo $value['marge']; ?>
                    </option>
                <?php endforeach; ?>
                </select>
                <button class="btn" type="submit"> Affecter</button>
            </div>
        </div>
    </div>
    <div class="box-content nopadding">
        <table class="table table-hover table-nomargin table-bordered dataTable dataTable-nosort" data-nosort="0">
            <thead>
                <tr class='thefilter'>
                    <th class='with-checkbox'>
                    <input type="checkbox" name="check_all" id="check_all"></th>
                    <th>Code Etud.</th>
                    <th>Filière</th>
                    <th>Nom et Prénom</th>
                    <th>CIN</th>
                    <th>Tel</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
            <?php foreach($this->fetchEtudiants AS $value): ?>
                <tr>
                    <td class="with-checkbox">
                    <input type="checkbox" name="id_etudiants[]" value="<?php echo $value['id_etudiant']; ?>" class="check_id" id="check_id">
                    </td>
                    <td><?php echo $value['code_etudiant']; ?></td>
                    <td><?php echo $value['intitule_filiere']; ?></td>
                    <td><?php echo $value['nom']; ?> 
                         <?php echo $value['prenom']; ?>
                    </td>
                    <td><?php echo $value['cin']; ?></td>
                    <td><?php echo $value['tel']; ?></td>
                    <td><?php echo $value['email']; ?></td>
                </tr>
            <?php endforeach; ?>    
        </tbody>
    </table>
    <input type="hidden" name="csem" value="<?php echo @$_GET['csem'] ?>">
    <input type="hidden" name="cses" value="<?php echo @$_GET['cses'] ?>">
    <input type="hidden" name="cfil" value="<?php echo @$_GET['cfil'] ?>">
    <input type="hidden" name="cmod" value="<?php echo @$_GET['cmod'] ?>">
</form>

控制器文件

etudiants.php

class Etudiants extends Controller {

    function __construct(){
        parent::__construct();          
    }
    public function index(){        
        $this->view->render('etudiants/index');
    }

    function affectation(){
        $this->model->affectation();
    }   
}

etudiants_model.php

class Etudiants_Model extends Model
    {
    public function __construct(){
        parent::__construct();
    }
    public function affectation(){
        $students[] = $_POST['id_etudiants'];
        $id_salle   = $_POST['id_salle'];

        for ($i=1; $i <= strlen($students) ; $i++) {
            $stmt = $this->db->prepare("INSERT INTO exam_salles (id_student, id_salle) VALUES(?,?)");
            $stmt->execute(array($students[$i], $id_salle));
        }

        if($stmt == TRUE){
            echo "good";
        }else{
            echo "wrong";
        }
    }
}

对于JS文件，我使用了此代码。

$(document).ready(function(){
$("#affectStudents").on('submit', function(e){
    e.preventDefault();
    var url     = $(this).attr('action');
    var data    = $(this).serialize();

    $.post(url, data, function(response) {
        if(response == 'good'){
            $("#affectedSuccessfully").show();
        }else{
            $("#affectedError").show();
        }           
    });                
});
});

当我单击SEND按钮时，即使我使用preventDefault（），它也将我重定向到/ etudiants / affectation 。 并且不向数据库发送任何数据。

Answer 1

JS文件加载好了吗？ 还有jQuery库吗？ 您的JS函数似乎还没有完成。 如果有一些错误，还检查调试栏中的错误。

编辑（讨论后） ：

http://jsfiddle.net/wvwm5Luz/2/您的jQuery序列化方法将每个复选框作为一个变量。 我认为您可以这样做：

使用不带名称的复选框。 获取选中的复选框（在dataTable插件中很容易， http： //datatables.net/forums/discussion/2511/get-all-checked-checkboxes-in-the-datatable应该有帮助）并将其添加到post var data中。 值的格式可能类似于“ 1、3、8”等，而在etudiants_model.php写类似：

$students = explode(',', $_POST['id_etudiants'];

在那之后，我想它会起作用。

Answer 2

我相信您是在创建表单之前加载javascript，因此事件处理程序会在创建受影响的元素之前运行，因此它不会影响目标元素。 您需要在页面加载后注册处理程序

$(function() {
    $("#affectStudents").on('submit', function(e){
        e.preventDefault();
        var url     = $(this).attr('action');
        var data    = $(this).serialize();

        $.post(url, data, function(response) {
            if(response == 'good'){
                $("#affectedSuccessfully").show();
            }else{
                $("#affectedError").show();
            }           
        }                 
    });
});

或者，您可以编写代码来期望目标将来存在

$("body").on('submit', "#affectStudents", function(e){
    e.preventDefault();
    var url     = $(this).attr('action');
    var data    = $(this).serialize();

    $.post(url, data, function(response) {
        if(response == 'good'){
            $("#affectedSuccessfully").show();
        }else{
            $("#affectedError").show();
        }           
    }                 
});