是否可以在不加载页面的情况下刷新 div？

Question

已解决-排序---

window.location.reload();在我的代码中，我有提交按钮关闭 div，工作。

// Collapse Panel on submit
$("div#panel").on('submit', function() {
window.location.reload();
$("div#panel").slideUp("slow");
$("#toggle a").toggle();

return false;
});

我一直在寻找这个答案，但每次都感到更加沮丧。

场景：

1. 我有一个向下滑动的 div 用于登录（jquery、css）。

2. 该 div 中的登录表单本身最初是使用 PHP 动态创建的（通过基于 SESSIONS 中的值的 if else 语句 - PHP echo 加载表单）。

3.如果我输入正确的登录名并单击提交，我将关闭 div (jquery on(submit))，以便用户可以看到该页面。该页面使用 xajax/PHP 函数从 php 文件加载动态内容。

4.问题 - 如果我单击以重新打开 div，它仍会显示我的登录表单。（因为页面尚未重新加载）。但是我的页面导航栏使用 xajax/PHP 重新加载以显示正确的菜单功能。

1. 我的问题是，我希望 div 在提交后刷新，或者在任何事件更改时刷新（如果有帮助），以便它看到新会话数据并进行相应调整。我不想将另一个 HTML 页面加载到 DIV 中，所以 load(whatever.html) 不是我想要的。

如果我在登录后使用 f5 刷新整个页面并拉下 div，登录表单将不存在，因为我的 SESSIONS 现在声明我是登录用户，不再是需要登录的访客。并且该 div 不只是用于登录，它会包含其他链接和快捷方式，因此在您整个访问期间登录时都会使用它。

index.php

<div id="left" class="left">

         <?php      if(isset($_SESSION['admin'])){
        if($_SESSION["admin"] == "1") {
            echo "YOU ARE LOGGED IN AS AN ADMIN";
        }
    }

    if(isset($_SESSION['userID'])){
        echo "YOU ARE LOGGED IN AS A USER";
    }

    else { echo  '<form class="clearfix" id="loginForm" name="loginForm" action="javascript:void(null)" onsubmit="xajax_login(xajax.getFormValues(\'loginForm\'));">'; 

slide.js

$(document).ready(function() {

// Expand Panel
$("#open").click(function(){
    $("div#panel").slideDown("slow");

}); 

// Collapse Panel
$("#close").click(function(){
    $("div#panel").slideUp("slow");

}); 

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
    $("#toggle a").toggle();
}); 


// Collapse Panel on submit
$("div#panel").on('submit', function() {
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
return false;
});
// if there is an error, close div and allow link on main content page to be clicked to reopen div
$("#content").on('click', "#tryAgain",function() {
    $("div#panel").slideDown("slow");
    $("#toggle a").toggle();
}); });

Answer 1

即使是纯JavaScript也很容易实现，不需要jQuery。

只需制作一个JS函数，重置表单或div中的输入字段，并在每次需要“刷新”div或表单的内容时调用它。

如果您粘贴 div 定义，我们可以为您提供更具体的建议以及实际执行此操作的 JS 代码。

Answer 2

好吧，如果您在页面加载时将值加载到表单中，那么当通过 ajax 提交表单时它们就会存在是有道理的。您真正需要做的是首先在 div “关闭”时清除表单值。

$(#formselector).on('submit',function(){
    //your ajax login and page load code

   //then:
   $('#formselector').find('input').attr('value','');

});    

更新

根据您的评论，您真正需要做的是在弹出表单之前检查用户是否真正登录。有一些技术可以做到这一点，但我建议在您的表单提交的 php 脚本中，在处理登录之前，检查您的 $_COOKIE 变量以查看用户是否被识别。这还需要修改您的登录脚本，以确保它将用户数据存储在 $_COOKIE 中，类似于它在 &_SESSION 变量中存储数据的方式。

此时，您的 php 脚本将根据用户状态提供两种不同的响应，并且启动表单下拉菜单的 javascript 代码将在显示登录表单之前检查它是否获得“未找到用户”响应.

Answer 3

要仅刷新特定 div 的内容，请使用以下命令：

$("#abc").load(location.href + " #abc>*", "")

#abc 表示要定位的 div。