javascript - 页面加载时的 Jquery 设置页面状态

Question

我正在尝试使用状态来处理不同的 ajax 数据和调用。在初始页面加载时，我想加载某个状态。这有效，ajax 调用返回一些 html 并将其放入表中。

然而，一旦我与页面交互，它会尝试正确加载，但随后会重新加载第一个状态并在 url 中设置“?#”。我第二次尝试时状态发生变化并添加了新的 html。如果我删除 ?# 并重新加载它会恢复奇怪的行为。是因为我的声明方式吗？提前致谢!

代码:

 var state = "images";
 var items = [];

 $(document).ready(function(){
   getData();
 });

var getData = function () {
            $.ajax({
            type: "POST",
            url: "handler.php",
            data: {data: items, state: state},
            cache: false,
            success: function (data) {
               updateTable(data);
            },
            abort: function (data) {
               alert('abort');
            },
            error: function (data) {
               alert('error');
            }
            });
   }

    var updateTable = function(data) {
            $("#dataHolder").empty();
            $("#dataHolder").append(data);
            $("h2").html(state);
    }

    $("#view").on("click", function() {
            items = $("#slide").val();
            state = "videos";
            getData();
    });

Answer 1

使用 preventDefault() 方法来阻止链接点击的默认行为，即导航到新页面。如果您这样做，您的页面将不会重新加载。

$("#view").on("click", function(e) {
  e.preventDefault();
     items = $("#slide").val();
     state = "videos";
     getData();
});

此外，全局变量也不是传输数据的好主意。最好更新您的 getData 方法以接受 2 个参数

var getData = function (state,items) {
  //use state and items as needed
}

当你调用时，传递值

$("#view").on("click", function(e) {
  e.preventDefault();
     var slideItems= $("#slide").val();       
     getData("vides",slideItems);
});