如何防止在提交按鈕單擊時刷新頁面

Question

我有一個輸入和一個提交按鈕的表單。

<form method='POST' action='' enctype='multipart/form-data' id="form_search">
<input type='hidden' name="action" id="form_1" value='1' />
</span><input id="query" type="text" name="mol" value="">
<input type='submit' value='Search' name="Search" id="Search" />

在表單提交表單輸入數據轉到 php 下面的代碼

if (isset($_POST['Search'])) {
$_SESSION["query"] = $_POST["mol"];
$_SESSION["action"] = $_POST["action"];
}

我想避免在表單提交時刷新頁面。 我試過 e.preventDefault() 並返回 false； 我的java腳本中的方法但不起作用（這些方法幫助我刷新頁面但不允許我將數據發送到php代碼）

請幫我解決這個問題，請建議使用 ajax 代碼來解決這個問題。

Answer 1

頁面刷新將刪除您以前的數據，因此您可以使用 $.post() 或 $.ajax() 保留它

您可以通過在事件處理函數中添加這兩件事之一來防止頁面刷新

對於純js

 return false;

對於 jquery，您可以使用

e.preventDefault(); // e is passed to handler

您的完整代碼將類似於

在 js 中使用$.post()

function checkfunction(obj){
$.post("your_url.php",$(obj).serialize(),function(data){
 alert("success");
 });
 return false;
 }

html

<input type='submit' onclick="return checkfunction(this)" />

或與 onsubmit 相同的效果

<form  onsubmit="return checkfunction(this)" method="post">

Answer 2

如果沒有 ajax，您可以簡單地在 PHP 中添加 checked 屬性。 因此，例如，如果您的無線電組名為radio並且一個值為a ，另一個為b ：

<?php
$a_checked = $_POST['radio'] === 'a';
$b_checked = $_POST['radio'] === 'b';
?>

<input type="radio" name="radio" value="a"<?=($a_checked ? ' checked' : '')?>></input>
<input type="radio" name="radio" value="b"<?=($b_checked ? ' checked' : '')?>></input>

因此，當用戶提交表單並再次顯示它時，即使頁面刷新，它也會像用戶提交它一樣。

Answer 3

<input type="radio" name="rbutton" id="r1">R1
<input type="radio" name="rbutton" id="r2">R2
<input type="button" id="go" value="SUBMIT" />
<div id="result"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#go').click(function(){
        var val1 = $('input:radio[name=rbutton]:checked').val();
        var datastring = "partialName="+val1;
        $.ajax({
            url: "search.php",
            type: "POST",
            data: datastring,
            success: function(data)
            {
                $("#result").html(data);
            }
        });
    });
});
</script>