将参数传递给ajax的正确方法是什么

Question

我有一个简单的目录：

<?php foreach ($productArray as $key => $value) { ?>
    <div class="product">
        <form id="cartForm">
            <table border='1' cellspacing='0' cellpading='2' width='300 px' align='center'>
                <tr>
                    <td>ID</td> 
                    <td><?php echo $productArray[$key]["ID"];?></td>
                </tr>
                <tr>
                    <td>kategorija</td>
                    <td><?php echo $productArray[$key]["category"];?></td>
                </tr>
                    <td>kiekis</td>
                    <td><?php echo $productArray[$key]["quantity"];?></td>
                </tr>
                <div>
                    <input type="text" id="inputQuantity_<?php echo $productArray[$key] ["ID"];?>"/>
                    <input type="button" id="add_<?php echo $productArray[$key]["ID"];?>" value="prideti" onClick="cartAction('add','<?php echo $productArray[$key]["ID"];?>')" />

通过按下此按钮，我想将数组参数传递给我的cartAction函数。

function cartAction(action, productID) {
    var stringQuery = "";

    if ($.trim(action) == 'add') {
        stringQuery= 'action=' + action + '&ID=' + productID + '&quantity=' + $("#inputQuantity_" + productID).val();
    }

    jQuery.ajax({
        url: "index.php",
        data: stringQuery,
        type: "POST",
        success: function(data) {
            alert(data);
        }
    });
}

而不是数组参数alert(data)显示完整的页面代码。 收集数组数据并发送给javascript函数的最佳方法是什么？

Answer 1

          <?php  foreach ($productArray as $key => $value) {   ?>

            <div class="product">
              <form  >
              <table border='1' cellspacing='0' cellpading='2' width='300 px' align='center'>
              <tr>
                <td> ID </td> <td><?=$value["ID"];?> </td>
                </tr>
                <tr>
                <td> kategorija </td> <td><?=$value["category"];?> </td>
                </tr>
                <td> kiekis </td> <td><?=$value["quantity"];?> </td>
              </tr>
            <div>
            <input type="hidden" name="ID" value="<?=$value["ID"];?>"/>
<input type="hidden" name="category" value="<?=$value["category"];?>"/>
            <input type="hidden" name="quantity" value="<?=$value["quantity"];?>"/>
            <input type="submit" class="submit" value="prideti"  />
         </form>
        <?php   } ?>


        <script>
        $(function(){
     $('.submit').click(function(){
                   data = $(this).closest('form').serializeArray();
        jQuery.ajax({
         url:"index.php",
         data:stringQuery,
         type:"POST",
         success: function(data){
             alert(data);
         }
        });
        return false ;
      });
    });
        </script>

Answer 2

请传递json而不创建字符串。

stringQuery = {"action":action,"ID":productID,"quantity":$("#inputQuantity_"+productID).val()}

Answer 3

因为您使用的是字符串查询，所以看起来您会在$_GET数组而不是$_POST找到数据

如果要使用$_POST ，则将数据构建为对象：

function cartAction(action, productID){
    if($.trim(action)=='add'){
        stringQuery= {
            'action': action,
            'ID': productID,
            'quantity': $("#inputQuantity_"+productID).val()
        }
        $.ajax({
            url: 'index.php',
            data: stringQuery,
            dataType: 'json', //so ajax knows how to populate the response
            type: 'POST',
            success: function(data) { alert(data); }
        });
    }
}

根据index.php的编写方式，您需要检查$ _POST ['action']是否在开始时设置，如果已设置，则处理验证等并执行该操作（mysql等），然后在输出整个页面html之前停止执行。

您要输出的任何数据都可以在php中使用json_encode()进行输出。

另外，您可能想使用console.log(data)并使用开发人员工具查看其中的内容（F12，然后是console选项卡），而不是javascript中的alert(data) 。

Answer 4

用您的脚本替换该脚本。

function cartAction(action, productID){



     var stringQuery="";

        if($.trim(action)=='add'){

}

jQuery.ajax({

url:"index.php",
data:{"action":action,"ID":productID,"quantity":$("#inputQuantity_"+productID).val()},
type:"POST",

success: function(data){
alert(data);

}
});
}

</script>

Answer 5

@ Darius92

根据你的问题，你问的方式， 而不是数组参数警报（数据）显示完整的页面代码 ，我相信你是假设变量“ data的” alert(data)将引用data符合data:stringQuery 。 是这样吗？
如果我对您的假设是正确的，那么您错了！
success: function(data){alert(data); }的变量data success: function(data){alert(data); } success: function(data){alert(data); }用于处理来自您的url:"index.php",的响应url:"index.php", 这意味着它是来自您的AJAX文件（ index.php ）的响应。

您应该在AJAX文件index.php打印$_REQUEST数组，以了解哪些信息已发布到AJAX request 。

您的AJAX handler file, index.php应该如下所示：

<?php
 echo "<pre>";
 print_r($_REQUEST);
 echo "</pre>";
?>

我认为您已经意识到自己的写作和期望！

Answer 6

您也可以使用json代替字符串，请参见下文

$.ajax({
    type: "POST",
    url: hb_base_url + "consumer",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify({
        first_name: $("#namec").val(),
        last_name: $("#surnamec").val(),
        email: $("#emailc").val(),
        mobile: $("#numberc").val(),
        password: $("#passwordc").val()
    }),
    success: function(response) {
        console.log(response);
    },
    error: function(response) {
        console.log(response);
    }
});

在此ajax请求中， contentType表示您以哪种格式发送请求数据， dataType表示您希望以哪种格式接收数据

在这段代码中传递了json这是个好方法