頁面仍然使用Ajax刷新

HTML：頁面仍然使用Ajax刷新

<body> 
<form name='sample' id='sample' method='GET' action='followedbutton.php'> 
Name:<input type='text' name='username' id='username'><br> 
Age:<input type='text' name='userage' id='userage'><br> 
Date:<input type='text' name='userdate' id='userdate'><br> 
<input type='submit' name='submit' id='submit' value='Go!'> 
</form> 
</body>

JS：

<script> 
$(document).ready(function() { 
    var $form = $('#sample'); 
    $form.submit(function (e) { 
     $.GET(url: $(form).attr('action'), data: $(form).serialize(), success: function (result) { 
      $('#div').html(result) 
     }, 'json'); 
     return false; 
     e.preventDefault(); 
    }); 
}); 
</script>

PHP成功頁面：

<?php 
error_reporting(E_ALL); ini_set('display_errors', 1); mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);  
$conn = mysqli_connect('localhost', 'root', '') or die ("No mysqli"); 
     mysqli_select_db($conn, 'sample') or die ("No DB"); 
$name = $_GET['username']; 
$age = $_GET['userage']; 
$date = $_GET['userdate']; 
$insert = ("INSERT INTO `test` (name, age, date) VALUES ('$name','$age','$date')"); 
$insert_query = mysqli_query($conn, $insert) or die ("No query"); 
mysqli_close($conn); 
//header('location:followbutton.php'); 
echo "<script text='javascript'>alert('Ajax');</script>" 
?>

所以我想提交此表無需刷新頁面。當我提交表單時，我立即收到警報，無需刷新頁面。但在我的Chrome選項卡中，我可以看到該頁面仍在加載，並且最終（在5-7秒左右之後）頁面會變爲followedbutton.php。

如何防止頁面刷新，同時仍將我的信息發送到followedbutton.php？什麼在我的JS代碼需要改變？一切正常，我只是不希望頁面刷新。

我從其他用戶那裏得到了一些建議，他們提出了類似的問題，但沒有任何建議對我有用。

我已經採取了對這個職位的意見，我的代碼更改爲：

<script> 
$(document).ready(function(){ 
var $form = $('#sample'); 
$form.submit(function(e){ 
e.preventDefault(); 
$.get(url:$(form).attr('action'), data:$(form).serialize(), success:function(result) {$('#div').html(result)},'json'); 
    return false; 
}); 
}); 
</script>

但仍得到相同的結果很遺憾。可悲的是，我還沒有學習如何使用我的JS控制檯進行調試。它在要做的事情列表上。

來源

2014-06-27 jstrat6

你包括jQuery的頁面？檢查控制檯是否有錯誤？ – j08691

yea'' – jstrat6

您對'$ .get'的調用仍然給出語法由於'url：'，'data：'等錯誤，請參閱我的更新答案（或James'），以獲取調用'$ .get'的正確方法。 –

e.preventDefault()從來沒有得到評估，如果你return收到：

function(e) { 
    // ... 
    return false; 
    e.preventDefault(); // <-- never happens 
}

還有你叫$.GET（正如其他人指出，應該$.get）的方式有問題。它看起來像你試圖通過設置對象，以$.get就像你到$.ajax，但有兩個問題與您的代碼：

您省略對象周圍大括號（foo(bar: 1)不是有效的JavaScript; foo({ bar: 1 })是），這會導致語法錯誤。
即使您修復它不起作用，因爲不像$.ajax,$.get不帶設置對象;它需要url,data,success和dataType四個單獨的參數。

你真正想要的，那麼，是這樣的：

$.get($(form).attr('action'), // url 
     $(form).serialize(),  // data 
     function (result) {  // success 
     $('#div').html(result) 
     }, 
     'json'     // dataType 
);

來源

2014-06-27 16:50:06

真實但無關緊要。 'return false'也可以防止默認值。 –

這並不是如何調用get，它不需要一個對象作爲參數，它需要1-4個獨立的參數。 –

你是對的，@JamesMontagne。討厭'$ .get'和'$ .ajax'沒有一致的API。無論如何，這是一個語法錯誤。 –

有沒有這樣的事情$.GET是$.get。它是區分大小寫的。因此，您的代碼在阻止提交的默認行爲之前爆炸了。一旦你解決了這個問題，你也會發現你正在使用get錯誤。

總是檢查你的js控制檯，它會告訴你這是問題。

正確調用get：

$.get($(form).attr('action'), 
     $(form).serialize(), 
     function (result) { 
      $('#div').html(result) 
     }, 
     'json');

來源

2014-06-27 16:51:26

頁面仍然使用Ajax刷新

回答

相關問題