单击按钮时在Javascript函数中调用Ajax

我在这段代码中得到一个错误，它说uncaughtreferenceerror:myFunction没有在HTMLButtonElement.onclick上定义。我无法找出哪里出了问题。 下面是我的代码，其中包含一个while循环，该循环从数据库获取数据，$xyz转到名为myFunction的javascript函数

这是我的档案：

if($rs->num_rows>0)
{
while($row=$rs->fetch_object())
{

            $xyz=$row->judged_id;

            $my="SELECT DISTINCT first_name,picture from user1 where id='$xyz'";

            $hj=$con->query($my);

            if($hj->num_rows>0)
            {
                while($rz=$hj->fetch_object())
                {
                    echo $name=$rz->first_name;

                    $pic=$rz->picture;


                    echo"<img src='$pic' height=100 width=100>";

                    ?>
                    <button type='button' class='egf' onClick="myFunction('xyz')">Chat</button>
                    <br><br>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <script>
  var xyz=<?php echo $xyz; ?>;

  function myFunction('xyz')
   { 


    $.ajax({
            type: 'GET',
            url: 'chat/public/01_index.php?id2=xyz',
            success: function(data) {

    $('.chat-list').html(data);
    }
    });

    });

    }
  </script>




  <?php

            } 
        }

---

PHP变量$xyz的内容是什么？例如，如果它是一个字符串， 这：

这是无效的。相反，它应该是：

var xyz = '<?php echo $xyz; ?>';

---

首先：您不需要jQuery。jQuery库只是一个用本机javascript编写的包装器。使用本机javascript会更有效

之后，正如我在评论中提到的，您应该在父元素上使用一个click事件监听器，它包含您的所有按钮。看看下面的例子

<div class="parent-element">
<?php
while ($row = $resource->fetch_object())
{
    echo '<button id="' . $row->id . '">' . $row->title . '</button>;
}
?>
</div>

<script>
    var parent = document.querySelector('.parent-element'),
        xhr = new XMLHttpRequest();

    parent.addEventListener('click', function( event ) {
        let target = event.target;
        if (target.tagName.toLower() == 'button' && target.id) {
            // your xml http request goes here
            xhr.open('GET', yoururl + target.id);
            xhr.onload(function() {
                if (xhr.status === 200) {
                    // do something with the response
                    let response = xhr.responseText;
                }
            });
            xhr.send();
        }
    }, true);
</script>

---

while循环将按钮添加到HTML标记中。此外，在父div元素中添加了一个click事件侦听器。每次单击时，它都会检查目标元素是否为按钮，以及该按钮是否具有id属性。如果是这样，将执行一个异步请求。

url末尾缺少一个“：在开发时，您确实需要检查控制台和网络选项卡。你真的看到了发生了什么them@Akin我想我是通过检查控制台发布了这个javascript错误。更好的解决方案是在包含所有按钮元素的父元素上添加一个事件侦听器。对于每个按钮，一个单一事件侦听器的性能比n个单一事件侦听器的性能更高；从你的功能。无效

var xyz = '<?php echo $xyz; ?>';

<div class="parent-element">
<?php
while ($row = $resource->fetch_object())
{
    echo '<button id="' . $row->id . '">' . $row->title . '</button>;
}
?>
</div>

<script>
    var parent = document.querySelector('.parent-element'),
        xhr = new XMLHttpRequest();

    parent.addEventListener('click', function( event ) {
        let target = event.target;
        if (target.tagName.toLower() == 'button' && target.id) {
            // your xml http request goes here
            xhr.open('GET', yoururl + target.id);
            xhr.onload(function() {
                if (xhr.status === 200) {
                    // do something with the response
                    let response = xhr.responseText;
                }
            });
            xhr.send();
        }
    }, true);
</script>