Question

我正在创建一个包含表单的模式框。一旦使用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>

＆GT;

$(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>

＆LT;

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

Answer 1

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

e.preventDefault();

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

Answer 2

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

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

Answer 3

使用带有提交按钮的表单时，浏览器仍会执行回发。所以，我建议你用input type =“button”替换input type =“submit”。然后将处理程序附加到“单击”该按钮（而不是表单的提交事件）。您还需要读取textarea的值并将该值放入要传递的数据中。

使用AJAX时页面保持清爽

3 个答案: