Javascript 如何基于url触发ajax调用

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

例如，如果用户转到页面网站\u url/？优惠券\u id=99，他将获得页面网站\u url，并弹出其中包含ajax操作的窗口（ajax获取id=99的优惠券帖子类型的数据并显示其值）

如果用户进入PageWebsite\u url/page1/？优惠券\u id=99-他将获得PageWebsite\u 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');

---

但是如何基于url触发这个ajax请求呢

您可以在页面加载时从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-toucon.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];
      }
    }
  }

---

让dom中的函数准备就绪，以便在页面加载时立即运行

$（document）.ready（function（）{}）

此函数在jQuery（document）.ready（function（$）{}）中；是的，但你也有它在点击处理程序中，把它移出点击处理程序，并放入它自己的函数中，比如说

popuload（）

，如果你需要在点击时调用它，也可以调用该函数。我考虑过这一点，但这样的函数可以在网站的所有页面上运行。如果用户转到简单页面，而没有/？优惠券\ U id=99，该怎么办。据我所知，这样的函数在这种情况下会出现错误，只需将脚本排在必要的页面上即可。由于您使用Wordpress，我假设您正在为优惠券使用自定义的帖子类型？是的，但优惠券也可以从帖子中显示（带有短代码），也可以在侧栏中按短代码显示。好的，但是如果优惠券位于侧栏或帖子中，则它将在单击右键时触发？您的问题是根据页面URL触发弹出窗口。我已更新了我的答案，以显示如何有条件地将脚本加载到页面。示例：用户位于页面网站/帖子上。他点击按钮，进入网站/post？优惠券id=99-但这不是优惠券页面，他仍然在post页面上，所以脚本在这种情况下不起作用

  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];
      }
    }
  }

  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' });
                }
            }
        }
    });
  };