javascript - 将数据从 HTML 传递到 JQuery/Ajax

Question

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

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

文章的 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 Popup 的内容:

只有那个 div 的内容 (euw)

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

1. 我选择的数量(name="quantity"and id="quantity")
2. 我的 a-href 按钮的数据包。

这就是我调用 Ajax-Popup 的方式:

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

我想如何在我的 checkout.php 中使用那些传递的变量

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

Answer 1

你可以使用 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
});