Question

我有一个PHP文件test.php，它具有一个简单的链接，单击该链接后，将调用AJAX函数将数据作为POST参数发送到另一个文件testPHP.php。然后，第二个文件从AJAX调用接收POST参数，然后警告$ _POST数组中的内容。我面临的问题是，在第二个文件中，$ _ POST数组为空（我使用print_r（$ _ POST）进行了检查），因此我认为数据尚未通过。这些是2个文件：

test.php

  <a id="link" role="button" href="testPHP.php">Test</a>

  <script type="text/javascript">

  $("#link").click(function(e) {
    e.preventDefault();
    alert('function entered');
    $.ajax({
     url: "testPHP.php",
      type: "POST",
      data: {
        parameter1: 'test', 
        parameter2: 'test2'},
      success: function(msg) {
        alert('wow' + msg);
      }

    });
    alert('function end');
    document.getElementById('#link').setAttribute('href','testPHP.php');
  });

testPHP.php

if(isset($_GET))
{
  echo "<script>alert('GET is there');</script>";
  print_r($_GET);
}
if(isset($_POST))
{
  echo "<script>alert('POST is there')</script>";
  print_r($_POST);
}
if(isset($_POST['parameter1']))
{
  echo "<script>alert('$_POST is set')</script>";
  header('Location: HomePage.php');
}
else
{
  echo "<script>alert('No post variable set')</script>";
}

到目前为止，我已经尝试过如果AJAX调用已成功执行，则发送SUCCESS消息，并且确实会提醒我成功消息。我还检查了第二个文件中的$ _POST数组的内容，以查看我是否以除POST请求之外的其他格式（例如，可能需要分解以获取内容的字符串）接收数据，但是$ _POST数组为空。这是重定向到第二页时得到的输出： Array（）Array（） $ _POST和$ _GET（用于测试目的）数组为空。

我也阅读了AJAX文档，但是无法进行这种简单的POST数据传输。有人可以帮我解决这个问题，以便我理解如何正确发送POST参数并将数据接收到$ _POST ['parameter1']和$ _POST ['parameter2']字符串中，以便我进一步处理数据。

注意：我已经使用了FORM的POST方法和隐藏的表单元素，并且效果很好，但是我想尝试这种方法以更好地了解AJAX的工作原理。

Answer 1

上述内容的稍有不同的版本，可以帮助您解决问题。为了便于调试，它全都是一页，但是单击按钮后，您可以清楚地看到正在运行的脚本。简单地echo在php代码中使用javascript并希望它将在客户端执行将无法正常工作-简单地回显消息或JSON对象会更好。

<?php

    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();

        print_r( $_POST );

        exit();
    }

?>
<!doctype html>
<html>
    <head>
        <title>jQuery - ajax experiments</title>
        <script src='//code.jquery.com/jquery-latest.js'></script>

    </head>
    <body>
        <a id='link' role='button' href='#'>Test</a>
        <script>
            $('#link').click(function(e) {
                e.preventDefault();
                alert('function entered');
                $.ajax({
                    url: location.href,
                    type: 'POST',
                    data: {
                        parameter1: 'test', 
                        parameter2: 'test2'
                    },
                    success: function(msg) {
                        alert( 'wow' + msg );
                    }

                });
                alert('function end');
            });
        </script>
    </body>
</html>

作为2个单独的页面（都在同一目录中，否则将页面编辑到ajax目标）

<!doctype html>
<html>
    <head>
        <title>jQuery - ajax experiments</title>
        <script src='//code.jquery.com/jquery-latest.js'></script>

    </head>
    <body>
        <a id='link' role='button' href='#'>Test</a>
        <br /><br />
        <script>
            $('#link').click(function(e) {
                e.preventDefault();

                $.ajax({
                    url: 'jquery-ajax-target.php',
                    type: 'POST',
                    data: {
                        parameter1: 'test', 
                        parameter2: 'test2'
                    },
                    success: function(msg) {
                        alert( 'wow' + msg );
                    }
                });
            });
        </script>
    </body>
</html>

还有ajax目标jquery-ajax-target.php

<?php

    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        ob_clean();

        $parameter1=( isset( $_POST['parameter1'] ) ) ? $_POST['parameter1'] : false;
        $parameter2=( isset( $_POST['parameter2'] ) ) ? $_POST['parameter2'] : false;


        $_POST['modified']=array(
            'p1'=>sprintf('modified %s', strrev( $parameter1 ) ),
            'p2'=>sprintf('modified %s', strrev( $parameter2 ) )
        );


        $json=json_encode( $_POST );
        echo $json;

        exit();
    }

?>

Answer 2

在删除脚本标签的type属性后，它确实可以工作。我在主脚本标记之前使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>。它在这里工作。同时关闭脚本标签。希望我能帮上忙。还要更改

document.getElementById('#link').setAttribute('href','testPHP.php');

到

document.getElementById('link').setAttribute('href','testPHP.php');

Answer 3

您的代码存在的问题是您正在使用javascript来更改属性，并且在使用getElementById的javascript中，您不再需要使用#符号。尝试以下方法，它将正常工作。

<?php

if(isset($_GET))
{
    echo "<script>alert('GET is there');</script>";
    print_r($_GET);
}
if(isset($_POST))
{
    echo "<script>alert('POST is there')</script>";
    print_r($_POST);
}
if(isset($_POST['parameter1']))
{
    echo "<script>alert('$_POST is set')</script>";
    header('Location: HomePage.php');
}
else
{
    echo "<script>alert('No post variable set')</script>";
}
?>

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<a id="link" role="button" href="index2.php">Test</a>

<script type="text/javascript">

    $("#link").click(function(e) {
        e.preventDefault();
        alert('function entered');
        $.ajax({
            url: "testPHP.php",
            type: "POST",
            data: {
                parameter1: 'test',
                parameter2: 'test2'},
            success: function(msg) {
                alert('wow' + msg);
            }

        });
        alert('function end');
        document.getElementById('link').setAttribute('href','testPHP.php');

    });
</script>
</body>
</html>

此外，对于请求，最好使用failed callback。

 error: function (xhr, status, error) {
    alert(" Can't do because: " + error);
},

Answer 4

这是我的版本。它将对您的ajax返回JSON响应，该响应将在您的控制台中可见，以便于调试。

您的主页：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="link" role="button" href="#">Test</a>

<script>


$(document).ready(function(){

  $("#link").click(function(e) {
    e.preventDefault();
    console.log('function entered');
    $.ajax({
     url: "testPHP.php",
      type: "POST",
      dataType: 'json', //This tells your ajax that you are expecting a json formatted string as a response.
      data: {
        parameter1: 'test', 
        parameter2: 'test2'
      },
      success: function(msg) {
        console.log(msg); //This will show the results as an object in your console.

      }

    });
    console.log('Function End');
    //document.getElementById('#link').setAttribute('href','testPHP.php'); //Why are you doing this. It's not needed.
  });

});


</script>

您的testPHP.php页面：

$results = array();

if(isset($_GET)){


  $results[] = array(

    'GET' => 'TRUE',
    'getData' => $_GET   

  ); 

}

if(isset($_POST)){

  $results[] = array(

    'POST' => 'TRUE',
    'postData' => $_POST   

  ); 

}

echo json_encode($results);

以下是发生的情况的解释：

您通过触发某些事件来对ajax进行初始调用。您的情况就是单击链接。

click函数会导致实际的ajax调用，该调用只是向testPHP.php发送发布请求。

testPHP.php接收发布请求，并使用ajax调用提供的数据执行某种操作。

testPHP.php然后将某种答案发送回给ajax函数。数据将在成功功能中可用。

然后，您将决定如何使用从testPHP.php页传递回成功函数的数据。

这一切都无需刷新原始页面的代码。

您实际上并没有将用户重定向到另一个页面。您只是在告诉您的页面转到另一个页面并执行一些操作，然后该操作会报告回原始页面供您执行操作。

希望有帮助。

使用AJAX调用在PHP文件之间发送POST参数

4 个答案: