0

我有以下表格列表：

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

 }

我怎样才能做到这一点？

4

1 回答 1

0

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

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

接下来，当用户单击 SUBMIT 按钮时，使用 jQuery DOM 遍历选择器（例如 .find、.next、.prev、.closest、.parent 等）来查找按钮所属的 DIV 的 ID。我使用 .parent() 来获取“这个”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;
于 2013-08-07T22:11:08.140 回答