Question

我是ajax的新手。我想在ajax的帮助下提交数据，然后获取新数据替换旧数据所在的div中的旧数据。

这是滑动标签的jquery $（document）.ready（function（）{

    // Vertical Sliding Tabs
    $('div#st_vertical').slideTabs({            
        // Options
        contentAnim: 'slideH',
        contentAnimTime: 600,
        contentEasing: 'easeInOutExpo',
        orientation: 'vertical',
        tabsAnimTime: 300                       
    });     

});

AJAX

function addhubs()
{
var group =$('#customhubs').val();
var user=$('#loginuser').val();
$.ajax({
type:"GET",
url: 'mfrnds.php?val='+group+'&& loguser='+user,
success: function(html){ 



}
});
}

div我想替换数据

      <div id="st_vertical" class="st_vertical">

    <div class="st_tabs_container">

        <a href="#prev" class="st_prev"></a>
        <a href="#next" class="st_next"></a>
    <div class="st_slide_container">

            <ul class="st_tabs">
                <?php $sql=mysql_query("select * from groups");
           while($ab=mysql_fetch_array($sql))
            {
           $gpID[]=$ab['group_id'];
           $gp=$ab['group_id'];
           $gpName=$ab['group_name'];
           ?>
                <li><a href="#stv_content_<?php echo $gp;?>" rel="v_tab_<?php echo $gp;?>" class="st_tab "><?php echo $gpName;?></a></li>
                       <?php
              }
              ?>        </ul>                       


        </div> <!-- /.st_slide_container -->

    </div> <!-- /.st_tabs_container -->

并且ajax调用文件的mfrnds.php包含用于更新新数据的查询。

    $user=$_GET['loguser'];
    $group=$_GET['val'];
    $sql=mysql_query("insert into groups (group_name) values ('$group')");

我怎样才能更新上面的div。 PLZ帮助我。从4天开始坚持不懈地解决问题。感谢

Answer 1

请注意，在您的addhubs功能中，您只应添加一个＆amp;在你的网址中并连接所有内容，如下图所示。

当ajax调用完成后，它会在html变量中返回您请求的页面内容（mfrnds.php）。因此，您只需选择所需的div并输入html，如下所示。所以我们走了......：

您的信息页

<html>
<body>
     <script>
          $(document).ready(function() { 
              setupTabs(); 
          }); 

         function setupTabs() {
               // Vertical Sliding Tabs     
               $('div#st_vertical').slideTabs({  
                    // Options         
                    contentAnim: 'slideH',         
                    contentAnimTime: 600,         
                    contentEasing: 'easeInOutExpo',         
                    orientation: 'vertical',         
                    tabsAnimTime: 300                            
               });   
          }

          function addhubs() {
              var group = $('#customhubs').val();
              var user = $('#loginuser').val();

              $.ajax({
                  type:"GET",
                  url: 'mfrnds.php?val=' + group + '&loguser=' + user,
                  success: function(html) { 
                      //Get div and display the data in there
                      $('div.st_slide_container).html(html);

                      //As your slide effect is gone after you updated this HTML, redo your slide effect:
                      setupTabs();

                  }
              });
          }

     </script>

     <!-- Vertical div -->
     <div id="st_vertical" class="st_vertical"> 
          <div class="st_tabs_container">          
               <a href="#prev" class="st_prev"></a>         
               <a href="#next" class="st_next"></a>     
               <div class="st_slide_container"> 

                    <ul class="st_tabs">
                         <?php 
                         $sql = mysql_query("select * from groups");
                         while($ab = mysql_fetch_assoc($sql)) {
                              $gp = $ab['group_id'];            
                              $gpName = $ab['group_name']; ?>                 
                              <li>
                                   <a href="#stv_content_<?=$gp?>" rel="v_tab_<?=$gp?>" class="st_tab ">
                                        <?php echo $gpName;?>
                                   </a>
                              </li>
                         <?php
                         }  
                         ?>        
                    </ul>

               </div> <!-- /st_slide_container -->
          </div> <!-- /st_tabs_container -->
     </div> <!-- /st_vertical -->
</body>
</html>

因此，在您的 mfrnds.php 中，您应该拥有一个使用val和loguser GET变量并更新数据库的PHP脚本。数据库更新后，您应该返回更新的HTML，如下所示：

*的 mfrnds.php

<?php $user = $_GET['loguser']; $group = $_GET['val']; $sql = mysql_query("insert into groups (group_name) values ('$group')"); ?> <ul class="st_tabs"> <?php $sql = mysql_query("select * from groups"); while($ab = mysql_fetch_assoc($sql)) { $gp = $ab['group_id']; $gpName = $ab['group_name']; ?> <li> <a href="#stv_content_<?=$gp?>" rel="v_tab_<?=$gp?>" class="st_tab "> <?php echo $gpName;?> </a> </li> <?php } ?> </ul>

请注意，这段代码基本上只是作为一个例子，我不知道你想在mfrnds.php等中做些什么，但我希望这给你一个好主意！

Answer 2

看起来你几乎就在那里。

在你的mfrnds.php文件中添加一行来获取更新的行

使用：

伪代码

“SELECT * FROM groups”

for each row in groups
  echo "<div> groups.name groups.category </div"

然后在你的回调函数中

success: function(html){ 

   $('.st_tabs').html(html);  //replace the html of the sttabs div with the html echoed out from mfrnds.php

}

将数据提交到mysql后更改div的内容

2 个答案: