将JS变量发送到另一个没有表单的页面上的PHP

Question

我有一个带有搜索字段的html页面，其中可以键入一个名称，其中返回一个名称和id表(特别是来自Steam)。最左边的列，名字，是超链接，我想，当点击，带用户到说的球员的个人资料(profile。php)，我想发送"名字"one_answers";steamid"当这个名称链接被点击的时候，把两个JS变量从一个页面发送到另一个页面的PHP后端。

我是ajax的新手，似乎这是使用它的唯一方法，所以在研究了一段时间后，这就是我的结论:

$(document).ready(function() {
$('#playerList td').click(function(e) {
if ($(this).text() == $(this).closest('tr').children('td:first').text()) {
console.log($(this).text());
var name = $(this).text();
var steamid = $(this).closest('tr').children('td:nth-child(2)').text();
$.ajax({
url: 'profile.php',
method: 'POST',
data: {
playersSteamID : steamid,
playersName : name 
},
success: function() {
console.log('success');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
}
})
}
});

});

直到ajax定义的所有内容都按我想要的工作，并且我想要发送"name"one_answers";steamid"vars到profile.php，但我不认为我理解ajax是如何工作的。我的理解是ajax可以"post"。信息(通常是json对象)到url，但也可以从页面返回信息?这就是我有点困惑的地方，我想知道我是否只是用错了。

作为快速注释:playerList是我的表的id。

当我点击超链接时，它带我到profile.php，这是我想要的，但是php的$_POST[]数组似乎是空的/null，因为我得到了"未定义的数组键"。同时访问'playersSteamID'和'playersName'时出现错误。var_dump()也返回NULL，所以我想知道在ajax中发送数据{}字段的方式是否有问题。我在这方面还是新手，所以任何帮助都会非常感激。

更新:我如何访问profile.php中的变量

<?php
echo var_dump($_POST['playersName']);
echo var_dump($_POST['playersSteamID']);
if (isset($_POST['playersName'])) {
console_log("PLAYER_NAME => ".$_POST['playersName']);
}
if (isset($_POST['playersSteamID'])) {
console_log("PLAYER_STEAMID => ".$_POST['playersSteamID']);
}
?>

profile.php的其余部分正在使用这些变量并运行几个sql查询并构建一个给定适当变量的表，但由于$_POST[]为空，我不能继续超过上述点，因为前两行返回null，并且条件永远不会为真，因为isset()为假。

Answer 1

ajax用于post或get参数/info从/到URL，而无需重定向/刷新/导航到特定页面。

请记下，不要重定向/刷新/导航

在你的情况下，你想发送2个参数到profile.php，你也想导航到它，是的…?但是你正在使用Ajax，这不是一个正确的选择。

解决方案:-

→使用普通表单提交之类的东西，并将参数发送到profile.php，在这种情况下，您将获得重定向到profile.php，并可以期望正常的功能。

你可以使用带有提交按钮的普通表单{非常普通}，或者使用自定义函数提交表单，如果需要做一些进一步的工作{表单验证}。

你的函数应该是这样的…

$(document).ready(function() {
$('#playerList td').click(function(e) {
e.preventDefault();
if ($(this).text() == $(this).closest('tr').children('td:first').text()) {
console.log($(this).text());
var name = $(this).text();
var steamid = $(this).closest('tr').children('td:nth-child(2)').text();
//Do some other stuffs
document.forms['someform'].submit();//submitting the form here
}
});
});

profile.php的其余部分保持不变。

→如果您真的想使用ajax，请按照以下步骤操作。

Ajax用于动态网页设计，对于从服务器获取数据而不刷新页面非常有用。

你应该改变你在profile.php文件中的响应方式。

例如: -

<?php
if(isset($_POST['playersSteamID'])){
$name = $_POST['playersName'];
$id = $_POST['playersSteamID'];
//Do your stuff here db query whatever
//Here echo out the needed html/json response.
echo "<h3>".$name."</h3>";
echo "<h4>".$playersSteamID."</h4>";
}
?>

响应{from:echo}将在ajax成功的function(data)的data中可用，您可以在任何您想要的地方使用这个data。

例如: -

success: function(data){
console.log(data);//for debugging
$('#mydiv').html(data);//appending the response.
}

→使用php session并将steamID存储在session变量中，如果你的网站有一些登录功能，这将非常有用。

$_SESSION['steamID'] = //the steamID here;

这个变量可以在站点使用的任何地方使用，通过在页面中调用session_start()，您想使用会话。

例如: -

<a href="profile.php" target="_self"> click here to view your profile </a>

profile.php

<?php
session_start();
$id = $_SESSION['steamID'];
//echo var_dump($_POST['playersName']);
//echo var_dump($_POST['playersSteamID']);
/*if (isset($_POST['playersName'])) {
console_log("PLAYER_NAME => ".$_POST['playersName']);
}
if (isset($_POST['playersSteamID'])) {
console_log("PLAYER_STEAMID => ".$_POST['playersSteamID']);
}*/
echo $id;
//Do your work here......
?>

对于任何查询注释下来。

Answer 2

一个超链接可能会导致页面导航，这是你不想要的。
页面导航将发出get请求，但您的端点正在等待post请求。
你可以通过设置href为#或者完全移除<a>来停止导航。
你也可以尝试在事件对象上调用preventDefault。

$(document).ready(function() {
$('#playerList td').click(function(e) {
e.preventDefault();
if ($(this).text() == $(this).closest('tr').children('td:first').text()) {
console.log($(this).text());
var name = $(this).text();
var steamid = $(this).closest('tr').children('td:nth-child(2)').text();
$.ajax({
url: 'profile.php',
method: 'POST',
data: {
playersSteamID : steamid,
playersName : name 
},
success: function(data) {
console.log('success', data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
}
})
}
});

});