页面在使用AJAX时保持清爽

我创建一个包含表单的模式框。然后，表单将返回使用ajax和php提交的输入，然后模态框应该消失。问题是，虽然结果显示在框消失几秒之前，页面刷新。页面在使用AJAX时保持清爽

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

来源

2014-11-02 Damian Anthony

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

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

来源

2014-11-02 21:19:08

是的，我曾试过，但是当我这样做，消息是在那里，但模态框不会消失 – 2014-11-02 21:31:45

我可以看到你的ajax成功处理程序改变屏幕上的文本，但它不包含任何将删除模式框的代码。您是否打算添加类似'$（'。modal'）。remove（）;'到您的ajax成功处理函数？ – 2014-11-02 21:44:35

没有想到，这是非常有意义的 – 2014-11-02 21:49:06

它看起来像之所以它的清爽是因为你打电话不妨碍线之后的默认操作提交功能$(".js-ajax-php-json").submit(function(){你需要防止它：

e.preventDefault();

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

来源

2014-11-02 21:13:51 JammyDodger231

此外，OP，要清楚，您目前正在使用'return true;'在提交函数结束时。你可以简单地把它改成'return false;'来代替。 – Ohgodwhy 2014-11-02 21:20:39

同意@OhGodWhy为了明白为什么他不希望表单刷新/提交，他正在使用提交按钮而不是普通按钮 – JammyDodger231 2014-11-02 21:22:48

提交事件可以很方便，因为可以通过几种不同的方式触发提交事件。您可以单击给定表单中的任何提交按钮，也可以在可聚焦的表单元素上按回车键等。根据您的需要，防止默认提交行为可能比指定启动ajax的六位处理程序更容易请求。 – 2014-11-02 21:37:20

当使用一个提交按钮形式，浏览器将反正执行回发。所以，我建议你用输入类型=“按钮”替换输入类型=“提交”。然后附加你的处理程序来“点击”该按钮（而不是表单的提交事件）。您还需要读取textarea的值并将该值放入要传递的数据中。

来源

2014-11-02 21:24:46 Alberto

页面在使用AJAX时保持清爽

回答

相关问题