在没有页面重新加载的AJAX调用之后获取php结果

时间：2015-07-14 14:34:49

标签： javascript jquery html ajax

我在一个页面上有三个部分。待处理，已接受和已拒绝的用户。我通过php while循环输出所有这些数据。在Pending users部分旁边，对于该部分中的每个用户，我有两个按钮（Accept和Deny）。当按下其中任何一个按钮时，我对我的php文件运行一个Ajax调用，将用户状态更新为Accepted或Denied（无论哪个被按下）。

我遇到的问题是没有让页面刷新用户的数据将不会移动到更新的状态部分（数据库端的所有内容都正确更新）。但是，如果我移出return false;代码页面会刷新，但我的$('#success').html('User Status Changed!'); $('#success').delay(5000).fadeOut(400);会在页面刷新时立即消失，因此几乎立即就会消失。

我需要一种不刷新页面的方式，但我的用户数据会移动到相应的部分，因此我的成功消息仍会显示。

$(document).ready(function () {

$('.approve').click(function () {
    $.ajax({
        url: 'userRequest_approve.php',
        type: 'POST',
        data: {
            id: $(this).val(), //id
            status: 'Approved' //status
        },
        success: function (data) {
            //do something with the data that got returned
            $("#success").fadeIn();
            $("#success").show();
            $('#success').html('User Status Changed!');
            $('#success').delay(5000).fadeOut(400);
        },
        //type: 'POST'
    });
    return false;
});
});

表格

<form action="" method="POST" id="status">


  <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id' />
    <?php if ($pending_firstname==t rue) { echo "Name - ". $pending_firstname . " " . $pending_lastname . "</br>" . "Username - ". $pending_username . "</br></br>" //echo print_r($_POST); ?>
</form>
<button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">Approve</button>
<button id="deny" type="submit" form="status" name="deny" value="Denied">Deny</button>
<br>
<br>
<br>
<?php ;} else { echo "There are no Pending Requests at this time."; }

html部分的代码：

<?php
$con = mysqli_connect("localhost", "root", "", "db");
$run = mysqli_query($con,"SELECT * FROM user_requests ORDER BY id DESC");
$numrows = mysqli_num_rows($run);

    if( $numrows ) {
        while($row = mysqli_fetch_assoc($run)){
            if($row['status'] == "Pending"){

                $pending_id        = $row['id'];
                $pending_user_id   = $row['user_id'];
                $pending_firstname = $row['firstname'];
                $pending_lastname  = $row['lastname'];
                $pending_username  = $row['username'];
?>
        <form action="" method="POST" id="status">
             <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id'/>
<?php
        if ($pending_firstname == true) {
            echo "Name - ". $pending_firstname . " " . $pending_lastname . "</br>" . 
                "Username - ". $pending_username . "</br></br>"
                //echo print_r($_POST);
?>


                        <button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">Approve</button>
                        <button id="deny" type="submit" form="status" name="deny" value="Denied">Deny</button>
                        </form><br><br><br>
<?php   
                    ;} else {
                        echo "There are no Pending Requests at this time.";
                    }
                }
            }
        }
?>
<hr><br>

        <h2>Approved User Requests</h2><br>
        <div id="success" style="color: red;"></div><br>
    <?php
        $con2 = mysqli_connect("localhost", "root", "", "db");
        $run2 = mysqli_query($con2,"SELECT * FROM user_requests ORDER BY id DESC");
        $numrows2 = mysqli_num_rows($run2);

            if( $numrows2 ) {
                while($row2 = mysqli_fetch_assoc($run2)){
                    if($row2['status'] == "Approved"){

                        $approved_id        = $row2['user_id'];
                        $approved_firstname = $row2['firstname'];
                        $approved_lastname  = $row2['lastname'];
                        $approved_username  = $row2['username'];

        if ($approved_firstname == true) {
            echo "Name - ". $approved_firstname . " " . $approved_lastname . "</br>" . 
                "Username - ". $approved_username . "</br></br>"
?>

1 个答案:

答案 0 :(得分：4)

试试这个。 您正在捕获click事件，该事件不会停止表单提交。 如果您将处理程序更改为提交并阻止默认操作，那么这应该可行。 

$(document).ready(function () {

$('#status').on('submit', function (event) {
event.preventDefault();

    $.ajax({
        url: 'userRequest_approve.php',
        type: 'POST',
        data: {
            id: $(this).val(), //id
            status: 'Approved' //status
        },
        success: function (data) {
            //do something with the data that got returned
            $("#success").fadeIn();
            $("#success").show();
            $('#success').html('User Status Changed!');
            $('#success').delay(5000).fadeOut(400);
        }
        //type: 'POST'
    });

});
});

表格

<form action="" method="POST" id="status">


  <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id' />
    <?php if ($pending_firstname == true) { echo "Name - ". $pending_firstname . " " . $pending_lastname . "</br>" . "Username - ". $pending_username . "</br></br>" //echo print_r($_POST); ?>

<button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">Approve</button>
<button id="deny" type="submit" form="status" name="deny" value="Denied">Deny</button>


</form>
<br>
<br>
<br>
<?php ;} else { echo "There are no Pending Requests at this time."; }

新编辑部分 试试这个 

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>

<?php
    $con = mysqli_connect("localhost", "root", "", "db");
    $run = mysqli_query($con,"SELECT * FROM user_requests WHERE status='Pending' ORDER BY id DESC");
    $numrows = mysqli_num_rows($run);

    if( $numrows ) {
        while($row = mysqli_fetch_assoc($run)){
            if($row['status'] == "Pending"){

                $pending_id        = $row['id'];
                $pending_user_id   = $row['user_id'];
                $pending_firstname = $row['firstname'];
                $pending_lastname  = $row['lastname'];
                $pending_username  = $row['username'];

                if ($pending_firstname == true) {

                    // note removed ID
                    echo '<form action="" method="POST">';
                    echo "Name - " . $pending_firstname . " " . $pending_lastname . "</br>" . "Username - " . $pending_username . "</br></br>";
                    echo '<button class="approve" type="submit"  name="approve" action="Approved"  value="', $pending_id ,'">Approve</button>';
                    echo '<button class="deny" type="submit"  name="deny"  action="Denied"  value="', $pending_id ,'" >Deny</button>';
                    echo '</form><br><br><br>';

                }
            }
        }
    }
    else {
        echo "There are no Pending Requests at this time.";
    }
?>
<hr><br>

<h2>Approved User Requests</h2><br>
<div id="success" style="color: red;"></div><br>
<?php
    $con2 = mysqli_connect("localhost", "root", "", "db");
    $run2 = mysqli_query($con2,"SELECT * FROM user_requests WHERE status='Approved' ORDER BY id DESC");
    $numrows2 = mysqli_num_rows($run2);

    if( $numrows2 ) {

        while($row2 = mysqli_fetch_assoc($run2))
        {
            $approved_id        = $row2['user_id'];
            $approved_firstname = $row2['firstname'];
            $approved_lastname  = $row2['lastname'];
            $approved_username  = $row2['username'];

            if ($approved_firstname == true)
            {
                echo "Name - ". $approved_firstname . " " . $approved_lastname . "</br>" .
                    "Username - ". $approved_username . "</br></br>";
            }
        }
    }
    else
    {
        // none already in approved status

    }
?>

<script type="text/javascript">

    $(document).ready(function(){

        // button handler
        $('button').on('click', function (event) {
            event.preventDefault();

            // get the button that was pressed
            var _button =  $(this);
            // get the value of this button
            var _val = _button.val();

            // get the action for the button (Either Approved or Denied)
            var _action = _button.attr('action');

            // get the form the button is in
            var _form = _button.closest('form');

            var _dataPassed = {status:_action,id:_val};

            // log the data I'm seding  (for debug)
            console.log(_dataPassed);

            // Trigger a submit event and pass the submit handler the value of the button pressed.    
            _form.triggerHandler('submit', _dataPassed);

        });


        $('form').submit(function (event, Passeddata) {
            // prevent the submit event so the page doesn't refresh.
            event.preventDefault();

            // make a ajax request with the value of the button that was pressed.
            $.ajax({
                url: 'userRequest_approve.php',
                type: 'POST',
                data: Passeddata,
                success: function (data) {
                    //do something with the data that got returned
                    $("#success").fadeIn();
                    $("#success").show();
                    $('#success').html('User Status Changed!');
                    $('#success').delay(5000).fadeOut(400);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // alert on an http error
                    alert(textStatus + errorThrown);
                }
            });

        });

    });
</script>

</body>
</html>
相关问题
最新问题