使用 AJAX 从 html 表中的单行输入提交到 MySQL 数据库

Question

我有一个使用 AJAX 创建的 html 表，我想在该表中将一些输入值提交到 MySQL 数据库，也使用 AJAX。问题是我只需要提交一行的输入。

下面的脚本是用来从php服务器端php生成html表的：

if (isset($_GET['query'])) {
    $id = $_GET['query'];
    $query = "SELECT * FROM samples_database WHERE sample_id=$id;";
    $result = mysqli_query($connect, $query);
    $input = mysqli_fetch_array($result);
    $input1 = $input['micro_analysis'];
    $order_id = $input['order_id'];
    $rows = explode(',', $input1);

    if (count($rows) > 0 ) {
        $output .= '<thead>
        <tr>
        <th>result_id</th>
        <th>m_analysis_id</th>
        <th>order_id</th>
        <th>sample_id</th>
        <th>Tests</th>
        <th>Detected</th>
        <th>Result</th>
        <th>Comments</th>
        <th colspan="1"></th>
        </tr>
        </thead>
        <tbody>';
        foreach ($rows as $row){
            $query2 = "SELECT * FROM microbiology_analysis_database WHERE id=$row"; 
            $result2 = mysqli_query($connect, $query2);
            $input2 = mysqli_fetch_array($result2);
            $analysis = $input2['m_analysis'];


            $query3 = "SELECT * FROM results_database WHERE m_analysis_id=$row AND order_id=$order_id AND sample_id=$id"; 
            $result3 = mysqli_query($connect, $query3);
            $input3 = mysqli_fetch_array($result3);
            $result_id = $input3['id'];
            $result = $input3['result'];

            $output .= 
            '<tr>

            <td><input name="result_id" id="result_id" value="'.$result_id.'" readonly></td>
            <td><input name="m_analysis_id" id="m_analysis_id" value="'.$row.'" readonly></td>
            <td><input name="order_id" id="order_id" value="'.$order_id.'" readonly></td>
            <td><input name="sample_id" id="sample_id" value="'.$id.'" readonly></td>


            <td>'.$analysis.'</td>
            <td><input name="detected" class="result_input" type="text" id="detected"></td>
            <td><input name="result" class="result_input" type="text" id="result" value="'.$result.'"></td>
            <td><input name="comment" class="result_input" type="text" id="comment"></td>
            <td><input type="submit" id="submit" value="Submit"></td>
            </tr>';
        }
        $output .= '</tbody>';
    }
    echo $output;

这里是允许创建表的 AJAX 脚本：

  $(document).ready(function(){
    $('.get_result').click(function (event) 
    { 
     event.preventDefault(); 

     var url = $(this).attr('href');
     $.get(url, function(data) {
      $('#tests').html(data);
    });
   });

  });

到目前为止，脚本运行良好，但是从该表中提交输入后，我得到了一些不稳定的结果。我只会提交最后一行输入，并且会在 MySQL 数据库中生成大量空条目。此外，它不会停留在页面上，而是重定向到空白页面。

这是表单提交的脚本：

  function formSubmit(){
    $.ajax({
      type: 'POST',
      url: '../server/insert_tests.php',
      data: $('#frmBox').sterialize(),
      success: function(response){
        $('#success').html(response);

      }

    });
    var form = document.getElementById('frmBox').reset();
    return false;
  }

以及用于数据库条目的 php 脚本：

$result_id =test_input($_POST['result_id']);
$order_id = test_input($_POST['order_id']);
$sample_id = test_input($_POST['sample_id']);
$detected = test_input($_POST['detected']);
$result = test_input($_POST['result']);
$m_analysis_id = test_input($_POST['m_analysis_id']);

if ($result_id == '') {
    $sql = "INSERT INTO results_database (order_id, sample_id, detected, result, m_analysis_id) VALUES ('$order_id', '$sample_id', '$detected', '$result', '$m_analysis_id');";
    mysqli_query($connect, $sql);
} else {
    $sql = "UPDATE results_database SET order_id='$order_id', sample_id='$sample_id', detected='$detected', result='$result', m_analysis_id='$m_analysis_id' WHERE id='$result_id';";
    mysqli_query($connect, $sql);
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;


}

这是在 html 脚本中创建 html 表的位置：

 <h3 id="success"></h3>  

      <div class="result_input">
        <form action="../server/insert_tests.php" id="frmBox" method="post" onsubmit="return formSubmit();">
          <table id="tests">
          </table>          
        </form>        
      </div>

任何人的专业知识将不胜感激，我想我需要在 AJAX 脚本中的某处调用this，但不知道如何实现。

Answer 1

首先你必须将 sterialize 改为 serialize。

function formSubmit(){
    $.ajax({
      type: 'POST',
      url: '../server/insert_tests.php',
      data: $('#frmBox').sterialize(),
      success: function(response){
        $('#success').html(response);

      }

    });
    var form = document.getElementById('frmBox').reset();
    return false;
  }

到

function formSubmit(){
    $.ajax({
      type: 'POST',
      url: '../server/insert_tests.php',
      data: $('#frmBox').serialize(),
      success: function(response){
        $('#success').html(response);

      }

    });
    var form = document.getElementById('frmBox').reset();
    return false;
  }