JavaScript-在没有表单堆栈溢出的情况下将JS变量发送到另一页上的PHP

顺晟科技

2022-10-19 12:31:36

257

我有一个带有搜索字段的html页面，其中可以键入名称，并返回名称和ID表（特别是来自Steam）。最左边的列名称是超链接，当单击时，我希望将用户带到所述播放器的配置文件(profile.PHP)，当单击名称链接时，我希望将“name”和“steamid”发送到该profile.PHP，因此本质上是将两个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”和“steamid”var发送到profile.php，但我认为我并不了解ajax是如何工作的。我的理解是，ajax可以将信息（通常是我所看到的json对象）“发布”到url，但也可以从页面返回信息？这就是我有点困惑的地方，我想知道我是不是用错了。

简要说明：是我的表的ID。

当我单击超链接时，它会将我带到profile.php，这正是我想要的，但是PHP的$_post[]数组似乎是空的/空的，因为当我试图访问“Players Steamid”和“Players Name”时，我会得到“undefined array Key”错误。var_dump()也返回NULL，所以我想知道在Ajax中发送data{}字段的方式是否有问题。我对此还很陌生，因此非常感谢您的帮助。

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

$(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);
                  }
                })
            }
        });
        
    });

profile.php的其余部分是获取这些变量，运行几个sql查询，并构建一个在给定适当变量的情况下工作的表，但是由于$_post[]为空，我无法继续完成上面的内容，因为前两行返回null，并且条件项从不为true，因为是false。

顺晟科技：

超链接可能导致页面导航，这是您不希望的。页面导航将发出get请求，但您的端点期望的是post请求。您可以通过将href设置为#或完全删除。您还可以尝试在事件对象上调用。

$(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用于或参数/info from/to URL，而无需重定向/刷新/导航到特定页面。

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

在您的情况下，您希望发送2个参数，并且还希望导航到该参数，是吗？但是您使用的是Ajax，这不是一个正确的选择。

解决方案:-

->使用普通表单提交之类的东西，并将参数发送到，在本例中，您将得到重定向到profile.php并可以期待正确的功能。

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

函数如下所示...

$(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用于动态web设计，在不刷新页面的情况下从服务器获取数据非常有用。

应更改响应在文件中的方式。

如:-

$(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);
                  }
                })
            }
        });
        
    });

响应{from：}将在ajax success中提供，您可以在任何您想要的地方使用它。

如:-

$(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);
                  }
                })
            }
        });
        
    });

->使用php会话并将steamID存储在sesssion变量中，如果您的网站有登录功能，这非常有用。

$(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);
                  }
                })
            }
        });
        
    });

此变量可以在站点使用的任何地方使用，方法是在页面中调用要使用会话。

如:-

$(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);
                  }
                })
            }
        });
        
    });

profile.php

$(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);
                  }
                })
            }
        });
        
    });

对于所有查询，请向下注释。

上一篇：html-如何将表单与其他元素在同一下一篇：JavaScript-Vuetify

网站建设

Html

JavaScript-在没有表单堆栈溢出的情况下将JS变量发送到另一页上的PHP