javascript - 使用 AJAX 和 jQuery 在 div 内调用 php 页面(也有循环)

Question

有一些这样的问题，但问题是:为什么这不起作用？

嗯，我有一个 div 和一个 php 循环来从 mysql 获取值并将其放入表中。该表的每一行，我都需要一个按钮来打开有关其自身的更多详细信息。就像，它是一个用户列表，我需要在该 div 内打开第二个 php 页面，其中包含有关该人的更多信息。所以我在循环中放置了一个带有 jQ​​uery 的 AJAX 脚本:D

一如既往，对你的英语不好感到抱歉

嗯...这是我的主要代码:

<div id="equipecontent" class="card-content" style="padding:10px;">
    <p class="center-align grey-text text-darken-1""><b>Código Sênior: <? echo $_SESSION['cod_revenda']-100000; ?></b></p>
    <table class="striped centered highlight">
        <thead>
            <tr>
                <th data-field="id">Name</th>
                <th data-field="tel">Phone</th>
                <th data-field="email">E-mail</th>
                <th data-field="ven">Moth sell</th>
                <th data-field="ir"></th>
            </tr>
        </thead>

        <tbody>

            <?
                $sql = "select cli_nom, cli_cod, cli_log, cli_fon1, cli_ven_cod, cli_ven_mes";
                $sql .= " from clientes where cli_tip_cod = 2 and cli_ven_cod = ".$_SESSION['cod_revenda']."-100000";
                $query = mysql_query($sql) or die($sql ."<p>". mysql_error());
                $i=0;
                while ($r = mysql_fetch_array($query)) {
                    extract($r,EXTR_PREFIX_ALL,"c");
                ?>
                <tr>
                    <td><? echo $c_cli_nom; ?></td>
                    <td><? echo $c_cli_fon1; ?></td>
                    <td><? echo $c_cli_log; ?></td>
                    <td>R$<? echo $c_cli_ven_mes; ?></td>
                    <td><a href="" onclick="id<? echo $c_cli_cod; ?>();"><i class="fa fa-user-plus fa-lg"></i></a></td>
                    <script>
                    function id<? echo $c_cli_cod; ?>(){
                        var id = <? echo $c_cli_cod; ?>;
                        $('#equipecontent').html('Downloading...'); // Show "Downloading..."
                        // Do an ajax request
                        $.ajax({
                            url: "equipece.php?id="+id
                            }).done(function(data) { // data what is sent back by the php page
                            $('#equipecontent').html(data); // display data
                        });
                    }
                    </script>
                </tr>
                <? $i++;} if($i==0){ ?>
                <tr>
                    <td colspan="2"></td>
                    <td><h4 class="grey-text text-darken-1">Nothing here =(</h4></td>
                    <td colspan="1"></td>
                </tr>
            <? } ?>
        </tbody>
    </table>
</div>

这是我的第二个目标页面(equipece.php)内容:

<?
    include_once "comum.php"; // Things that previous page already had, but without this, doesn't work.
    dbAbreConexao(); // Opening connection with database
    ini_set('default_charset','UTF-8');
    mysql_set_charset('utf8'); 

    if(isset($_GET["id"])) {
        $id = $_GET["id"];
        } else {
        $id = 0;
    }

    $sql = "select cli_nom, cli_cod, cli_log, cli_fon1, cli_ven_cod, cli_ven_mes";
    $sql .= " from clientes where cli_tip_cod = 2 and cli_ven_cod = $id";
    $query = mysql_query($sql) or die($sql ."<p>". mysql_error());
    $i=0;
    while ($r = mysql_fetch_array($query)) {
    extract($r,EXTR_PREFIX_ALL,"c");}
?>

<? echo $c_cli_nom; ?>

好吧，当我点击按钮时，实际上会发生很多事情......有时会加载某些内容，然后返回第一个包；有时整个页面会变成白色并卡住......好吧，我认为我的代码一团糟。

帮助D=

Ps.:我认为这些信息没有用，但我正在使用Materializecss框架。

Answer 1

您可以通过使用一个函数来处理每个 onClick() 事件，从而使这一过程变得更加简单。也许从这里开始:

<a href="#" data-id="<?php echo $c_cli_cod; ?>" class="click-me">
    <i class="fa fa-user-plus fa-lg"></i>
</a>

然后在循环之外放置一个函数，如下所示:

<script>

    $(function(){

        $('.click-me').click(function(e){

            e.preventDefault();
            var id = $(this).data('id');

            $('#equipecontent').html('Downloading...');

            $.ajax({
                url: 'equipece.php?id='+id,
                type: 'GET',
                error: function(){
                    // always good to have an error handler with AJAX
                },
                success: function(data){
                    $('#equipecontent').html(data);
                }
            });

        });

    });

</script>