如何根据url触发ajax调用答案

【问题标题】：How to trigger ajax call based on url如何根据url触发ajax调用
【发布时间】：2014-12-26 19:47:01
【问题描述】：

我正在建立优惠券网站。我需要根据页面的 url 触发 ajax 操作。让我解释。

例如，如果用户访问页面 website_url/?coupon_id=99 - 他将获取页面 website_url 并在其中弹出带有 ajax 操作的弹出窗口（ajax 获取 id=99 的优惠券帖子类型的数据并显示其值）。

如果用户访问页面 website_url/page1/?coupon_id=99 - 他将获得页面 website_url/page1/ 和相同的弹出窗口。

你可以在一些优惠券网站上看到这个逻辑，例如，coupondunia.in

我创建了 ajax 操作，它正在工作

function coupon_get_code(){
    $couponid = $_GET['couponid'];  
    $code = get_post( $couponid );
    if( !empty( $code ) ){
        $offer_coupon = get_post_meta( $code->ID, 'coupon', true );
        $response .= '<div class="coupon_modal_coupon">'.$offer_coupon.'</div>';
    }
    else{
        $response = __( 'Offer does not exists', 'textdomain' );
    }
    echo  $response ;
    die;
}
add_action('wp_ajax_ajax_code', 'coupon_get_code');
add_action('wp_ajax_nopriv_ajax_code', 'coupon_get_code');

目前我做了基于点击触发ajax动作，像这样

    // Coupon Modal
  $( '.offer_coupon.masked_coupon:not(.expired_coupon)' ).live("click", function(e){
    var $this = $(this);
    var couponid = $this.data('couponid'); 

    $.pgwModal({
        url: translation.ajax_url + "?action=ajax_code&couponid=" + couponid,
        titleBar: false,
        ajaxOptions : {
            success : function(response) {
                if (response) {
                    $.pgwModal({ pushContent: response });
                } else {
                    $.pgwModal({ pushContent: 'An error has occured' });
                }                
            }
        }
    });

  });

但是如何根据url触发这个ajax请求呢？

【问题讨论】：

准备好 dom 中的函数，以便在页面加载后立即运行。 $(document).ready(function(){})
这个函数在 jQuery(document).ready(function($) {});
是的，但你也有它在点击处理程序中将它移出它并进入它自己的函数说popupload()如果你需要在点击时调用它也调用函数。

标签： javascript jquery ajax wordpress

【解决方案1】：

您可以在页面加载时从 URL 中获取最后一个数字字符（等于优惠券 ID），而不是在点击时从数据属性中获取。

$(window).on('load', function() {

  // Get the last numbers from the current page URL using Regex
  var couponid = window.location.href.match(/\d+$/);

  $.pgwModal({
    url: translation.ajax_url + "?action=ajax_code&couponid=" + couponid,
    titleBar: false,
    ajaxOptions : {
        success : function(response) {
            if (response) {
                $.pgwModal({ pushContent: response });
            } else {
                $.pgwModal({ pushContent: 'An error has occured' });
            }                
        }
    }
 });

});

将 jQuery 放入名为 ajax-coupon.js 的文件中，并有条件地将脚本加入队列。

// Conditionally enqueue your script only if the template coupons.php is used to display the page.
function my_scripts_method() {

  // Register your script location, dependencies and version
  wp_register_script('ajax-coupon', get_template_directory_uri() . '/js/ajax-coupon.js', array('jquery'), '1.0' );

  // Check if the current page is using coupons.php, if so, load the script.
  if ( is_page_template( 'coupons.php' ) ) {
    wp_enqueue_script('ajax-coupon');
  }

}

add_action('wp_enqueue_scripts', 'my_scripts_method');

【讨论】：

我考虑过这个，但是这样的功能将适用于网站的所有页面。如果用户转到简单页面，没有 /?coupon_id=99 怎么办。据我了解，在这种情况下，这样的功能会出错
只在必要的页面上排队脚本。由于您使用的是 Wordpress，我假设您正在为您的优惠券使用自定义帖子类型？
是的，但是优惠券也可以从帖子中显示（带有短代码），也可以通过短代码显示在侧边栏中。
好的，但是如果优惠券在侧边栏或帖子中，那么它会在点击时触发对吗？您的问题是关于根据页面 URL 触发弹出窗口。我已经更新了我的答案，以展示如何有条件地将脚本加载到页面。
示例：用户在页面网站/帖子上。他点击按钮并转到 website/post?coupon_id=99 - 但这不是优惠券页面，他仍然在有帖子的页面上，所以脚本在这种情况下不起作用

【解决方案2】：

我想我找到了可以帮助我的功能。立即测试。

  function GetURLParameter(sParam){
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
      var sParameterName = sURLVariables[i].split('=');
      if (sParameterName[0] == sParam) 
      {
        return sParameterName[1];
      }
    }
  }

所以我的ajax触发器可以是这样的

  var coupontrigger = GetURLParameter("couponid");
  if(coupontrigger){
    $.pgwModal({
        url: translation.ajax_url + "?action=ajax_code&couponid=" + coupontrigger,
        titleBar: false,
        ajaxOptions : {
            success : function(response) {
                if (response) {
                    $.pgwModal({ pushContent: response });
                } else {
                    $.pgwModal({ pushContent: 'An error has occured' });
                }
            }
        }
    });
  };

【讨论】：