使用 JQuery 和 AJAX 将数据提交到另一个页面上的数组

Posted 2023-05-09

【中文标题】使用 JQuery 和 AJAX 将数据提交到另一个页面上的数组

【英文标题】：Submit data to an array on another page using JQuery and AJAX

【发布时间】：2019-01-12 09:04:17

【问题描述】：

我有这个表格。目前，它提交给我的cart.php。

<form action="cart.php?ID=<?=$row['id'];?>&salec=<?=$row['sale'];?>" 
       method="POST">

   <input type="hidden" name="hidden_name" value="<?=$row['title'];?>">

   <input type="hidden" name="hidden_price" value="<?=$row['price'];?>">

   <input type="hidden" name="hidden_list_price" value="<? 
   =$row['list_price'];>">

   <input type="hidden" name="collect" value="<?=$row['collection'];?>">

      <h4>Quantity</h4>

   <input type="text" name="quantity" value="1" maxlength="1" 
    class="quantity">

   <input type="hidden" name="himg" value="<?=$row['image'];?>">

   <input type="submit" class="button" name="cartbtn" value="Add to Cart">
</form>

它提交给我在cart.php 中的这个数组：

$_SESSION['shoppingcart'] = array (

        'salec' => filter_input(INPUT_GET, 'salec'),
        'id' => filter_input(INPUT_GET, 'ID'),
        'name' => filter_input(INPUT_POST, 'hidden_name'),
        'list_price' => filter_input(INPUT_POST, 'hidden_list_price'),
        'price' => filter_input(INPUT_POST, 'hidden_price'),
        'quantity' => filter_input(INPUT_POST, 'quantity'),
        'collect' => filter_input(INPUT_POST, 'collect'),
        'img' => filter_input(INPUT_POST, 'himg')

);

这很好用。我需要将此form 数据提交给cart.php array，而不需要重定向（操作）。

我尝试了这个 jQuery 和 Ajax，但它不起作用。

$(document).ready(function()
    $("#myform").on('submit', function()
        var name = $("#hidden_name").val();
        var price = $("#hidden_price").val();
        var list_price = $("#hidden_list_price").val();
        var quantity = $("#quantity").val();
        var img = $("#himg").val();
        var collect = $("#collect").val();

 $.ajax(
            type: "POST",
            url: "cart.php",
            data: dataString,
            cache: false,
            success: function(result)
                alert(result);
            
 );

当我这样做时：

function pre_r($array)
    echo '<pre>';
        print_r($array);
    echo'</pre>';


pre_r($_SESSION) ;

它显示数据尚未添加到数组中。它不会重定向我——这是我想要的——但它也不会将信息添加到数组中。我做错了什么？

【问题讨论】：

你必须event.preventDefault()。现在您的表单正在提交，然后执行 ajax（可能不再，因为您已经在 ajax 之前“重定向”到 cart.php）

但是 datastring 没有在任何地方定义！？

【参考方案1】：

如果表单在没有 ajax 的情况下提交时可以正常工作，那么您还需要提交表单，因为它也在 Ajax 块中：

$("#myform").on('submit', function(e)
    var form = $(this);
    $.ajax(
        type: form.attr('method'),
        url:  form.attr('action'),
        data: form.serialize(),
        cache: false,
        success: function(result)
            alert(result);
        
    );
    e.preventDefault();
);

【讨论】：

确保您的表单 id="myform"

感谢您的回答，但不幸的是，这不起作用。我确保表格 id =“myform”。这成功地没有重定向我，但它也没有将表单数据添加到数组中。

@K.Doe 使用serialize() 将发送与原始提交过程完全相同的数据。检查浏览器开发工具网络中的请求以查看状态是否为 200 并查看发送的确切内容。你的警报也会触发吗？

@charlietfl 嗨，代码是 200（ok）。它显示所有正确的表单数据，单击提交按钮时的查询参数。只是，出于某种原因，它不会将数据添加到数组中

@charlietfl 哦，是的，我也收到了警报

【参考方案2】：

嗨，我会尽力帮助你。我会告诉你我是这个行业的新手，所以我还在学习 :) 但我将从： 1.使用类型按钮更改输入类型提交。 `` `$(document).ready(function()

$("#myform").click(function()
    var name = $("#hidden_name").val();
    var price = $("#hidden_price").val();
    var list_price = $("#hidden_list_price").val();
    var quantity = $("#quantity").val();
    var img = $("#himg").val();
    var collect = $("#collect").val();`

$.ajax(

        type: "POST",
        url: "cart.php",
        data: 
      name:name,
      price: price,
      list_price: list_price,
      quantity: quantity,
      img: img,
      collect: collect


     ,
        cache: false,
        success: function(result)
            alert(result);
        

);

查看控制台是否有错误希望这可以帮助你 ps如果你想用jquery发出一个post请求，你可以用一种简单的方式做到这一点 $.post( "cart.php", name:name, price: price, list_price: list_price, quantity: quantity, img: img, collect: collect );