php - 网站设计阻止数据发布到服务器

Question

我的网站有一个大问题。

我以一种似乎停止做任何事情的方式做到了这一点。

我有许多容器，页面的主要部分有三个小容器，它们彼此重叠，然后在它们旁边有一个较大的容器，其中包含主要内容。此主容器中显示的内容是从其他页面中提取的，因此每次按下链接时我都不必刷新整个页面。所以我有一个主页(索引)和一堆其他内容填充的页面。

现在，如果一个页面需要将数据发布到服务器进行处理，然后与用户确认，这不能像我习惯的那样用普通的 PHP 来完成，因为整个页面都被刷新并且它回到默认值。

所以我想，我知道 Ajax 可以做到这一点。我可以将数据发布到服务器，对其进行处理，然后在不加载任何内容的情况下更改该页面上的某些内容......

但我错了，它似乎仍然要刷新整个页面，这意味着我丢失了数据。同样对于 Ajax，我使用的是“post”而不是“get”，但出于某种原因它将数据放入地址栏。

有没有办法让我保持当前的结构并能够做到这一点，还是我注定要失败？

我们非常欢迎任何帮助、提示、代码或建议，感谢您抽出时间提供帮助。

哦，是的，如果我在索引页面之外查看内容，脚本运行得很好，只有当索引从另一个页面拉取它时才会运行。

Ajax :

unction pass() 
{

// Real Browsers (chrome)

if (window.XMLHttpRequest) 
{
    xhr = new XMLHttpRequest();
}

// IE

else if (window.ActiveXObject) 
{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

var oldPass = document.getElementById('oldPass').value;
var newPass = document.getElementById('newPass').value;
var newPassCheck = document.getElementById('newPassCheck').value;

xhr.open("POST","changeSettings.php");

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

var obj = {oldPass: oldPass, newPass: newPass, newPassCheck: newPassCheck};

xhr.send("data=" + JSON.stringify(obj));

xhr.onreadystatechange=function() 
{

    if (xhr.readyState==4) 
    {
        //grade = xhr.responseText;

        document.getElementById("myDiv").innerHTML = xhr.responseText;

        //document.write.grade;

        //alert ("Nice essay. Your grade is " + grade);
    }

}

return false;

}

这是原始页面:

<div id="content">
<form>

    <h1>This page is still under construction please do not attempt to use it!</h1>

        <p>
            Old Password:       <input type="password" name="oldPass" id="oldPass"><br />
            new Password:       <input type="password" name="newPass" id="newPass"><br />
            Retype Password:    <input type="password" name="newPassCheck" id="newPassCheck"><br />
                        <input type="submit" name="submit" value="Submit" onClick="return pass();">

        </p>

</form>

<div id="myDiv" name="myDiv"> </div>

</div>

Answer 1

仅仅因为您在表单中提供“POST 而不是 GET ”并不意味着 ajax 将以这种方式处理它。

实际需要做的是附加到submit表单的事件，然后让 AJAX 处理剩下的事情。在确认提交(甚至失败)后，您可以更新内容(或显示错误)。

为了使用 jQuery 保持简单...

<div id="content-container">
  <form method="post" action="/some/submission/page.php">
    <!-- flag to let the landing page know it's an ajax request
         this is optional, but IMHO it makes for a more seamless
         experience -->
    <input type="hidden" name="ajax" value="true" />

    <!-- controls go here -->
  </form>
</div>

这是您的表格。现在，您需要附加到提交事件。同样，为了简单起见，我使用 jQuery，但可以随意使用任何方法。我还在此处创建了一个非常通用的 Controller ，因此您大概可以将它用于页面上找到的每个表单，但这取决于您。 (而且，因为我们仍然装饰 <form>，所以没有 javascript 仍然会继续，但是当它存在时，它将使用漂亮的 ajax 外观和感觉)

// use .live to catch current and future <form>s
$('form').live('submit',function(){
  var target = $(this).prop('action'),
      method = $(this).prop('method'),
      data = $(this).serialize();

  // send the ajax request
  $.ajax({
    url: target,
    type: method,
    data: data,
    success: function(data){
      //proceed with how you want to handle the returned data
    }
  });
});

以上将采用页面上的正常形式，并通过 AJAX 提交。您可能还想绑定(bind)到 $.ajaxError这样您就可以处理任何故障。

此外，根据您从 AJAX 调用返回的内容，您可以将整个响应传回容器(成功调用中的 $('#content-container').html(data);)，或者如果它是 JSON 或纯文本，则显示其他数据。

哦，使用我的示例，您可能希望在您的发布页面中包含如下内容:

<?php
  $ajax_call = isset($_POST['ajax']);

  if (!$ajax_call){
    // not an ajax call, go ahead with your theme and display headers
  }

  // output content as usual

  if (!$ajax_call){
    // again, not ajax, so dump footers too
  }

(这样当它是 AJAX 时，只返回容器中的信息，否则照常显示页面，因为它们可能不支持 AJAX/JavaScript)。