将数据从 HTML 传递到 JQuery/Ajax

Pass Data from HTML to JQuery/Ajax

本文关键字：JQuery Ajax 数据 HTML      更新时间：2023-09-26

我正在编写一个迷你商店，我正在努力为我的问题找到一个好的解决方案。我已经实现了快速结帐，一旦您在列出的一篇文章中按"立即购买"，该结帐就会立即打开。这个快速结帐只是一个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弹出窗口的内容：

仅该div 的内容 （euw）

<div class="region-badge">euw</div>
  1. 我选择的数量（名称="数量"和id="数量"）
  2. 我的 a-href 按钮的数据包。

这就是我如何称呼我的Ajax-Popup：

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

我想如何在结帐中使用这些传递的变量.php

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

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

magnificPopup 有一个 open（） 回调，该回调在弹出窗口打开时触发。

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

在此弹出窗口中，您希望使用 this 元素（应返回触发弹出窗口的锚链接）和父/同级选择器导航到您的徽章。

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

根据需要存储结果。

相关文章：