使用AJAX时页面不断刷新 [英] Pages Keeps Refreshing While Using AJAX

问题描述

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

Im creating a modal box that includes a form. The form will then return the input once submitted using ajax and php and the modal box should then disappear. The problem is though the result shows for a few seconds before the box disappears and the page refreshes.

<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);
}
?>

推荐答案

提交表单意味着许多默认行为，例如使用提交结果重新加载当前页面(即使表单没有action，页面仍将刷新).除了默认行为外，您在提交处理程序中的ajax调用是在默认行为之外完成的.您可以防止在提交处理程序中出现以下默认行为:

Submitting a form implies lots of default behavior, such as reloading the current page with the results of the submission (even if the form has no action, the page will still refresh). Your ajax call in the submit handler is done IN ADDITION to the default behavior, not instead of it. You can prevent the default behavior in your submit handler like this:

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

这篇关于使用AJAX时页面不断刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！