如何将数据从一个页面发送到另一个页面?

时间:2018-01-23 01:57:14

标签: javascript php html

我正在尝试将数据从页面的文本字段发送到另一个页面中的另一个文本字段而不从第一个页面中退出 我尝试使用表单和JavaScript,但是当我点击按钮它进入第二页或它说它不存在(当我尝试其他方式),我不能将数据发送到第二页,

<script>
                function carrinho()
                {
                  var codProduto = document.getElementById('proc´[]').value;
                  var quantidade = document.getElementById('txtNumber').value;
                  var dataString = 'codProduto='+codProduto +'&quantidade'+quantidade;
                  $.ajax({
                    type:"post",
                    url:"C:\xampp\htdocs\prototype\views\orcamento.php",
                    dara: dataString,
                    cache: false,
                    success: function(html){
                      $('#smg').html(html);
                    }
                  });
                    return false;
                }

                </script>
          <form action="http://localhost/prototype/orcamento.php" method="post">
                  <td><img src="css/imagens/catalogomiluz/S3B60340.png" width="200" height="200" /></td>
                  <td><input id="proc" name="proc[]" type='text' class="form-control" value="000712S3B60340" readonly></td>
                  <td><input type="text" name="descProduto[]" id="descProduto" class="form-control" readonly></td>
                  <td><input id="prc" name="prc[]" type='text' class="form-control" value="" readonly></td>
                  <td style="width:60px;">
                       <input id="txtNumber" type="number" value="1"   />
                       <input id="btnAdd" type="button" value="+" onclick="add();" />
                      <input id="btnAdd" type="button" value="-"  onclick="subtract();" />
                  </td>
                  <td>
                      <input id="carrinhoTemp" type="image" alt="submit" img src="css/imagens/carrinho.png" onclick=" return carrinho()" />
                  </td>
                </form>

第二页的代码如下所示:

 <?php
 $codProduto=$_POST['$codProduto']
 $qtdProduto=$_POST['$quantidade']
  ?> 

 <td><input type="text" name="codProduto" id="codProduto" value="<?php  echo htmlentities($codProduto); ?>" maxlength="20"></td>
 <td><input type="number" name="qtdProduto" id="qtdProduto" value="<?php  echo htmlentities($qtdProduto); ?>" maxlength="5"></td>

1 个答案:

答案 0 :(得分:1)

我会做类似下面的事情。我简化了代码以便更好地理解。

@rtfm建议仅使用javascript提供内容。你可以做到这一点。或不。这取决于您的应用程序的结构和/或涉及的任务。您只能使用js来获取一些响应内容,但是,如果内容很大,那么最好通过外部页面的Ajax加载它。此外,只要在提供响应内容之前至少需要一个简单的服务器端操作,那么您必须使用ajax。或表格提交。

我不知道您如何使用proc[],例如在哪个上下文中,所以我的代码只是一个具有普通名称(proc)的示例。

如果td标签直接包围form个标签,那就错了。 form代码应位于td代码之间或table代码周围。关于将表格和表格展示在一起的其他任何地方。

任何特殊的共鸣,为什么要停用缓存?如果没什么特别的话,请删除caching: false行。

祝你好运!

选项1:一个页面,一个表单,没有ajax请求:

<?php
$response = FALSE;

/*
 * ===================================
 * Run operations upon form submission
 * ===================================
 */
if (isset($_POST['submit'])) {
    /*
     * ==========================
     * Validate the posted values
     * ==========================
     */
    if (!isset($_POST['proc']) || empty($_POST['proc'])) {
        $errors[] = 'Please provide a proc.';
    }

    /*
     * =====================================
     * Assign the posted values to variables
     * =====================================
     */
    if (!isset($errors)) {
        $codProduto = htmlentities($_POST['proc']);

        $response = TRUE;
    }
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Demo</title>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    </head>
    <body>

        <div id="messages">
            <?php
            if (isset($errors)) {
                echo implode('<br/>', $errors);
            }
            ?>
        </div>

        <form action="" method="post">
            <input type="text" id="proc" name="proc" value="000712S3B60340" class="form-control">

            <button type="submit" name="submit" value="submit">
                <img id="carrinhoTemp" src="css/imagens/carrinho.png" alt="submit" />
            </button>
        </form>

        <div id="smg">
            <?php
            if ($response) {
                ?>
                <input type="text" id="codProduto" name="codProduto" value="<?php echo isset($codProduto) ? $codProduto : ''; ?>" maxlength="20">
                <?php
            }
            ?>
        </div>

    </body>
</html>

选项2:两页,无表格,ajax请求:

第1页(index.php):

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Demo</title>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            function carrinho() {
                $.ajax({
                    method: 'post',
                    dataType: 'json',
                    url: 'orcamento.php',
                    cache: false,
                    data: {
                        'codProduto': $('#proc').val()
                    },
                    success: function (response, textStatus, jqXHR) {
                        $('#messages').html('');
                        if (response.errors.length > 0) {
                            $('#messages').html(response.errors.join('<br/>'));
                        } else {
                            $('#smg').html(response.content);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('An error occurred during your request. Please try again, or contact us.');
                    }
                });
            }
        </script>
    </head>
    <body>

        <div id="messages"></div>

        <input type="text" id="proc" name="proc" value="000712S3B60340" class="form-control">
        <input type="image" id="carrinhoTemp" src="css/imagens/carrinho.png" onclick="carrinho();" alt="submit" />

        <div id="smg"></div>

    </body>
</html>

第二页(orcamento.php):

<?php

/*
 * =========================
 * Array holding the results
 * =========================
 */
$response = [
    'content' => '',
    'errors' => [],
];

/*
 * ==========================
 * Validate the posted values
 * ==========================
 */
if (!isset($_POST['codProduto']) || empty($_POST['codProduto'])) {
    $response['errors'][] = 'Please provide a codProduto.';
}

/*
 * ================================================================================
 * Assign the required html content to the response, if the posted values are valid
 * ================================================================================
 */
if (!$response['errors']) {
    $codProduto = htmlentities($_POST['codProduto']);

    $response['content'] .= '<td><input type="text" id="codProduto" name="codProduto" value="' . $codProduto . '" maxlength="20"></td>';
}

/*
 * ==================================
 * Json-encode and print the response
 * ==================================
 */
echo json_encode($response);