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

您需要张贴页面或发布代码示例才能获得此问题的答案。

如果我要猜测，那就是你没有阻止提交表格，所以它就像你问的那样解雇了ajax请求，但也提交了表格。为了防止它，您需要选择提交按钮并使其返回false。这里有一个关于如何执行此操作的jquery的快速示例

$('input[type=submit]').click(function(){
  $.ajax({ ... request here ... });
  return false
});

或者您也可以捕获click事件并防止默认，

$('input[type=submit]').click(function(event){
  event.preventDefault();
});

由于我看不到您的任何代码，因此无法保证这是正确的。如果您发布代码，我可以修改它。与此同时，希望我猜到了！

Answer 2

仅仅因为您在表单中提供“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来简化，但可以随意使用任何方法。我也在这里创建一个非常通用的控制器，所以你可以将它用于页面上的每个表单，但这取决于你。（并且，因为我们仍然装饰<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提交。您可能还希望绑定到$.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）。

网站设计可防止数据发布到服务器

2 个答案: