时间戳

首页 > 解决方案 > 在 Ajax 中自动更新，而无需在文本字段中输入

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

问题描述

现场直播

我正在尝试自动化“预定”列。现在我已经将它设置为如果 1 则显示“YES”，如果 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

表名：用户

索引.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>

连接.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'");
}
?>

桌子

标签： phpsqlajax

解决方案

您可以简单地从数据库中选择它

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 中需要采取的步骤，从而降低代码复杂性，并可以提高性能。例如，通常您必须拉出每一行，检查预定的值，更改它，将其存储在一个新数组中。有了这个，你可以在某些情况下获取所有数据，因为数据是你想要的格式。

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

您可以内联执行条件，而不是重复整个链接。

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

在您的 Ajax 调用中connection.php，我将向您展示如果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 的文件中是可选的。进一步这样的事情?>.可能会毁掉你的回报，因为由于 PHP 标记之外的一些意外内容，JSON它会像这样在最后{"success" : 1}.加上一个额外的内容。.

最后准备你的查询，以防止SQLInjection

什么是 SQL 注入？

SO上有很多资源，以及关于这个主题的网络。由于这篇文章的长度，我在这里重新散列是没有意义的。

希望能帮助到你！

推荐阅读