将数据从 HTML 传递到 JQuery/Ajax

Question

我正在编写一家小型商店的代码，并且正在为我的问题寻找一个好的解决方案。我已经实现了一个快速结帐，一旦您在列出的其中一篇文章中按下 "Purchase Now"，它就会立即打开。此快速结帐只是一个 jQuery 弹出窗口（屏幕截图：http://puu.sh/fcDHt/63ecfd9817.jpg）。

我的问题是找到一个好的解决方案，将我的数据从 HTML（选定的文章 ID 和购买数量）传递到我的 Ajax 弹出窗口。从 ajax 弹出窗口中，我想稍后将其用于对我的预付款 php 文件的另一个 ajax 请求（不用担心我的 currency/prices/receiver 都是指定的服务器端）。

我的HTML部分文章：

<div class="portfolio-item-meta">
    <h5><a href="single_project.html">SockMonkee</a></h5>
    <p>Sed in velit a justo imperdiet scelerisque ut id leo. Cras quis tellus tellus, viverra varius est. Nulla sed cursus lorem lipsum dolor augue.</p>
        <div class="checkout-meta">
            <div class="checkout-info">
                <strong>Total:</strong> 30,00€
                <div class="region-badge">euw</div>
            </div>
            <div class="checkout-cta">
                <select name="quantity" id="quantity" style="display: inline-block;">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                </select>

                <a href="checkout.php" class="btn-1 ajax-popup" data-package="1" style="display: inline-block;">Purchase Now</a>
            </div>
            <div class="clearfix"></div>
        </div>
</div>

我想传递给我的 jQuery 弹出窗口的内容：

仅 div (euw)

的内容

<div class="region-badge">euw</div>

我选择的数量select（name="quantity" and id="quantity"）
我的 a-href 按钮的数据包。

这就是我的 Ajax-Popup:

$('.ajax-popup').magnificPopup({
    type: 'ajax',
    closeOnContentClick: false,
    closeOnBgClick: false
});

我想如何在 checkout.php

中使用那些传递的变量

$region = ...;
$quantity = ...;
$package = ...;

Answer 1

magnificPopup 有一个 open() 回调函数，它会在弹出窗口打开时触发。

$('.ajax-popup').magnificPopup({
  callbacks: {
    open: function() {
    },
    close: function() {
    }
  }
});

在此弹出窗口中，您想使用此元素（应该 return 触发弹出窗口的锚点 link）和 parent/sibling 选择器导航到您的徽章。

 region = this.parent().siblings(".checkout-info .region-badge").text();

根据需要存储结果。

Answer 2

您可以使用 magnificPopup Ajax 选项：

$('.ajax-popup').magnificPopup({
    type : 'ajax',
    ajax : {
        settings : {
            data : {
                region   : $('.region-badge').text(),
                quantity : $('#quantity').val(),
                package  : $('.ajax-popup').data('package'),
            }
        }
    },
    closeOnContentClick : false,
    closeOnBgClick      : false
});

编辑

$('.ajax-popup').mousedown(function(){
  var p = $(this).data('package'),
      q = $(this).parent().find('select').val(),
      r = $(this).parents('.checkout-meta').find('.region-badge').text();    
  $(this).magnificPopup({
      type : 'ajax',
      ajax : {
          settings : {
              data : {
                  region   : r,
                  quantity : q,
                  package  : p,
              }
          }
      },
      closeOnContentClick : false,
      closeOnBgClick      : false
   });
});

JSFiddle

或者在使用 get 方法时更新 .ajax-popup 的 href 属性：

$('.ajax-popup').click(function(){
    var p = $(this).data('package'),
        q = $(this).parent().find('select').val(),
        r = $(this).parents('.checkout-meta').find('.region-badge').text();
    $(this).attr('href', 'checkout.php&region='+r+'&quantity='+q+'&package='+p)
})
.magnificPopup({
    type                : 'ajax',
    closeOnContentClick : false,
    closeOnBgClick      : false
});

将数据从 HTML 传递到 JQuery/Ajax

Pass Data from HTML to JQuery/Ajax

javascript

php

ajax

jquery

magnific-popup