在Ajax中自动更新，而无需在文本字段中输入

时间：2019-03-12 04:10:35

标签： php sql ajax

table live

我正在尝试使“计划的”列自动化。现在，我将其设置为1（如果为1），显示为“ NO”，如果为0，则显示为“ NO”。目前，我有一个模态弹出窗口，可以输入1或0，然后调度为“ YES”或“ NO”。如果我单击模式中的“更新”，如何获取$ _POST以自动检查该列是1还是0，然后将其更改为另一列？

目标：

  • 单击“是”或“否” >>模式以确认>>更新到另一个。

已经通过connection.php检索了数据库，并正在使用变量$ table输出该数据。

我不确定将“计划”值的检查放在模态中还是在“ connection.php”中。

我也尝试过：

$scheduled = mysqli_query($connection , "SELECT scheduled FROM user WHERE id ='$id'");

if ($scheduled = 1){
    $changesched = 0;
} else if ($scheduled = 0) {
    $changesched = 1;
}

$result  = mysqli_query($connection , "UPDATE user SET scheduled = '$changesched' WHERE id='$id'");

但这没有用，尝试在SQL UPDATE之前将变量添加到1和0。

任何帮助将不胜感激，即使是伪代码，也希望看到和举例说明。

数据库名称：ajax_test

表名：用户

index.php 

 <?php
  include 'connection.php';
 ?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Email</th>
        <th>Scheduled</th>
      </tr>
    </thead>
    <tbody>
      <?php
          $table  = mysqli_query($connection ,'SELECT * FROM user');
          while($row  = mysqli_fetch_array($table)){ ?>
              <tr id="<?php echo $row['id']; ?>">
                <td data-target="email"><?php echo $row['email']; ?></td>

                <td data-target="scheduled">

                  <?php
                    if ($row['scheduled'] == 1) {
                   ?>

                   <a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">YES</a>

                  <?php
                    } else if ($row['scheduled'] == 0) {
                    ?>
                   <a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">NO</a>
                  <?php
                    }
                   ?>
                </td>
              </tr>
         <?php }
       ?>

    </tbody>
  </table>


</div>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label>UPDATE SCHEDULED?</label>
              <input type="text" id="scheduled" class="form-control">
            </div>
            <input type="hidden" id="userId" class="form-control">

          </div>
          <div class="modal-footer">
            <a href="#" id="save" class="btn btn-primary pull-right">Update</a>
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

</body>

<script>
  $(document).ready(function(){

    //  append values in input fields
      $(document).on('click','a[data-role=update]',function(){
            var id  = $(this).data('id');
            var scheduled  = $('#'+id).children('td[data-target=scheduled]').text();

            $('#scheduled').val(scheduled);
            $('#userId').val(id);
            $('#myModal').modal('toggle');
      });

      // now create event to get data from fields and update in database

       $('#save').click(function(){
          var id  = $('#userId').val();
          var scheduled = $('#scheduled').val();
          var email =   $('#email').val();

          $.ajax({
              url      : 'connection.php',
              method   : 'post',
              data     : {scheduled: scheduled , id: id},
              success  : function(response){
                            // now update user record in table
                             $('#'+id).children('td[data-target=scheduled]').text(scheduled);
                             $('#myModal').modal('toggle');

                         }
          });
       });
  });
</script>
</html>

connection.php 

<?php
$connection =   mysqli_connect('localhost' , 'root' ,'' ,'ajax_test');

if(isset($_POST['id'])){

    $id = $_POST['id'];
    $scheduled = $_POST['scheduled'];

    $result  = mysqli_query($connection , "UPDATE user SET scheduled = '$scheduled' WHERE id='$id'");
}
?>

table

1 个答案:

答案 0 :(得分：1)

您可以简单地从数据库中以这种方式选择它

SELECT if(scheduled , 'YES', 'NO') AS scheduled_enum, scheduled FROM user WHERE id = ?

现在，您有了一个名为scheduled_enum的新“伪”字段，您可以像在PHP中的其他任何字段一样轻松地对其进行访问。我在其中添加了普通的scheduled，所以你们两个都有。

而不是回来

  ['scheduled'=>0]

现在您应该得到

  ['scheduled_enum'=>'NO', 'scheduled'=>0]

以此类推...通过执行此操作，可以减少PHP所需执行的步骤，从而降低代码复杂性并提高性能。例如，通常您必须拉出每一行，检查schedule的值，更改它，然后将其存储在新数组中。有了这个，您就可以在某些情况下提取所有数据，因为数据是您想要的格式。

  SELECT if(foo, 'YES', 'NO') AS foobar FROM table
  $data = mysqli_fetch_all($result, MYSQLI_ASSOC); //returns:[[foobar=>YES],[foobar=>NO], ...]

  //vs
  SELECT foo FROM table //returns:[[foo=>1],[foo=>0], ...]

  $data = [];
  while($row=(mysqli_fetch_assoc($result))){
     //shortest
     //  $row['foo'] = $row['foo'] ? 'YES' : 'NO';
     if($row['foo']){
         $row['foo'] = 'YES';
     }else{
         $row['foo'] = 'NO';
     } 
     $data[] = $row;
  }
  //returns:[[foo=>YES],[foo=>NO], ...]

要说明其工作原理，您可以为任何字段名称加上别名并创建一个假想的列。当在select的字段部分中计数或使用函数时，通常会使用此函数，因为数据库会将函数包含在结果中

   SELECT COUNT(id) FROM table // returns:[COUNT(id) => 2]
    //vs
   SELECT COUNT(id) AS total FROM table // returns:[total => 2]

   //you can even do this - useful if you need some static string to each row
   SELECT 'bar' AS foo FROM table // returns:[foo => 'bar']

有很多“隐藏的”问题分散在那里，我可以全部回答。我将介绍对我来说最明显的内容。

您还可以在jQuery或任何JavaSript的客户端上真正解决此问题

     $('td a').click(function(e){
          var el = $(this);
          var scheduled= el.text() ? 'YES' : 'NO';

          $.post('connection.php', {
              id : el.data('id'),
              scheduled : scheduled
               //other stuff here ?
          }, function(data){
                //do something after request ?
                el.text(scheduled);
          });
    });

您所需要的全部链接如下：

  <a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>"><?php echo $row['scheduled'] ? 'YES' : 'NO';?></a>

您可以内联处理条件，而不必重复整个链接。

目前最大（或从用户角度来看最明显）的问题是

在您对connection.php的Ajax调用中，我将向您展示如果 index.php

中的$('#scheduled').val()='YES' 
  $('#save').click(function(){
      var id  = $('#userId').val();
      var scheduled = $('#scheduled').val();  //YES
      var email =   $('#email').val();

      $.ajax({
          url      : 'connection.php',
          method   : 'post',
          data     : {
              scheduled:scheduled,   //YES - fine so far
              id:id
           },
          success  : function(response){
                        // now update user record in table
                         $('#'+id)
                              .children('td[data-target=scheduled]')
                              .text(scheduled); //YES - you never change this
                         $('#myModal').modal('toggle');

                     }
      });
   });

将其更改为类似的内容

  $('#save').click(function(){
      var id  = $('#userId').val();
      var scheduled = $('#scheduled').val(); //YES
      var email =   $('#email').val();

      $.ajax({
          url      : 'connection.php',
          method   : 'post',
          data     : {
                scheduled: scheduled, //YES
                id: id
          },
          success  : function(response){
                        // actually check that the update worked
                         //will make this an integer that is equal to the number of modified rows
                         //so if it's 1 pass this
                         if(response.success==1){
                             //flip this
                             scheduled= 'YES' == scheduled ? 'NO' : 'YES'; 

                             $('#'+id)
                               .children('td[data-target=scheduled]')
                               .text(scheduled); //NO -- that's more like it.

                             $('#myModal').modal('toggle');
                          }else{
                              //some error happened
                          }
                     }
      });
   });

您应该检查数据库更新是否在我使用的response.success以上才能正常工作。因此，我们需要对AJAX请求connection.php的目标进行一些小的更改。最简单的方法是返回通过更新修改的行数，0为空，并且当您使用行ID时，我们一次只能修改1行，因此我们可以返回1为此。

<?php

 //use empty instead of isset, empty covers what isset does, plus any thing "falsy"
 //in this case we want to cover these '' empty strings, 0 zero as int, '0' as string
 if(!empty($_POST['id'])){
    //don't bother connecting if we don't have an id
    $connection =   mysqli_connect('localhost' , 'root' ,'' ,'ajax_test');

    $id = $_POST['id'];
    $scheduled = $_POST['scheduled'];

    mysqli_query($connection , "UPDATE user SET scheduled = '$scheduled' WHERE id='$id'");
   //return the number of rows updated
    $res = mysqli_affected_rows($connection);
 }else{
     $res = 0;
 }
 echo json_encode(['success'=>$res]);

 -- remove the ending ?>

我将删除结尾的?>标记，它在仅包含PHP的文件中实际上是可选的。另外，类似?>.的内容可能会破坏您的JSON的收益，因为由于PHP标记之外的某些意外内容，最终会像这样的{"success" : 1}.加上最后的.

最后准备查询，以防止 SQLInjection

What is SQL injection?

关于SO的资源很丰富，有关此主题的网络也很多。由于这篇文章的篇幅太长，所以我在这里没有必要再提出任何建议。

希望有帮助！

相关问题
最新问题