使用Ajax單擊時的POST數據屬性

Question

我有以下html：

<div class="actor_container span-3 column" data-url="http://www.spotlight.com/5094-1276-6177" data-age-min="31" data-age-max="40" data-height="180" data-weight="72" data-gender="male" data-eye="green">
....
</div>

用戶單擊圖像時是否可以發布每個數據屬性，然后在另一個文件中我可以使用$ _GET檢索它們？

因此，例如：

$('.actor_container').on("click", function (e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                data: $(this).data("url"),
                ...rest of code goes here...
            });
        }); //on

然后在我的PHP文件中，使用類似：

echo htmlspecialchars($_GET['url']);

更新從下面的答案，這是我的JS代碼（我已經發布了完整的單擊功能，因此您可以看到）：

$('.actor_container').on("click", function (e) {
            $('.loading_overlay').show();
            $('#actor_data').hide();
            $('#actor_data_container').css('top','0'); 
            e.preventDefault();
            $.ajax({
                url: "http://79.170.44.105/samskirrow.com/nial/wp-content/plugins/nial-customizations/front-end/actor-profile.php?url=" + $(this).data("url"),
                type: 'GET',
                success: function(res) {
                    var data = $.parseHTML(res); 
                    // append all data
                    $('#actor_data').html(data);
                    $('#actor_data').show();
                    $('.loading_overlay').hide();
                }
            });


           $.ajax({
                type: 'POST',
                data: ({ 
                    "age-min" : $(this).data("age-min"), 
                    "age-max" : $(this).data("age-max") 
                }),
            });

});

然后在我的PHP文件中，我有：

var_dump($_POST);

哪個返回

array(0) { }

Answer 1

有一種方法可以序列化您的數據：

$('.actor_container').on("click", function (e) {
    e.preventDefault();
    var length_data = Object.keys($(this).data()).length;
    var data = [];
    for (i = 0; i < length_data; i++) {
      var str = Object.keys($(this).data())[i]
      data.push({ name : str, value : $(this).attr('data-'+str) })
    }
    $.post("your_page.php", data);
})

在您的php網站上，您可以使用以下命令訪問數據：

    $_POST['url']
    $_POST['age-min']
    $_POST['weight']
    ...

為了嘗試序列化，這里是JSFiddle

更新

混合您的2個ajax調用：

$('.actor_container').on("click", function (e) {
    e.preventDefault();
    $('.loading_overlay').show();
    $('#actor_data').hide();
    $('#actor_data_container').css('top','0'); 
    var length_data = Object.keys($(this).data()).length;
    var data = [];
    for (i = 0; i < length_data; i++) {
      var str = Object.keys($(this).data())[i]
      data.push({ name : str, value : $(this).attr('data-'+str) })
    }
    $.ajax({
      url: "http://79.170.44.105/samskirrow.com/nial/wp-content/plugins/nial-customizations/front-end/actor-profile.php",
      data : data,
      type: 'GET',
      success: function(res) {
        var data = $.parseHTML(res); 
        // append all data
        $('#actor_data').html(data);
        $('#actor_data').show();
        $('.loading_overlay').hide();

    });

Answer 2

用戶單擊圖像時是否可以發布每個數據屬性，然后在另一個文件中我可以使用$ _GET檢索它們？

沒有。

如果在一個請求中發布它們，則數據將顯示在該請求中（如果使用表單編碼，則在$_POST ）。

如果您希望$_GET在以后發出一些請求時在其中包含數據，則需要將數據放入該請求的查詢字符串中（這可能會使使用Ajax進行POST冗余）。

您可以使用Ajax將它們發布，然后將它們存儲在某個地方（例如在會話中），然后從存儲它們的位置讀取它們，而不是在以后的請求中使用$_GET 。

Answer 3

我將建議您如何在jquery中使用$ _POST方法。

你的例子

$('.actor_container').on("click", function (e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                data: ({ "url" : $(this).data("url"), "second_key" : variable_or_value }),
                ...rest of code goes here...
            });
        }); 

在上面的數據示例中，我給出了一個key ，該key是url並給出了值。 您可以通過$_POST['url']從PHP訪問值。 可以通過$_POST['second_key']訪問第二個