使用Ajax将数据从一页传递到另一页

Question

我有2个页面，分别称为testing.php和submission.php 。 我在找实现的是从发送数据testing.php中显示的数据submission.php 。 例如，如果用户单击test1他们将被定向到submission.php而我想在该页面上显示test1 。 这是我的代码：

testing.php：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>  
    <div class="col-xs-3">
        <ul id="choose">
            <li class="nav"><a href="submission.php">test1</a></li>
            <li class="nav"><a href="submission.php">test2</a></li>
            <li class="nav"><a href="submission.php">test3</a></li>
            <li class="nav"><a href="submission.php">test4</a></li>
            <li class="nav"><a href="submission.php">test5</a></li>
            <li class="nav"><a href="submission.php">test6</a></li> 
        </ul>
    </div>

    <script>
        $(document).ready(function() {    
            $("#choose").on('click', '.nav', function() {
                $.post("submission.php", { data: $(this).text() }, alert($(this).text()));               
            });
        });
    </script>
</body>

commit.php：

<?php
    $subcat = $_POST['data'];
    echo $subcat;
?>

目前submit.php正在显示以下错误；

注意：未定义的索引：第2行上C：\\ xampp \\ htdocs \\ series \\ dynamics \\ admin \\ CleanURL \\ submission.php中的数据

预先感谢您调查，请提出如何解决此问题的建议！

Answer 1

这是正在发生的事情：

您单击链接
事件触发
JavaScript运行
准备了Ajax请求
链接被跟随
Ajax请求被中止，因为它所在的页面不再存在

$_POST为空，因为您通过链接来发出常规GET请求。

首先，要谦虚。

将链接替换为表单（或者将系统设计为使用GET请求，这取决于系统在做什么）。 在其中输入一个隐藏的输入以设置data的值。

然后，使其成为Ajaxy：

将事件处理程序绑定到表单提交事件
捕获事件对象
防止默认行为

您还需要将函数作为第三个参数传递给$.post 。

这样：

$("#choose").on('submit','form', function(event){
  event.preventDefault();
  $.post(
      "submission.php",
      {data: this.form.data.value}, 
      function (response) { alert(response); }            
   );
});

Answer 2

最简单的方法是使用GET，并且不需要javascript。

<ul id="choose">
    <li class="nav"><a href="submission.php?data=test1">test1</a></li>
    <li class="nav"><a href="submission.php?data=test2">test2</a></li>
    <li class="nav"><a href="submission.php?data=test3">test3</a></li>
    <li class="nav"><a href="submission.php?data=test4">test4</a></li>
    <li class="nav"><a href="submission.php?data=test5">test5</a></li>
    <li class="nav"><a href="submission.php?data=test6">test6</a></li> 
</ul>

您的submission.php。

<?php
$subcat = $_GET['data'];
echo $subcat;
?>

但是，如果您确实希望/需要使用POST，则需要更多代码并需要javascript。 首先，将您的ul包裹在表格中，并将无线电输入添加到每个项目并隐藏它们：

<form action="submission.php" method="post">
    <ul id="choose">
        <li class="nav"><input type="radio" name="data" value="test1" style="display: none" /><a href="#">test1</a></li>
        <li class="nav"><input type="radio" name="data" value="test2" style="display: none" /><a href="#">test2</a></li>
        <li class="nav"><input type="radio" name="data" value="test3" style="display: none" /><a href="#">test3</a></li>
        <li class="nav"><input type="radio" name="data" value="test4" style="display: none" /><a href="#">test4</a></li>
        <li class="nav"><input type="radio" name="data" value="test5" style="display: none" /><a href="#">test5</a></li>
        <li class="nav"><input type="radio" name="data" value="test6" style="display: none" /><a href="#">test6</a></li> 
    </ul>
</form>

当您单击链接时，使用javascript选中正确的单选输入并提交表格。

$("#choose").on('click', '.nav', function() {
    $(this).find('input').prop('checked', true);
    $('form').submit();               
});

然后，您可以使用您的Submit.php代码。

<?php
$subcat = $_POST['data'];
echo $subcat;
?>

Answer 3

带表格

<form action="submission.php" method="post">
Name: <input type="text" name="name"><br>
<input type="submit">
</form>

使用AJAX

   var data = (this).text();
    $.ajax({
      method: "POST",
      url: "submission.php",
      data: { li_selected: data}
    })
      .done(function( msg ) {
        alert( "Response: " + msg );
      });

我认为您想使用ajax。

使用Ajax将数据从一页传递到另一页

问题描述

3 个解决方案

解决方案1
0 2016-05-11 15:56:27

解决方案2
0 2016-05-11 16:33:14

解决方案3
-1 2016-05-11 15:55:58

使用Ajax将数据从一页传递到另一页

问题描述

3 个解决方案

解决方案1 0 2016-05-11 15:56:27

解决方案2 0 2016-05-11 16:33:14

解决方案3 -1 2016-05-11 15:55:58

解决方案1
0 2016-05-11 15:56:27

解决方案2
0 2016-05-11 16:33:14

解决方案3
-1 2016-05-11 15:55:58