如何根据 url 触发 ajax 调用

How to trigger ajax call based on url

本文关键字：ajax 调用 触发 url 何根      更新时间：2023-09-26

>我正在建立优惠券网站。我需要根据页面的网址触发 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 请求呢？

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

$(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');

我想我找到了可以帮助我的函数。现在测试。

  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' });
                }
            }
        }
    });
  };
相关文章：