Question

我有以下表格清单：

<ul class="form-list">
<li>
     <div class="my-display">
          <h1>form 1</h1>
          <form method="POST" action="" id="my-form">
               <button id="button_id" type="submit" class="btn" >Submit</button>
          </form>
     </div>
</li>
<li>
     <div class="my-display">
          <h1>form 2</h1>
          <form method="POST" action="">
               <button id="button_id" type="submit" class="btn" >Submit</button>
          </form>
     </div>
</li>
</ul>

我动态创建列表项并使用ajax返回它们。我想单击该按钮，并将列表项替换为使用ajax返回的新列表项。

这样的事情：

$(document).ready(function() {
            $('.form-list').on('submit', '#my-form', function (e) {

                var id = $(this).attr('name');
                getListItem(getListItemCallback, id); 

                return false;
            });

          });


getListItem(callback, id){          
    $.get(url, function(result) {                    
        callback(result);
        return false;

        });
 }

getListItemCallback:function(result){

 }

我该如何做到这一点？

Answer 1

首先，由于您使用的是AJAX，因此不需要过时的<form> POST方法。 AJAX会很好地做到这一点。

请注意，我为您的DIV和按钮添加了唯一ID。

接下来，当用户单击SUBMIT按钮时，使用jQuery DOM遍历选择器（例如.find，.next，.prev，.closest，.parent等）来查找按钮所属的DIV的ID。我使用.parent（）来获取“this”div的ID。

所有DIV（和按钮）都应具有唯一ID。

我建议使用$ .ajax（）格式，因为它比.get（）或.post（）更结构化，因此更容易排除故障。

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

                $('.btn').click(function() {
                    my_butt = $(this).attr('id');
                    my_div = $(this).parent().attr('id');
                    //alert('Button: ' +my_butt+ '     DIV: ' + my_div);
                    $.ajax({
                        type: "POST",
                        url: "your_php_file.php",
                        data: 'myDiv=' +my_div+ '&theButton=' +my_butt,
                        success: function(whatigot) {
                            alert('Server-side response: ' + whatigot);
                            //$("'#" +my_div+ "'").html(whatigot);
                            $("#"+my_div).html(whatigot);
                        } //END success fn
                    }); //END $.ajax

                }); //END btn class click

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <ul class="form-list">
    <li>
         <div id="li-1" class="my-display">
              <h1>form 1</h1>
               <button id="button_id-1" type="submit" class="btn" >Submit</button>
         </div>
    </li>
    <li>
         <div id="li-2" class="my-display">
              <h1>form 2</h1>
               <button id="button_id-2" type="submit" class="btn" >Submit</button>
         </div>
    </li>
    </ul>

</body>
</html>

<强> your_php_file.php

<?php

    $d = $_POST['myDiv'];
    $b = $_POST['theButton'];

    $r = '<h1>Received Data:</h1>';
    $r .= 'Div Name: ' .$d. '<br />';
    $r .= 'ButtonID: ' .$b. '<br />';

    echo $r;

如何用jquery用另一个列表项替换一个列表项

1 个答案: