在初始页面加载时加载目标 ajax php 文件 - Load target ajax php file on initial page load

Load target ajax php file on initial page load

本文关键字：加载目标 ajax php 文件 | 更新日期: 2023-09-27

我在php中有一个AJAX设置来返回和显示来自DB的一些数据：

$("#sub_shops").click(function(){
                    var range_start = $("#start_shops").val();
                    var range_end = $("#end_shops").val();
                    $.ajax({
                        url:'process_shops.php',
                        data:{start:range_start,end:range_end},
                        type:'POST',
                        success:function(data){
                            $("#result_shops").html(data);
                        }
                    });
                });

第 #start_shops 页和#end_shops页有两个输入，填写数据并单击#sub_shops页面将输入中的值发送到process_shops.php。处理后，它以#result_shops显示结果：

<div id="result_shops"></div>

问题：

如果为#start_shops和#end_shops输入设置了默认值，如何将其值发送到process_shops.php并在初始页面加载时以#result_shops显示处理的结果？

提前感谢！

首先将代码分解为一个函数：

function updateResultShops()
{
    var range_start = $("#start_shops").val();
    var range_end = $("#end_shops").val();
    $.ajax({
       ...
}

然后从单击处理程序调用它：

$("#sub_shops").click(updateResultShops);

并在文档加载中！

$(document).ready(updateResultShops);

现在，任何初始值都将在页面加载时以及每次单击时立即发送。容易！

如果值已预先加载到输入中，我认为最简单的方法是

$("#sub_shops").click(function(){
    // your code...
}).trigger('click');

您可以将匿名函数转换为函数。

function loadAjax()
{
   /* Commented this part since it wont run on the snippet.
   var range_start = $("#start_shops").val();
   var range_end = $("#end_shops").val();
   $.ajax({
     url:'process_shops.php',
     data:{start:range_start,end:range_end},
     type:'POST',
     success:function(data){
       $("#result_shops").html(data);
     }
   });
   
   */
  alert("blablabla");
}
$("#sub_shops").click(loadAjax); //Add event to click
$(document).ready(loadAjax); //Add event to run when page loads.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color: black; height: 50px; width: 50px;" id="sub_shops"></div>

但是，如果您希望将该功能留在单击中...您可以这样做：

$(document).ready($("#sub_shops").click);