Question

我正在尝试在While循环中进行Ajax更新，以从数据库中检索信息。更新是由每行中存在的表单输入旁边的按钮的onclick事件触发的。

弄清楚我需要传递2个变量-行的ID和输入中的新文本。然后，当成功时：我需要用新值更新输入并也更新列B（静态html）。

HTML

  <table id='movies'>
  <thead>
  <tr>
  <th>COLUMN A</th>
  <th>COLUMN B</th>
  <th>MOVIE ID</th>
  </tr>
  </thead>
  <tbody>

  while ($row = oci_fetch_array($ajaxmovies, OCI_ASSOC+OCI_RETURN_NULLS)) {

  <td> . $row['MOVIENAME'] . </td>
  <td> . $row['MOVIEID'] . </td>
  <td> 

   echo "<input type='text' id='mov' name='movie' maxlength='8' pattern='[0-9]{8}' value='" . $row['MOVIEID'] . "'>";

   echo "<button class='button_save' data-id='" . $row['MOVIEID'] . "'>Save</button>";

  </td>
  </tr>

  }

  </tbody>
  </table>

这就是Ajax脚本-失败了-希望能找到有解释的解决方案。谢谢。

  <script>

  $('.button_save').click(function() { // onclick handler to each of the buttons

  var val1 = $('#mov').val(); // value from input of each row
  var val2 = $(this).attr("data-id");  // Get the ID of the button that was clicked on

   $.ajax({ // AJAX request
       type: 'POST',
       url: 'mov_update.php',
       data: { text1: val1, text2: val2 },

       success: function(response) {
          // $('#result').html(response);
          $('#mov').val(val1); // updates input new value
    }
  });
});

  </script>

这是数据库更新mov_update.php

  // DB Connection

  $text1 = $_POST['text1'];
  $id = $_POST['text2'];

  $sql = "UPDATE SCHEMA.MOVIEW SET MOVIE=:mov
                               WHERE ID=:id";

  $objParse = oci_parse($conn, $sql); 

  oci_bind_by_name($objParse, ':id', $id);
  oci_bind_by_name($objParse, ':mov', $text1);

  $objExecute = oci_execute($objParse, OCI_DEFAULT);

  if ($objExecute) {

      oci_commit($conn); 

      echo $text1 . $id;
  }

Answer 1

带有id 的元素在页面上必须是唯一的。因此，创建数十个<input type='text' id='mov' />是不正确的。您应该改用“动态” ID，例如：

echo "<input type='text' id='mov-" . $row['MOVIEID'] . "' name='movie' maxlength='8' pattern='[0-9]{8}' value='" . $row['MOVIEID'] . "'>";
echo "<button class='button_save' data-id='" . $row['MOVIEID'] . "'>Save</button>";

我想，您的$row['MOVIEID']存储唯一值。因此， id='mov-" . $row['MOVIEID'] . "'是诸如mov-2，mov-3，mov-10等的字符串。

现在在您的js中，您可以：

var val2 = $(this).attr("data-id");  // Get the ID of the button that was clicked on
var val1 = $('#mov-' + val2).val();  // value from `input` which is connected the clicked button

$.ajax({ // AJAX request
  type: 'POST',
  url: 'mov_update.php',
  data: { text1: val1, text2: val2 },
  success: function(response) {
      // $('#result').html(response);
      //$('#mov').val(val1); // updates input new value
      // not sure what this is for, as field value is already `val1`
      $('#mov-' + val2).val(val1);
   }
});

While循环内的Ajax更新-JQuery

1 个答案: