Ajax表單請求仍重新加載頁面

Question

我正在嘗試使用ajax和jquery mobile提交表單，而不刷新頁面，也沒有運氣。

我有這個表格-

index.php：

<script>
function SubmitForm() {
var name = $("#name").val();
$.post("bump.php", { name: name},
function(data) {
 //alert(data);
});
}
</script>


<form method="post" data-ajax="false">
<input name="name" type="hidden" id="name" type="text" value="<?php echo $id; ?>" />
<input type="image" style="height:35px;top:4px;" id="bump" src="../img/bump.png" id="searchForm" onclick="SubmitForm();" value="Send" />
</form>

這是bump.php

$date = date('y/m/d H:i:s');
$id =  $_POST['name'];
$sql = "UPDATE images SET update_date='$date' WHERE id=$id";

    if ($conn->query($sql) === TRUE) {

    } else {
        echo "Error updating record: " . $conn->error;
    }

我想保持我在頁面上的位置，但是每次都會刷新嗎？ 我在這里做錯了什么？

Answer 1

使用event.preventDefault(); 如果可以取消事件，則將其取消，而不停止事件的進一步傳播。

type="image"默認行為是提交form因此頁面被unloaded

 function SubmitForm(event) { event.preventDefault(); var name = $("#name").val(); $.post("bump.php", { name: name }, function(data) { //alert(data); }); } 

 <form method="post" data-ajax="false"> <input name="name" type="hidden" id="name" type="text" value="<?php echo $id; ?>" /> <input type="image" style="height:35px;top:4px;" id="bump" src="../img/bump.png" id="searchForm" onclick="SubmitForm(event);" value="Send" /> </form> 

Answer 2

用戶在onclick中返回false

 function SubmitForm() { //event.preventDefault(); var name = $("#name").val(); console.log(name); $.post("message.html", { name: name}, function(data) { alert(data); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <form method="post" data-ajax="false"> <input name="name" type="hidden" id="name" type="text" value="<?php echo $id; ?>" /> <input type="image" style="height:35px;top:4px;" id="bump" src="http://switchon.global2.vic.edu.au/files/2015/07/4x5-1jroh2i.png" id="searchForm" onclick="SubmitForm(); return false;" value="Send" /> </form>