Html 如何使用jquery将一个列表项替换为另一个列表项_Html_Ajax_Jquery

Html 如何使用jquery将一个列表项替换为另一个列表项

html ajax jquery

Html 如何使用jquery将一个列表项替换为另一个列表项,html,ajax,jquery,Html,Ajax,Jquery,我有下列表格： <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" &

我有下列表格：

<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，所以不需要过时的

POST方法。AJAX将很好地做到这一点

请注意，我在div和按钮中添加了唯一的id

接下来，当用户单击提交按钮时，使用jQuery DOM遍历选择器（例如，.find、.Next、.prev、.nest、.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>


$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（）{
my_butt=$（this.attr（'id'）；
my_div=$（this.parent（）.attr（'id'）；
//警报（'Button:'+my_butt+'DIV:'+my_DIV.）；
$.ajax({
类型：“POST”，
url:“您的_php_file.php”，
数据：“myDiv=”+my_div+”&按钮=”+my_butt，
成功：功能（whatigot）{
警报（'服务器端响应：'+whatigot）；
//$（“#”+my_div+”）.html（whatigot）；
$（“#”+my_div）.html（whatigot）；
}//结束成功fn
})；//END$.ajax
})；//结束btn类单击
}); //END$（document.ready（））


表格一
提交


表格二
提交

您的_php_文件.php

<?php

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

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

    echo $r;

您在结果变量中实际得到了什么，HTML标记一些列表项内容，或者仅仅是一个字符串，需要包装在一个列表项中，然后用来替换当前的列表项。使用ok添加了更多我正在使用formI做的事情。我用一个列表id获得每个列表项之间的实际标记，但是是的
<?php

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

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

    echo $r;