使用 AJAX 时页面不断刷新答案

【问题标题】：Pages Keeps Refreshing While Using AJAX使用 AJAX 时页面不断刷新
【发布时间】：2014-11-02 21:08:16
【问题描述】：

我正在创建一个包含表单的模式框。一旦使用 ajax 和 php 提交，表单将返回输入，然后模式框应该消失。问题是虽然结果显示了几秒钟，然后框消失并且页面刷新。

<button class="toggleModal">trigger iModal</button>

<div class="modal">

<header>
  <h2>Other Symptoms</h2>
  <i  class="fa fa-times close toggleModal"></i>
</header>

<section>     
   <form class="js-ajax-php-json" method="post" accept-charset="utf-8">
    <textarea name="textareathebeast"  row="4" cols="40" placeholder="some text"></textarea><br>
    <input class="modalSubmit" type="submit" name="submit" value="submit">
  </form>
</section>

</div>

<div class="the-return">
  [HTML is replaced when successful.]
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

$(function(){  

$('.toggleModal').on('click', function (e) {

     $('.modal').toggleClass('active');

});

$(".js-ajax-php-json").submit(function(){
var data = {
  "action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
  type: "POST",
  dataType: "json",
  url: "response.php",
  data: data,
  success: function(data) {
    $(".the-return").html(
      "Text Message: " + data["textareathebeast"]
    );
  }
});
return true;    
});

});
</script>

<?php
  if (is_ajax()) {
    if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists
      $action = $_POST["action"];
      switch($action) { //Switch case for value of action
        case "test": test(); break;
     }
  }
}

//Function to check if the request is an AJAX request
function is_ajax() {
   return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

function test(){
  $return = $_POST;

//Do what you need to do with the info. The following are some examples.
//if ($return["favorite_beverage"] == ""){
//  $return["favorite_beverage"] = "Coke";
//}
//$return["favorite_restaurant"] = "McDonald's";

$return["json"] = json_encode($return);
echo json_encode($return);
}
?>

【问题讨论】：

标签： php jquery ajax

【解决方案1】：

看起来它刷新的原因是因为你在$(".js-ajax-php-json").submit(function(){行之后调用了提交函数而不阻止默认操作你需要阻止它：

e.preventDefault();

如果不是，您可以尝试阻止默认附加到单击事件而不是提交事件。

【讨论】：

另外，请注意，您目前在提交功能的末尾使用return true;。您可以简单地将其更改为 return false;。
同意@OhGod为什么我很难理解为什么如果他不希望表单刷新/提交他使用的是提交按钮而不是普通按钮
提交事件很方便，因为它们可以通过几种不同的方式触发。您可以单击给定表单中的任何提交按钮，或在可聚焦的表单元素上按 Enter 键等。根据您的需要，阻止默认提交行为可能比指定触发 ajax 的六个处理程序更容易请求。
@RaphaelSerota 哦，我没想到，谢谢

【解决方案2】：

提交表单意味着许多默认行为，例如使用提交结果重新加载当前页面（即使表单没有action，页面仍然会刷新）。您在提交处理程序中的 ajax 调用是在默认行为之外完成的，而不是代替它。您可以像这样在提交处理程序中阻止默认行为：

$(".js-ajax-php-json").submit(function(event){
    event.preventDefault();

【讨论】：

是的，我试过了，但是当我这样做时，消息在那里，但模态框不会消失
我可以看到您的 ajax 成功处理程序更改了屏幕上的文本，但它不包含任何会删除模式框的代码。您是否打算在您的 ajax 成功处理函数中添加类似 $('.modal').remove(); 的内容？
没想到，这很合理

【解决方案3】：

当使用带有提交按钮的表单时，浏览器无论如何都会执行回发。因此，我建议您将输入类型="提交" 替换为输入类型="按钮"。然后将您的处理程序附加到该按钮的“单击”（而不是表单的提交事件）。您还需要读取 textarea 的值并将该值放入要传递的数据中。

【讨论】：