Fatal编程技术网
  • php/
  • 使用JavaScript/AJAX将值从一个PHP文件发送到另一个PHP文件

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

php javascript ajax

使用JavaScript/AJAX将值从一个PHP文件发送到另一个PHP文件,php,javascript,ajax,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

我将此表单保存在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>
由于某种原因，它不起作用。我对JavaScript的了解很差，我不知道自己做错了什么。
table_ready.php
工作正常，但它不接受该值，因此无法工作。是否有任何关于我做错了什么的提示？

我想您省略了脚本的一部分（连接和查询本身），并且该脚本工作正常

第二件事是使用jQuery
serialize（）
（），它将转换要发送的表单元素（
input，textarea，select
），而您的数据就在
中，尝试使用一些隐藏字段，以便serialize将找到并编码它以发送到另一个脚本。

如果编写php的html代码结果，会更加清晰。它打印表单的方式不清楚。您在哪里调用sendPushNotification？我编辑了该文件，使其结构可见。我尝试发送的唯一元素是名为“table”的值$staterow[“state”]，这是一种隐藏的输入类型，我在此文件上使用的全部代码现在都已发布。如果我没有正确理解你说的话，那么标签内的数据只会显示给用户，而不会被检索OK@user1732457，现在我清楚地看到了问题所在。提交和隐藏字段表在表单外部。窗体在while循环中关闭。更改
以包含隐藏字段，它应该可以工作。非常感谢您，它工作得很好，我被困了几个小时。我认为这是一个js问题。Thnx！ 
<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>