使用JavaScript / AJAX将值从一个PHP文件发送到另一个PHP文件

时间:2013-08-16 19:52:26

标签: php javascript ajax

我在PHP文件中有这个表单:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    function sendPushNotification(id){
        var data = $('form#'+id).serialize();
        // $('form#'+id).unbind('submit');                
        $.ajax({                
            url: "table_ready.php",
            type: 'GET',
            data: data,
            beforeSend: function() {
            },
            success: function(data, textStatus, xhr) {
                //$('.txt_message').val("");    
            },
            error: function(xhr, textStatus, errorThrown) {
            }
        });
        return false;
    }
    </script>

    <style type="text/css">
    .bigcontainer{
        width: auto;
        margin: 0 auto;
        padding: 0;
    }
    h1{
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 24px;
        color: #777;
    }
    div.clear{
        clear: both;
    }
    ul.devices{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .smallcontainer {
        border: 2px solid #ccc;
        width: 300px;
        height: 100px;
        overflow-y: scroll; 
    }
    ul.devices li{
        float: left;
        display: inline;
        padding: 10px;
        margin: 0 15px 25px 0;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #555;
    }
    ul.devices li label, ul.devices li span{
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        color: #393939;
        display: block;
        float: left;
    }
    ul.devices li label{
        height: 25px;
        width: 150px;                
    }
    ul.devices li .send_btn{
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0096FF), to(#005DFF));
        background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#0096FF), to(#005DFF));
        background: -moz-linear-gradient(center top, #0096FF, #005DFF);
        background: linear-gradient(#0096FF, #005DFF);
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
        border-radius: 3px;
        color: #fff;
    }
    </style>
</head>

<body>

<div class="bigcontainer">
    <?php
    include_once 'include/DB_Functions.php';
    $db = new DB_Functions();

    $state = $db->checkTableState();

    if ($state != false)
        $no_of_state = mysql_num_rows($state);
    else
        $no_of_state = 0;

    if ($no_of_state > 0) {
        ?>
        <ul class="devices">
            <?php
            while ($staterow = mysql_fetch_array($state)) {
                $items = $db -> displayTable($staterow["state"]);
                ?>
                <li>
                    <form id="<?php echo $staterow["state"] ?>" name="" method="post" onsubmit="return sendPushNotification('<?php echo $staterow["state"] ?>')">
                        <h1>Τραπέζι: <?php echo $staterow["state"]; ?></h1>
                        <div class="smallcontainer">
                            <ul>
                                <?php
                                // $num_of_items = mysql_fetch_array($items);
                                while($row = mysql_fetch_array($items)){
                                    $food = Array();
                                    $quan = Array();
                                    $food[] = $row['food'];
                                    $quan[] = $row['uquantity'];

                                    foreach( $food as $index => $f){
                                        ?>
                                        <li>  
                                            <label>
                                                <?php echo $f; ?> <?php echo $quan[$index]; }?>
                                            </label> 
                                        </li>
                                        <div class="clear"></div>
                        </form>
                    </li>
                    <?php
                }
                ?>
                </ul>
            </div>
            <div class="send_container">
                <input type="hidden" name="table" value="<?php echo $staterow["state"] ?>"/>
                <input type="submit" class="send_btn" value="Send" onclick=""/>
            </div>
            <?php
        }
    } else {
        ?> 
        <li>No Users Registered Yet!</li>
        <?php
    }
    ?>
    </ul>   
</div>

</body>

</html>

我正在使用此功能将名称为table的值发送到我的table_ready.php文件:

<script type="text/javascript">
function sendPushNotification(id){
    var data = $('form#'+id).serialize();
    // $('form#'+id).unbind('submit');                
    $.ajax({                
        url: "table_ready.php",
        type: 'GET',
        data: data,
        beforeSend: function() {
        },
        success: function(data, textStatus, xhr) {
            //$('.txt_message').val("");    
        },
        error: function(xhr, textStatus, errorThrown) {
        }
    });
    return false;
}
</script>

由于某种原因,它不起作用。我对JavaScript的了解非常糟糕,我无法弄清楚我做错了什么。 table_ready.php工作正常但它不接受该值,因此它不起作用。对我做错了什么的暗示?

1 个答案:

答案 0 :(得分:1)

我假设您省略了部分脚本(连接和查询本身),并且工作正常。

第二件事是使用jQuery serialize()http://api.jquery.com/serialize/)它会转换要发送的表单元素(input, textarea, select),而您的数据就在<label>内,尝试使用一些隐藏字段,以便序列化将查找并编码它以发送到另一个脚本。