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

时间:2018-07-13 10:10:06

标签: php jquery mysql ajax

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

以下脚本是用于从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调用,但不确定如何实现此功能。

1 个答案:

答案 0 :(得分:0)

首先,您必须更改序列化以进行序列化。

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;
  }