javascript - 如何使用 jQuery $.post 将 ajax 返回的表单字段发送/发送到服务器

Question

大家好，我正在通过 ajax 基于一些下拉菜单显示表单。用户可以在一个下拉列表中选择类(class)，在另一个下拉列表中选择主题，从而返回该类(class)的学生列表。

其格式类似于允许用户输入学生已获得的科目分数的形式。这是用户选择其偏好后表单的外观:

我希望当单击保存按钮并且用户输入分数后，应将其发送到数据库。 我遇到了一些问题:

1. 当分数字段为空时(因为我添加了必填属性)，它不会验证该字段是否为空，而是向负责插入记录的文件发送请求。
2. 当请求到达负责插入记录的文件(create_score.php)时，就好像没有通过表单发送任何值。我知道这一点是因为我 var_dump($_POST) 并且它返回了这个 array(0) { }

这是我用来返回文件的脚本:

$(document).ready(function() {
$('#subject_id').on('change', function(){
    var subject_id = $('#subject_id').val();
    var class_id = $('#class_id').val();
    var term = $('#term').val();

    if (subject_id != '' || class_id != '') {
      $.ajax({
        url:"includes/ajax/read_student_score_form.php",
        method:"post",
        data:{"subject":subject_id, "class":class_id, "term":term},
        dataType:"text",
        success:function(data){
          $("#result").html(data);
        }
      });
    } else {
      $("#result").html('');

    }   
}); 

$('#class_id').on('change', function(){
    var subject_id = $('#subject_id').val();
    var class_id = $('#class_id').val();
    var term = $('#term').val();

    if (subject_id != '' || class_id != '') {
      $.ajax({
        url:"includes/ajax/read_student_score_form.php",
        method:"post",
        data:{"subject":subject_id, "class":class_id, "term":term},
        dataType:"text",
        success:function(data){
          $("#result").html(data);
        }
      });
    } else {
      $("#result").html('');
    }   
});

$('#term').on('change', function() {
  /* Act on the event */
    var subject_id = $('#subject_id').val();
    var class_id = $('#class_id').val();
    var term = $('#term').val();

    if (subject_id != '' || class_id != '') {
        $.ajax({
          url:"includes/ajax/read_student_score_form.php",
          method:"post",
          data:{"subject":subject_id, "class":class_id, "term":term},
          dataType:"text",
          success:function(data){
            $("#result").html(data);
          }
        });
    } else {
      $("#result").html('');
    }   
}); 

当单击提交时，我如何构建代码以将值发布到负责插入记录的文件(create_score.php)

$(document).on('click', '#savebtn', function(event) {
    event.preventDefault();

    // this is where I'm testing if the button is working
    alert("Button click");
    console.log("Button click for console");

    var form = $('#st_score_form');
    var formdata = form.serialize();

    $.post("includes/ajax/create_score.php", formdata)
    .done(function(data){
      $("#success").fadeIn('slow', function(){
        $("#success").html('<div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-check"></i>Alert! </b>'+data+'</div>');
      });    
    })
    .fail(function(data){
        $("#success").fadeIn('slow', function(){
             $("#success").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-warning"></i>Alert! </b>'+data+'</div>');
         });
    });

});
$('body').append('<button id="#savebtn"></button>');

这就是我返回表单的方式(read_student_score_form.php):

if (mysqli_num_rows($result) > 0) {
    # code...
    $output .= '<h4 align="center">Periodic Report</h4>';
    $output .= '<div class="table-responsive">

                    <table class="table table-bordered">
                        <tr>
                            <th scope="row" colspan="1">Subject</th>
                            <td colspan="5">'.$subject["subject_name"].'</td>

                            <th scope="row">Class</th>
                            <td>'.$class['class_name'].'</td>

                            <th scope="row">Period</th>
                            <td>'.$period.'</td>
                        </tr>';
        $output .= '</table>';
        $output .= '<table class="table table-bordered table-condensed table-responsive table-striped">
                        <thead>
                            <tr>
                                <th>Student</th>
                                <th>Score</th>
                                <th>Operations</th>
                            </tr>
                        </thead>';
            $output .= '<tbody>';
                while ($row = mysqli_fetch_array($result)) {
                    # code...
                    $output .= '<form action="#" method="post" id="st_score_form">';
                        // unseen fields values that will be send
                        $output .= '<tr style="display: none;">';
                            $output .= '<td><input type="text" name="student_id" value="'.$row['student_id'].'"></td>';
                            $output .= '<td><input type="text" name="subject_id" value="'.$subject_id.'"></td>';
                            $output .= '<td><input type="text" name="class_id" value="'.$class_id.'"></td>';
                            $output .= '<td><input type="text" name="term" value="'.$term.'"></td>';
                        $output .= '</tr>';
                        // -- end of unseen fields

                        $output .= '<tr>';
                            $output .= '<td>'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'</td>';
                            $output .= '<div class="form-group">';
                                $output .= '<td><input type="number" min="59" max="100"  name="score" class="form-control" required="required"></td>';
                                $output .= '<td><input type="submit" name="savebtn" id="savebtn" value="Save" class="btn btn-info form-control"></td>';
                            $output .= '</div>';

                        $output .= '</tr>';
                    $output .= '</form>';
                }
            $output .= '</tbody>';
        $output .= '</table>';
    $output .= '</div>';            
    echo $output;
} else {
    echo "Data not found";
}

负责插入记录的文件内容(create_score.php)

if (isset($_POST)){
    // just testing to see values posted
    echo var_dump($_POST);
}

我愿意接受有关如何完成这项工作的反馈和建议。谢谢!!!

更新这就是我现在显示表单的方式

$output .= '<form action="#" method="post" id="st_score_form">';
                    while ($row = mysqli_fetch_array($result)) {
                        # code...
                            // unseen fields values that will be send
                            $output .= '<tr style="display: none;">';
                                $output .= '<td><input type="text" id="student_id" name="student_id" value="'.$row['student_id'].'"></td>';
                                $output .= '<td><input type="text" name="subject_id" value="'.$subject_id.'"></td>';
                                $output .= '<td><input type="text" name="class_id" value="'.$class_id.'"></td>';
                                $output .= '<td><input type="text" name="term" value="'.$term.'"></td>';
                            $output .= '</tr>';
                            // -- end of unseen fields

                            $output .= '<tr>';
                                $output .= '<td>'.$row["first_name"]." ".substr($row["middle_name"], 0, 1).". ".$row["surname"].'</td>';
                                $output .= '<div class="form-group">';
                                    $output .= '<td><input type="number" min="59" max="100"  name="score" class="form-control" required="required"></td>';
                                    $output .= '<td><input type="submit" name="savebtn" id="savebtn" value="Save" class="btn btn-info form-control"></td>';
                                $output .= '</div>';

                            $output .= '</tr>';
                    }
                $output .= '</form>';

Answer 1

具体而言，您有多个具有相同 ID 的元素

id="savebtn"

第一个附加了 jQuery，第二个通过网络传输，你也尝试添加那个..这可能会很困惑，尝试隔离或更改按钮引用或类，尝试切换到类(class)和抛弃 ID 一劳永逸，我很久以前就这样做了，我的生活变得更好了:)

另外，对于您的问题编号1)尝试以与其他事件相同的方式添加检查

$(document).on('click', '#savebtn', function(event) {
    event.preventDefault();
    var form = $('#st_score_form');
    var formdata = form.serialize();
    // check for value if not empty
    var subject_id = $('#subject_id').val();
    var class_id = $('#class_id').val();
    var term = $('#term').val();

    if (subject_id != '' || class_id != '') {
      $.post("includes/ajax/create_score.php", formdata)
      .done(function(data){
        $("#success").fadeIn('slow', function(){
          $("#success").html('<div class="alert alert-info alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-check"></i>Alert! </b>'+data+'</div>');
        });    
      })
      .fail(function(data){
          $("#success").fadeIn('slow', function(){
               $("#success").html('<div class="alert alert-warning alert-dismissible"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"><i class="glyphicon glyphicon-remove-circle"></i></button><b><i class="fa fa-warning"></i>Alert! </b>'+data+'</div>');
           });
      });
    }
});

您的问题编号

2) 当您从 read_student_score_form.php 获得结果时页面尝试在浏览器控制台中运行此代码以查看是否有任何结果，，，这是在尝试将其发送到服务器之前，，

var form = $('#st_score_form');
var formdata = form.serialize();

运行它，并在这里给我你的结果，这样也许我们可以继续解决这个问题，，

更新:

你循环错误了...看看你在 php 中的 while ，它会渲染多个 <form action="#" method="post" id="st_score_form">这是错误的..在 while,, 之前移动它，如下所示:

<?php
    $output .= '<form action="#" method="post" id="st_score_form">';
    while ($row = mysqli_fetch_array($result)) {

    } // end while
    $output .= '</form>';