javascript - 使用 javascript 隐藏、加载和显示 div

Question

我有几个页面彼此交互，用id加载页面，如下:

在 process.html 中

<div id="guest_details"> </div>

<div id="first_start"> </div>
<script>
<! -
$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')
$('#guest_details').hide('slow');
$('#first_start').SlideUp('slow')
->
</Script>

在 guest_details.html 中

<form action="guest_details.php" <form method="POST" id="guest">
<!-- Some cell here -->
<a onclick="$('#guest').submit();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a>
</Form>

我想要的是当提交按钮被点击时:

1. 发送到 guest_details.php 的数据
2. 如果数据已发送则隐藏
3. 放映节目

但是当我像上面那样做时，那行不通了，有人可以提供如何纠正的线索吗？

非常感谢

Answer 1

看你之前的问题和你的标签，我假设你不太了解 AJAX。

你需要

1.异步发布表单(无需重新加载页面，使用 AJAX)。
2. 成功发送数据后，进行dom操作。

我建议使用 jquery 进行 AJAX 发布。

这里是一个示例代码，使用 jquery:-

$('#guest_details').load('?p=guest_details.html');
$('#first_start').load('?p=first_start.html')

function ajaxPostForm()
{    
  $.post('guest_details.php', 

  function(data) {

    //Dom manipulation
    $('#guest_details').hide('slow');
    $('#first_start').SlideUp('slow')

  });

 }

guest_details.html 中的表单 html 需要像这样:-

<form method="POST" id="guest">
<!-- Some cell here -->
<a onclick="ajaxPostForm();" class="button" id="first_start"> <span> <?php echo $button_submit;?> </span> </a>
</Form>

上面给出的 $.post 是一个非常基本的 AJAX 帖子。您可以在 Jquery Post 中添加更多功能.

另外如果你想发布整个表格，你可以引用jQuery Form Plugin

更新
我想这次我更好地理解了你的问题。在你说这个的更新中-

by default guest_details.html is showing and first_start.html is hiding

将这些部分称为 guest_details 和 first_start 会更有意义，因为 guest_details.html 可能意味着页面 guest_details.html 您可能已经在另一个窗口中打开了。

无论如何，我确定您指的是页面 process.html 中的部分，因为您使用了 jquery .load()。我们将 first_start.html 和 guest_details.html 分别称为 first_start 和 guest_details 部分。

根据您的更新，您的意思是:-

初始状态
显示 guest_details 部分，隐藏 first_start

案例/情况
当提交 guest_details 部分内的表单时，隐藏 guest_details 部分并显示 first_start 部分。

在这种状态下，guest_details 被隐藏，first_start 被显示，first_start 上的按钮可以被点击，这样 >guest_details 部分再次显示。

在这些状态下，一个部分被隐藏，另一个部分被显示，重新加载/刷新页面应该保留这些状态。

如果上面是完整的场景，这里是代码:-

<script>
<! -
initiateSections(<?php echo $this->session->data['display_state']; ?>);
//state can have "display_first_start" or "display_guest_details"
function initiateSections(state)
{
    $('#guest_details').load('?p=guest_details.html');
    $('#first_start').load('?p=first_start.html')


    if(state == "display_first_start")
    {
        displayFirstStart();
    }
    else
    {//If chosen or by default
        displayGuestDetails();
    }

}

function ajaxPostGuestDetails()
{    
  $.post('guest_details.php',  //In this post request - set $this->session->data['display_state'] = 'display_first_start'; in php

  function(data) 
  {
        //Dom manipulation
    displayFirstStart();
  });

}

function ajaxPostFirstStart()
{    
  $.post('first_start.php',  //In this post request - set  $this->session->data['display_state'] = 'display_guest_details'; 

  function(data) 
  {
    //Dom manipulation
        displayGuestDetails();
  });

}

function displayGuestDetails()
{
    $('#first_start').hide('slow');
    $('#guest_details').slideUp('slow');
}

function displayFirstStart()
{
    $('#guest_details').hide('slow');
    $('#first_start').slideUp('slow');
}
->
</Script>