将列表视图的值传递给ajax

Pass value of list view to ajax

本文关键字：ajax 值传 列表 视图      更新时间：2023-09-26

我有一个动态创建的列表。创建列表的部分代码是:

<ul>
    <?
        foreach ($folders as $folder)
            {
                $folder = str_replace("{imap.gmail.com:993/imap/ssl}", "", $folder);
                $folder2 = str_replace("[Gmail]/", "", $folder);
            ?>
                <li>
                    <a><div id="box"><? echo $folder2; ?> </div></a>
                </li>
            <?}
</ul>
<div id="maillist"></div>

$folder

GMAIL/All Mail
GMAIL/Drafts
GMAIL/Important

$folder2

All Mail
Drafts
Important

我想要的是，当用户点击所有邮件，值对应于它(在这种情况下:GMAIL/所有邮件)应该通过ajax传递到另一个脚本。对于list

中的其他值也应遵循相同的过程。ajax代码

<script>
$(document).ready(function(){
    $('#box').change(function(){
        var boxid = $('#box').val();
        console.log($('#box'))
        if(boxid != 0)
        {
            $.ajax({
                type:'post',
                url:'a_fetchmaillist.php',
                data:{id:boxid},
                cache:false,
                success: function(returndata){
                    $('#maillist').html(returndata);
                    console.log(returndata)
                }
            });
        }
    })
})
</script>

有谁能告诉我是否有可能做我想做的，如果是，那么它将如何完成

首先不要多次分配相同的id ，而是设置一个类(例如box)

然后为特定文件夹指定data属性(例如:box-allMails)并在更改时选择该属性:

foreach ($folders as $folder)
{
   $folder = str_replace("{imap.gmail.com:993/imap/ssl}", "", $folder);
   $folder2 = str_replace("[Gmail]/", "", $folder);
?>
   <li>
     <div class="box" data-folder="<? echo $folder2 ?>"><? echo $folder2; ?></div>
   </li>
<?}

Then on change:

$(document).on('click', '.box', function() {
   var folder = $(this).attr('data-folder');
   // ajax call..
});

重要:你必须听'click'事件而不是'change'，因为你点击了一个div，而不是一个输入(我已经改变了代码)。

事件委托:注意代码:

$(document).on('click', '.dynamic-element', function() { .. })

代替:

$('.element').on('click', function() { .. });

第二个不行因为你是动态创建元素的

Clickable:除非您想重定向到另一个页面，否则您不必插入锚标记以使列表项可单击。在您的情况下，您可以为.boxdiv设置样式，以便获得像这样的光标:

CSS 

.box { cursor:pointer }

jQuery会处理剩下的(查看示例)

$(document).on('click', '.box', function() {
  var folder = $(this).attr('data-folder');
  alert('You clicked on: ' + folder);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><div class="box" data-folder="folderOne">Folder One</div></li>
  <li><div class="box" data-folder="folderTwo">Folder Two</div></li>
  <li><div class="box" data-folder="folderThree">Folder Three</div></li>
  <li><div class="box" data-folder="folderFour">Folder Four</div></li>
</ul>

相关文章：