Question

我有以下示例代码（可以按原样复制，然后运行以找出问题）。

的index.php

<doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div style="height:30px;width:100%;">
        <div style="height:20px;width:15%;float:left;text-align:center;">
            <a href="" id="1" class="reprezentant">AAA</a>
        </div>
        <div style="height:20px;width:5%;float:left;">&nbsp;</div>
        <div style="height:20px;width:15%;float:left;text-align:center;">
            <a href="" id="4" class="reprezentant">BBB</a>
        </div>
    </div>
    <br/><br/>

    <div style="height:200px;width:20%;float:left;" id="tabel"></div>
    <div style="height:200px;width:78%;float:left;" id="content"></div>
    <div style="clear:both;"></div>
    <br/><br/><br/>
    <div style="height:30px;width:100%;">
        <div style="height:20px;width:5%;float:left;">&nbsp;</div>
        <div style="height:20px;width:15%;float:left;text-align:center;">
            <a href="" id="btn4">SIZ</a>
        </div>
        <div style="height:20px;width:5%;float:left;">&nbsp;</div>
        <div style="height:20px;width:15%;float:left;text-align:center;">
            <a href="" id="btn5">SIL</a>
        </div>
    </div>

    <script type="text/javascript">
    $(document).ready(function(){
        $('.reprezentant').click(function(e){
            var rep = $(this).attr('id');
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "tabel.php",
                data: {rep:rep},
                success: function(resp){
                    $('#tabel').html(resp);
                }
            });
        });
        $('#btn4').click(function(e){
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "siz.php",
                success: function(resp){
                    $('#content').html(resp);
                }
            });
        });
        $('#btn5').click(function(e){
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "sil.php",
                success: function(resp){
                    $('#content').html(resp);
                }
            });
        });
    });
    </script>
</body>
</html>

tabel.php

<?php $rep = $_POST['rep']; ?>
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody><?php
        for ($i=1;$i<=$rep;$i++){?>
            <tr>
                <td><?php echo $i;?></td>
                <td>
                    <a href="" class="locatie" id="<?php echo $i;?>"><?php echo 'Name',$i;?></a>
                </td>
            </tr><?php
        }?>
    </tbody>
    <tfoot></tfoot>
</table>

<script type="text/javascript">
var loc, btn;

$('.locatie').click(function(e){
    e.preventDefault();
    loc = $(this).attr('id');
});

$('a[id^=btn4]').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "siz.php",
        data: {idlocatie: loc},
        success: function(html){
            $('#content').html(html);
        }
    });
});
$('a[id^=btn5]').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "sil.php",
        data: {idlocatie: loc},
        success: function(html){
            $('#content').html(html);
        }
    });
});
</script>

siz.php

<?php
$idloc = isset($_POST['idlocatie']) ? $_POST['idlocatie'] : '';
echo $idloc,' ';
?>
SIZ

sil.php

<?php
$idloc = isset($_POST['idlocatie']) ? $_POST['idlocatie'] : '';
echo $idloc,' ';
?>
SIL

单击AAA，Name1和SIZ后，index.php如下所示：

当我按下AAA时，包含号码的ajax调用将被发送到tabel.php，并且在index.php页面的左侧将显示一个表格，其中包含与发送的号码一样多的行。如果我按BBB，将向tabel.php发送一个包含另一个号码的ajax调用，并且在index.php页面的左侧将显示一个包含与已发送号码一样多的行的表。
每个表都包含一些名称，每个名称都是一个链接，其id为数字。
当点击名称时，它的id（数字）会发送到siz.php和sil.php文件。
现在，当点击SIZ或SIL中的任何一个时，它应显示在页面中间，左表中所点击名称的ID编号，以及所单击按钮的名称（SIZ或SIL）。

问题1：如果我多次按SIZ或SIL，那么table.php发送的号码将会消失。我的问题是，如何解决这个问题，以便数字保留在siz.php / sil.php脚本中，无论我按SIZ还是SIL多少次？

问题2：现在，为了能够看到姓名的号码，我必须按照以下步骤操作：

按AAA或BBB
按下左表中的一个名字
按SIZ或SIL 我希望动态发送名称的ID（当我点击其中一个名称时），无需按SIZ或SIL。这件事能完成吗？

谢谢！

当多次单击按钮时，ajax调用无法保持其状态

0 个答案: