Question

Jquery / Ajax新秀在这里

这就是我的代码应该如何运作......

单击提交按钮时，JavaScript会处理表单并将值发布到同一页面。这些值在SQL查询中用于更新数据库中的列。每次单击按钮时，都会回显并更新列中的值（SQL UPDATE QUERY），所有这些都可以在不使用ajax刷新页面的情况下完成（即“ ONLY ”数据库中的值单击按钮并且页面不应向后滚动到顶部时刷新。问题是我的JavaScript没有像我期望的那样处理表单提交。值周围的div不刷新，我必须重定向到不同的页面并返回以查看更改（SQL查询工作）。如何解决我的问题才能实现这个目标？

file.php

  <html>
      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1
       /jquery.min.js"></script>
     <script type="text/javascript">
      $(document).ready(function(){
      $('#ajaxform').submit(function() { // catch the form's submit event
      $.ajax({ // create an AJAX call...
      data: $(this).serialize(), // get the form data
      type: "POST", // POST
      url: "file.php", // the file to call
      success: function(response) { // on success..
      $('#emailform').html("Thank you!"); // update the DIV
        }
          });
       return false; // cancel original event to prevent form submitting
       });
           }); 
       </script>
       </head>
       <body>

  <?php
  ...................
  foreach($stmt as $obj){

      $id = $obj['id'];
      $likes = $obj['like1'];


      echo '<form action="" method="post" id="ajaxform"        
             enctype="multipart/form-data">';
      echo '<input type="hidden" name="lkcv[]" value="'.$id.'">';
      echo '<input type="hidden" name="like" value="">';
      echo '<input type="image" src="images/like.png" id="lksub" width="15" 
             value="som" height="15" style="float:right;position:relative;
             margin-right:290px;"/><div class="ld">'.$likes.'</div>';
      echo '</form>’;
      echo '<div id="emailform"></div>';
     }
      ?>
     </body>
    </html>

query.php

  <?php
    if( isset( $_POST['lkcv'] ) && is_array( $_POST['lkcv'] ) )
    {
      $idArray = array();
      foreach( $_POST['lkcv'] as $value )
  {
    $idArray[] = intval( $value );
   }

   $db->query( "UPDATE comment SET like1 = like1 + 1 WHERE id IN (".implode( 
   ',', $idArray ).")" );
      }
         ?>

注意： file.php总是有一个动态网址，例如“file.php？post = 1”

Answer 1

我不知道php，如果其中一些是错误的，请道歉。

file.php会写出一个完整的html页面吗？如果是这样，它应该只发送一个片段，因为ajax处理部分更新而不是拉入整个页面。

在您的成功处理程序中，您只更新了#emailForm div，当您真正想要用新版本替换页面上的内容时。

第二，在html中，带有id的标签应该是唯一的。你输出

<div id="emailForm"></div>

因此，在循环中

，它在页面上不是唯一的，因此您可能无法获得正确的更新

$ .ajax有一个名为cache的参数，该设置会在查询中附加时间戳，确保它是唯一的，无需手动创建唯一的URL。

$.ajax({
     cache: false, 
     ....

最后，为了确保您获得新鲜内容，请检查您的网络服务器日志以查找http响应，这意味着内容未发生更改，因此网络服务器发送了缓存副本

 <html>
      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1
       /jquery.min.js"></script>
     <script type="text/javascript">
      $(document).ready(function(){
      $('#content').on("submit", "form", function(e) { // catch the form's submit event
          $.ajax({ // create an AJAX call...
               data: $(this).serialize(), // get the form data
               type: "POST", // POST
               cache: false,
               url: "file.php?=" + $(e.currentTarget).find("name=lkcv[]").val(), // the file to call
               success: function(response) { // on success..
                    $(e.currentTarget).html(response); // only replace the form that caused the submit
                    $('#emailform').html("Thank you!"); // update the DIV
                }
          });
       return false; // cancel original event to prevent form submitting
       });
           }); 
       </script>
       </head>
       <body>

   <?php
   ...................
   echo '<div id=content>';

   foreach($stmt as $obj){

      $id = $obj['id'];
      $likes = $obj['like1'];

      echo '<form action="" method="post" enctype="multipart/form-data">';
      echo '<input type="hidden" name="lkcv[]" value="'.$id.'">';
      echo '<input type="hidden" name="like" value="">';
      echo '<input type="image" src="images/like.png" id="lksub" width="15" 
             value="som" height="15" style="float:right;position:relative;
             margin-right:290px;"/><div class="ld">'.$likes.'</div>';
      echo '</form>’;
     }
      echo '</div>';
      echo '<div id="emailform"></div>';
      ?>

在每个循环中使用ajax来刷新div内容

1 个答案: