如何在不重新加载页面的情况下获取PHP文件中的javascript数据

我正在构建一个twitter克隆的最佳尝试，但遇到了一点问题。我希望能够在不刷新页面的情况下，点击一篇帖子，并在页面的覆盖层中显示该帖子（就像在twitter提要上查看回复等）。

在script.js中，我检查是否单击并尝试更改url

$('body').on("click", ".chirp", function(){
 var uid = $_GET['id'];
 var pid = $(this).attr("id");
 var pidSplit = pid.split("chirp");
 var messageID = pidSplit[1];
 var obj = {foo: "status"};
 $('.chirpOverlay').addClass("active");
 window.history.pushState(obj, "Status", "profile.php?id="+uid+"&status="+pid);
});

javascript按预期工作……但我很快就会发现，胜利是短暂的。

在profile.php中，我尝试从URL参数获取状态id

<?php
$status_id = $_GET['status'];
$sql = $db->query("SELECT * FROM chirps WHERE id='$status_id'");
if (mysqli_num_rows($sql) > 0) {
  $c = $sql->fetch_object();
}
?>

---

你需要做的就是做一些有用的事情，然后在你弄清楚事情的时候再添加一些。这会给你一个好的开始

这是你的两份文件。确保它们都在同一个目录中

您需要确保已加载jquery版本。将它放在调用script.js的任何页面上


script.js

$(document).ready(function(){

  $('body').click(function(){

    var id; //define your id.
    var pid;  //define your pid.

    var datastring = 'id=' + uid + '&status=' + pid;
    console.log(datastring);
      $.ajax({

        url: 'profile.php',
        type: 'POST',
        cache: false,
        data: datastring,
        dataType: 'json',
        success: function(data){
          console.log('Made it to the success function: ' + data);
          if (data) {
            //It works, do something.
            console.log(data);

          } else{
            //It does not work, do something.
            console.log('Your ajax failed to get the info from your php page. Keep troubleshooting');

            }

        }

      });    

  });

});

profile.php

<?php

/*
$status_id = $_POST['status'];  //This needs to be sanitized and validated.
$sql = $db->query("SELECT * FROM chirps WHERE id='$status_id'"); //This is unsafe sql practice.
if (mysqli_num_rows($sql) > 0) {
$c = $sql->fetch_object();
}
echo json_encode($c); //This is what gets sent back to script.js
*/

echo 'You made it to your php page.';

?>

我终于找到了一个基于AJAX的解决方案

我创建了一个名为“chirp_open_ref.php”的新php文件，并将此ajax添加到script.js中：

var datastring = 'status=' + messageID;
$.ajax({
    url: "chirp_open_ref.php",
    type: "POST",
    data: datastring,
    cache: false,
    dataType: "text",
    success: function(data){
        $('.chirp-container').html(data);
    }
});

“chirp\u open\u ref.php”的内部：

<?php
require 'core.inc.php';

if (isset($_POST['status']) && isset($_SESSION['user_id'])){
  $chirp_id = $_POST['status'];
  $c = "";
  $sql = $db->query("SELECT * FROM chirps WHERE id='$chirp_id'");
  if (mysqli_num_rows($sql) > 0){
    $c = $sql->fetch_object();
  }
  include'chirp.inc.php';
}
?>

答案只有一个词：
ajax
正如@Ashraf所说，你可以使用ajax@Ashraf来查看其他人的项目，似乎可以选择ajax，但语法让我困惑，我不知道如何在我的案例中应用它。控制台会记录我的整个profile.php页面（html结构和所有内容）。未按预期工作。感谢您的回复！我试过你说的，但控制台上没有任何记录。另外，JS$#GET是一个特殊变量，有人向我们展示了如何在线创建以模仿PHP版本。在我的代码中，我添加了
console.log（datastring）这说明了什么。我知道JQuery选择器工作得很好id=1&status=9'是成功函数中console.log中添加的数据字符串日志。请看这是怎么说的。提醒您，您的SQL查询很容易受到SQL注入的影响。花一个小时学习如何参数化查询。您还需要找到一种在服务器端验证变量的方法。没有任何东西可以阻止某人向
chirp\u open\u ref.php
发送格式错误的url。除此之外，你的选择似乎是正确的。谢谢你的帮助。我一定会看的！
<?php
require 'core.inc.php';

if (isset($_POST['status']) && isset($_SESSION['user_id'])){
  $chirp_id = $_POST['status'];
  $c = "";
  $sql = $db->query("SELECT * FROM chirps WHERE id='$chirp_id'");
  if (mysqli_num_rows($sql) > 0){
    $c = $sql->fetch_object();
  }
  include'chirp.inc.php';
}
?>