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>

我想要的是点击提交按钮然后：

发送给guest_details.php的数据
如果数据已发送，则隐藏＆lt; div id =“guest_details”＆gt; ＆LT; / DIV＆GT;
显示节目＆lt; div id =“first_start”＆gt; ＆LT; / DIV＆GT;

但是当我像上面那样做，那不起作用，有人能给出一个如何纠正的线索吗？

非常感谢

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

<强>更新
我想我这次更了解你的问题。在你的更新内你说这个 -

默认情况下，guest_details.html是显示和first_start.html隐藏

将这些部分称为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>

Answer 2

您需要实现ajax才能将数据发布到php

http://api.jquery.com/jQuery.ajax/

使用ajax成功发布成功活动。

一旦ajax成功，就进行html操作

success: function(data) {

  }

使用javascript隐藏，加载和显示div

2 个答案: