YZRHANYU 2022-06-14 21:31 采纳率: 57.1%
浏览 64
已结题

$(function(){}页面加载后只希望执行一次的函数,在异步请求后再次执行了

在 $(function(){}中写了调用了一个函数,当页面加载完执行,查询出分页数据,第一次打开查询无条件,页码1,条数10,当用户填写查询条件后,点击查询按钮,再次调用查询函数,将参数传给查询函数

执行代码,发现在输入查询条件后点击查询,会发起请求查数据,但是在本次查完之后会再次执行页面加载后第一次查询的函数

<script type="text/javascript">
$(function(){
    // 页面第一次打开调用查询函数,传参默认第一页,十条记录,无条件
    //  这里的函数只希望在第一次加载页面的时候执行,但是当点击查询按钮,查询函数执行后会再次执行这里的函数
    queryActivityConditionForPage(这里四个空的字符串(提交问题不让过-.-),1,10);
    // 其他绑定单击事件函数代码

    // 查询按钮绑定单击事件,点击查询收集数据,并调用函数执行查询
    $("#queryActivitiesWithConditions").click(function (){
        // 收集数据,验证数据合法
        var name = $("#queryName").val();
        var owner = $("#queryOwner").val();
        var startDate = $("#queryStartDate").val();
        var endDate = $("#queryEndDate").val();
        if (startDate!=""&&endDate!=""){
            if (endDate <= startDate){
                alert("结束日期不能比开始日期小");
                return;
            }
        }
        queryActivityConditionForPage(name,owner,startDate,endDate,2,3);
        alert('after')
        // queryActivityConditionForPage(1,1,1,1,2,3);
        // 发送请求
    })
});    
//  查询函数
function queryActivityConditionForPage(name,owner,startDate,endDate,pageNo,pageSize){
  alert('method execute')  // 这里弹窗显示函数被执行
  $.ajax({
      url: "workbench/activity/queryActivityConditionForPage.do",
      type:"get",
      data:{
          "pageNo":pageNo,
          "pageSize":pageSize,
          "name":name,
          "owner":owner,
          "startDate":startDate,
          "endDate":endDate
      },
      dataType: "json",
      success:function (res){
          $.each(res,function (index,element){
              $("#activityList").append('<tr class="active">' +
                  '<td><input type="checkbox" /></td' +
                  '><td><a style="text-decoration: none; cursor: pointer;" >'+element.name+'</a></td>' +
                  '<td>'+element.owner+'</td><td>'+element.startDate+'</td><td>'+element.endDate+'</td></tr>')
          })
      }
  })
}
</script>

debug 以及弹窗测试显示在用户点击输入查询条件点击查询按钮后
分别执行了两次 queryActivityConditionForPage 函数
第一次函数中的参数为用户输入的查询参数
第二次的函数执行的是 页面加载完之后的函数
queryActivityConditionForPage(这里四个空的字符串(提交问题不让过-.-),1,10); ,这行代码又执行了一次

我的解答思路和尝试过的方法

原因没有找到,$(function(){} 这里的函数为什么会因为异步请求再次执行 ?

我想要达到的结果

当页面加载后,执行一次无条件查询函数
queryActivityConditionForPage(这里四个空的字符串(提交问题不让过-.-),1,10);
当用户输入查询条件后点击查询按钮,执行queryActivityConditionForPage("name","owner","start","end",1,10);

  • 写回答

4条回答 默认 最新

  • YZRHANYU 2022-06-15 10:32
    关注

    已解决,是 button 的问题,button 属性为submit 给我重新提交了

    <%--                <button type="submit" class="btn btn-default" id="queryActivitiesBtn">查询</button>--%>
                    <button type="button" class="btn btn-default" id="queryActivitiesBtn">查询</button>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 6月23日
  • 已采纳回答 6月15日
  • 创建了问题 6月14日

悬赏问题

  • ¥15 用ucinet怎么计算子群体个数和核心边缘结构拟合度
  • ¥15 nrf52810-c三个a 程序
  • ¥15 lego-loam跑出来的roll误差很大
  • ¥50 求一个半透明没有锯齿的圆角窗体的实现例子
  • ¥15 STM32cubeMX里的FreeRTOS无法释放内存
  • ¥15 CATIA有些零件打开直接单机确定终止
  • ¥15 请问有会的吗,用MATLAB做
  • ¥15 phython如何实现以下功能?查找同一用户名的消费金额合并—
  • ¥15 孟德尔随机化怎样画共定位分析图
  • ¥18 模拟电路问题解答有偿速度