Ajax:只在元素存在的情况下调用Ajax

Ajax : only call the ajax if element existing

本文关键字：Ajax 情况下 调用 存在 元素      更新时间：2023-09-26

例如，我有一个.ajax()函数，如下所示：

function trend() {
    return $.ajax({
        url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
        type: 'get',
        success: function(data) {
        }
    });
}

它工作正常，但我想添加一个if语句来检测$(".numberOfProfile0").html()是否存在，并且只在$(".numberOfProfile0").html()存在时执行

我试过下面，但似乎不对

if ($(".numberOfProfile0").length) {
    function trend() {
        return $.ajax({
            url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
            type: 'get',
            success: function(data) {
            }
        });
    }
}

-更新：

让我们展示整个应用程序这就是功能：

  if($(".numberOfProfile0").html().length){
                    function trend1() {
                          return $.ajax({
                            url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
                            type: 'get',
                            success: function(data) {
                            }
                          });
                        }
                    }
$.when(trend1()).done(function(trend1_data) {
                        //do something
}
请记住jQuery选择器不是字符串。使用jQuery，正确的方法是类似$('.selector').val().length , $('.selector').html().length在代码中使用$(".numberOfProfile0").html().length > 0： 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numberOfProfile0">lorem</div>
<script>
if ( $(".numberOfProfile0").html().length > 0 ) {
  
   alert("success");
  
 // your function:
  
   //function trend() {
        //return $.ajax({
           // url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + //$(".numberOfProfile0").html(), //getting the api
           // type: 'get',
            //success: function(data) {
            //}
       // });
   // }
  
  }
</script>

我认为应该是

function trend() {
    if ( $(".numberOfProfile0").length ) {
        return $.ajax({
            url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
            type: 'get',
            success: function(data) {
            }
        });
    }//if()
    else
    {
      return false; //or any other appropriate value
    }
}//trend()

使用($(".numberOfProfile0").html() !== '')表示如果类为.numberOfProfile0的元素不是空

function trend() {
   if ($(".numberOfProfile0").html().trim() !== '') { 
     $.ajax({
        url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
        type: 'get',
        success: function(data) {
        }
     });
   }
}

你做错了！您正在if中定义函数，应该在if中调用它。

首先定义函数。

function trend() {
    return $.ajax({
        url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
        type: 'get',
        success: function(data) {
        }
    });
}

那就称之为

if ($(".numberOfProfile0").length) {
    trend();   
}

或

您可以将if检查放入函数中。

function trend() {
        if ($(".numberOfProfile0").length) {
             return $.ajax({
                 url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
                 type: 'get',
                 success: function(data) {
                 }
             });
       }
       else{
            return -1;
       }
    }

如果元素存在，可以在三进制的$.when()中使用.is()返回trend()，否则返回null到$.when()；句柄元素不存在于CCD_ 15中。注意，如果在.done() 中处理响应，则可以删除$.ajax()中的success选项

function trend() {
  return $.ajax({
    url: "/dashboard/getTrend'"
         + "?period=30d" 
         + "&profileId=" 
         + $(".numberOfProfile0").html(), //getting the api
    type: "get"
  });
}
$.when($(".numberOfProfile0").is("*") ? trend() : null)
.done(function(trend1_data) {
  if (trend1_data === null) {
    // handle `$(".numberOfProfile0")` not existing in `DOM`
  } else {
    // handle `trend1_data` not being `null`, element exists
    // do something
  }
})

您应该检查aJax的before_send回调中是否存在元素，如果不存在，则取消aJax请求。

function trend() {
        return $.ajax({
            url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" +        $(".numberOfProfile0").html(), 
            type: 'get',
            before_send: : function( xhr ) {
              if ($(".numberOfProfile0").length > 0  && $(".numberOfProfile0").html().trim() == ''){
                return false;
              }
            }
            success: function(data) {
            }
        });
    }

上面的代码片段应该适用于您的情况。

相关文章：