Ajax post方法没有更新页面

时间：2016-08-03 19:51:37

标签： javascript php jquery ajax

尝试通过jQuery post方法将属性值传递给PHP。它根据console.log成功，但页面没有刷新页面上的$ _POST值。但是，它显示了成功数据。

jQuery发布数据：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dracanon Application</title>
    <script src="js/jquery-2.2.4.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="css/jquery-ui.css" type="text/css">
</head>
<body>Array
(
    [id] => 22
)
data from ajax post:22<br/><form name="test" method="post" action="">
<div class="bs-example">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#newaltrequest">New Requests</a></li>
        <li><a data-toggle="tab" href="#archive">Archive</a></li>
    </ul>
    <div class="tab-content">
        <div id="newaltrequest" class="tab-pane fade in active">
            <h3>New Requests</h3>
            <table class="table table-striped" id="application-table">
                <div class="display-limit">
                    <div class="btn-group page-limit">
                        <button id="pagelimit" type="button" class="form-control btn btn-default btn-small dropdown-toggle" data-toggle="dropdown">
                                <span>10</span><span class="caret"></span>
                        </button>
                        <input type="hidden" id="limit-selection" name="limit-selection" />
                        <ul class="dropdown-menu limit-selector" role="menu" >
                            <li><a href="#" data-value="5">5</a></li>
                            <li><a href="#" data-value="10">10</a></li>
                            <li><a href="#" data-value="25">25</a></li>
                            <li><a href="#" data-value="50">50</a></li>
                            <li><a href="#" data-value="All">All</a></li>
                        </ul>
                        <script>
                            $('.limit-selector li a').click(function (e) {
                                var value = $(this).data("value");
                                $('#limit-selection').val(value);
                                document.getElementById("classForm").submit();
                            });
                        </script>
                    </div>
                </div>
                <div class="button-container">
                    <script>
                        /* limit page dropdown */
                        $('.dropdown-menu a').on('click', function(){
                            $('.dropdown-toggle').html('<span>'+$(this).html() + '</span><span class="caret"></span>');
                        });
                        /* End  limit page dropdown */
                    </script>
                </div>                
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>Alt Character</th>
                    </tr>
                </thead>
                <tbody>
                <tr>
                    <tr>
                        <td>bwilson</td><td>Bracchius</td><td class='btnreview'><button type='button' class='btn btn-primary btn-small reviewbutton' data-toggle='modal' 
                           data-target='#view_detail_modal' 
                           data-requestid='22'>Review</button></td></tr><tr><td>dcaldessa</td><td>sojurne</td><td class='btnreview'><button type='button' class='btn btn-primary btn-small reviewbutton' data-toggle='modal' 
                           data-target='#view_detail_modal' 
                           data-requestid='23'>Review</button></td>
                    </tr>
               <!--<script>
                        $(document).ready(function () {
                            $(document).on('click','.reviewbutton',function () {
                                var requestid = $(this).attr('data-requestid');
                                console.log(window.location);
                                $.ajax({
                                            type:"POST",
                                            url: "../index.php",
                                            data: {id: 13},
                                            success: function (data) {
                                    console.log("data-resolved");
                                }
                                        });
                                    });
                        });
                    </script>-->                </tr>
                </tbody>
            </table>
        </div>
        <div id="archive" class="tab-pane fade">
            <h3>Archive</h3>
            <table class="table table-striped" id="archive-table">
                <div class="display-limit">
                    <div class="btn-group page-limit">
                        <button id="pagelimit" type="button" class="form-control btn btn-default btn-small dropdown-toggle" data-toggle="dropdown">
                            <span>10</span><span class="caret"></span>
                        </button>
                        <input type="hidden" id="limit-selection" name="limit-selection" />
                        <ul class="dropdown-menu limit-selector" role="menu" >
                            <li><a href="#" data-value="5">5</a></li>
                            <li><a href="#" data-value="10">10</a></li>
                            <li><a href="#" data-value="25">25</a></li>
                            <li><a href="#" data-value="50">50</a></li>
                            <li><a href="#" data-value="All">All</a></li>
                        </ul>
                        <script>
                            $('.limit-selector li a').click(function (e) {
                                var value = $(this).data("value");
                                $('#limit-selection').val(value);
                                document.getElementById("classForm").submit();
                            });
                        </script>
                    </div>
                </div>
                <div class="button-container">

                    <script>
                        /* limit page dropdown */
                        $('.dropdown-menu a').on('click', function(){
                            $('.dropdown-toggle').html('<span>'+$(this).html() + '</span><span class="caret"></span>');
                        });
                        /* End  limit page dropdown */
                    </script>
                </div>                
                <thead>
                <tr>
                    <th>Username</th>
                    <th>Alt Character</th>
                </tr>
                <tbody>

                <tr>
                    <td>Sample Data</td>
                    <td>Sample Data</td>
                </tr>
                </tbody>
                </thead>
            </table>
        </div>
    </div>

    <script>
        $(document).on('click','.reviewbutton',function () {
            var requestid = $(this).attr('data-requestid');
            var value = {id: requestid};
            console.log(window.location);
            $.post("testing.php",value, function (data) {
                console.log(data);
            });
        });
    </script>
</body>
</html>

因此它显示正在返回数据，但它没有刷新$ _POST数组以在屏幕上显示值。

以下是原始表格：

<?php
include "includes/header.php";
include "includes/functions.php";
print_r($_POST);

if (isset($_POST['id'])){
    print_r("data from ajax post:".$_POST['id']."<br/>");
}else if (isset($_POST['id'])){
    echo "data not found";
}
if (!isset($_SESSION['requestlimit'])) {
    $_SESSION['requestlimit'] = 10;
}else if (isset($_POST['limit-selection'])){
    if($_POST['limit-selection'] != null) {
        $_SESSION['requestlimit'] = $_POST['limit-selection'];
    }
}

if (!isset($_SESSION['archivelimit'])) {
    $_SESSION['archivelimit'] = 10;
}else if (isset($_POST['limit-selection'])){
    if($_POST['limit-selection'] != null) {
        $_SESSION['archivelimit'] = $_POST['limit-selection'];
    }
}

$start=0;
$limit=$_SESSION['archivelimit'];

if(isset($_GET['pid']))
{
    $id = $_GET['pid'];
    $start = ($id-1)*$limit;
}
else
{
    $id=1;
}

?>
<form name="test" method="post" action="">
<div class="bs-example">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#newaltrequest">New Requests</a></li>
        <li><a data-toggle="tab" href="#archive">Archive</a></li>
    </ul>
    <div class="tab-content">
        <div id="newaltrequest" class="tab-pane fade in active">
            <h3>New Requests</h3>
            <table class="table table-striped" id="application-table">
                <?php include "includes/pagelimit_button.php"?>
                <thead>
                <tr>
                    <th>Username</th>
                    <th>Alt Character</th>
                </tr>
                <tbody>
                <tr>
                    <?php include "includes/alt_requestlist.php"?>
                </tr>
                </tbody>
                </thead>
                <?php /*include "includes/view_alt_request.php" */?>
            </table>
        </div>
        <div id="archive" class="tab-pane fade">
            <h3>Archive</h3>
            <table class="table table-striped" id="archive-table">
                <?php include "includes/pagelimit_button.php"?>
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>Alt Character</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Sample Data</td>
                        <td>Sample Data</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</form>
    <script>
        $(document).on('click','.reviewbutton',function () {
            var requestid = $(this).attr('data-requestid');
            var value = {id: requestid};
            console.log(window.location);
            $.post("testing.php",value, function (data) {
                console.log(data);

            });
        });

    </script>
</body>
</html>

我是否可以在正确的方向上获得一些解决此问题的建议或帮助？

1 个答案:

答案 0 :(得分：-1)

当您请求页面时，在服务器端评估$ _POST变量。当您执行AJAX请求时，$ _POST变量在单独的页面中计算，返回的值将在success方法的浏览器端进行评估。 $ _POST变量因此不会更新，但您应该使用javascript或jQuery处理返回的值，并将它们放在页面中$ _POST变量值的位置。

相关问题
最新问题