Question

我目前正在尝试通过示例学习Ajax的基础知识。通过遵循基本教程，我设法创建了以下脚本：

<!DOCYTPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
$(function(){
  $('#mybtn').on('click', function(e){
    e.preventDefault();
    $('#mybtn').fadeOut(300);

    $.ajax({
      url: 'ajax-script.php',
      type: 'post',
    }); // end ajax call
  });
</script>
</head>

<body>
    <a href='#' id='mybtn'>click me</a>
</body>

</html>

结合一个名为ajax-script.php的简单php文件，其中包含以下代码：

<?php

if($_POST) {
  echo "<p>ok</p>";
}

?>

任何人都可以确定我可能做错了什么吗？我怎样才能做到这一点？

Answer 1

您没有成功功能 - 即将接收回送的PHP数据。

此外，您需要关闭加载jQuery库的script标记，并使用不同的脚本标记来描述javascript代码。

试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(function(){
        $('#mybtn').on('click', function(e){
        e.preventDefault();
        $('#mybtn').fadeOut(300);

        $.ajax({
            url: 'ajax-script.php',
            type: 'post',
            success: function(d){
                alert(d);
            }
        }); // end ajax call
    });
</script>

此外，您的if ( $_POST )可能会导致问题 - 要么删除它，要么发布一些数据：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(function(){
        $('#mybtn').on('click', function(e){
        e.preventDefault();
        $('#mybtn').fadeOut(300);

        $.ajax({
            url: 'ajax-script.php',
            type: 'post',
            data: 'test=Hello',
            success: function(d){
                alert(d);
            }
        }); // end ajax call
    });
</script>

然后，您可以让PHP回显您发送的内容，因此：

<?php
    if($_POST) {
        $recd = $_POST['test'];
        echo 'PHP side received: ' . $recd;
    }
?>

Answer 2

为了防止第一个答案变得过于单一，我会在这个新答案中回复你的评论。

要尝试的一些事项：

（1）ajax.php文件的位置 - 是否与包含javascript代码的页面位于同一文件夹中？

（2）ajax.php文件的名称 - 请注意代码中的ajax-script.php

（3）点击按钮后我添加了一个警告 - 是否出现了？

（4）我删除了IF条件 - ajax.php文件无论如何都会回复javascript success函数。

（5）为了确保jQuery正常工作，我添加了jQuery代码来着色背景。如果背景没有略微讨论，则jQuery不会加载。

这是否解决了这个问题？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(function(){
        $('body').css('background','wheat');
        $('#mybtn').on('click', function(e){
        alert('Button clicked'); //<==========================
        e.preventDefault();
        $('#mybtn').fadeOut(300);

        $.ajax({
            url: 'ajax.php',
            type: 'post',
            data: 'test=Hello',
            success: function(d){
                alert(d);
            }
        }); // end ajax call
    });
</script>

然后，您可以让PHP回显您发送的内容，因此：

<?php
    $recd = $_POST['test'];
    echo 'PHP side received: ' . $recd;
?>

为什么我对基本Ajax脚本的尝试不起作用？

2 个答案: