bài đăng ajax nhưng không thể ngăn làm mới

Question

Tôi gặp vấn đề với việc làm mới trang sau bài đăng ajax, tôi đã thử 6 biến thể khác nhau và tại một thời điểm tôi đã nhận được kết quả phù hợp nhưng không thể ngừng làm mới trang và sau khi tìm kiếm trên net và xung quanh trên trang web này ngay bây giờ không ai trong số đó đang làm việc và nó vẫn làm mới ...

mã hiện tại là:

$('#submit_btn').click(function() { 
/*event.preventDefault();*/ 
var curPassword = $("input#curPassword").val(); 
var newPassword = $("input#newPassword").val(); 
var new2Password = $("input#new2Password").val(); 
/*var params = 'curPassword='+ curPassword + '&newPassword=' + newPassword + '&new2Password=' + new2Password; */ 
var params = { 
    curPassword: curPassword, 
    newPassword: newPassword, 
    new2Password:new2Password 
}; 
$.ajax({ 
     type: "POST", 
     url: "testAjax.php", 
     data: params, 
     success: function(msg){ 
      alert(msg); 
     } 
    }); 
    return false; 
}); 

hình thức là:

<form method="post" action="" name="confirmChange" class="confirmChange"> 
<label for="curPassword">Current Password:</label> 
<input type="password" name="curPassword" id="curPassword" value="" /> 
<label for="newPassword">New Password:</label> 
<input type="password" name="newPassword" id="newPassword" value="" /> 
<label for="new2Password">Confirm New Password:</label> 
<input type="password" name="new2Password" id="new2Password" value="" /> 
<br /> 
<input type="button" name="confirmChange" class="confirmChange" id="submit_btn" value="Change" /> 

Đánh giá cao bất kỳ sự giúp đỡ trong việc này để làm việc =/

Cập nhật: Đã diễn ra các mã khác không trực tiếp liên quan đến vì nó kinda lộn xộn câu hỏi. Cũng được cập nhật mã để chọn lại bản sửa đổi mới nhất. Tôi đã thay đổi url ajax thành textAjax.php đơn giản với một tiếng vang đơn giản là thế giới hello không có gì khác, nơi tôi vẫn không nhận được gì.

Cập nhật 2 Cố gắng thay đổi mã javascript để:

$('#submit_btn').click(function() { 
     alert('Button Clicked'); 
}); 

Và tôi nhận được gì ... Nếu đúng như mẫu dưới đây như thế nào là nó có thể chức năng nhấp chuột không hoạt động ở tất cả các ?

Answer 1

Tôi nghĩ rằng tôi cố định nó bằng cách sử dụng:

$('#submit_btn').live('click', (function() { 

tôi ít nhất là bắt đầu nhận được phản hồi khi nhấp, nhưng tôi không cập nhật hoặc nhận lại bất kỳ tiếng vang từ tệp php nhưng hy vọng rằng sẽ dễ dàng hơn để gỡ lỗi.:)

Answer 2

Bạn không cần sử dụng loại = "gửi" cho thông tin bạn nhập. Chỉ cần sử dụng type = "button" và gọi hàm ajax trên sự kiện click của button.

<input type="button" name="confirmChange" class="confirmChange" id="submit_btn" value="Change"> 

$('#submit_btn').click(function() { 
    (ajax code here) 
}); 

preventDefault() cũng sẽ hoạt động, nhưng, theo tôi, tại sao ngăn sự kiện xảy ra tự nhiên khi bạn chỉ có thể tránh sử dụng nút gửi hoàn toàn?

Cập nhật: Tôi vừa nhận ra rằng việc sử dụng tính năng gửi sẽ cho phép người dùng nhấn enter để kích hoạt hành động của bạn, vì vậy có lẽ cũng có một số công đức trong đó. Trong mọi trường hợp, here's a similar question that contains elaborations into preventDefault().

Cập nhật 2: Bạn cần sửa thông số của mình trong hàm ajax. Sử dụng một mảng thay vì cố gắng xây dựng một chuỗi truy vấn:

var params = { 
curPassword: curPassword, 
newPassword: newPassword, 
new2Password:new2Password 
}; 

Answer 3

Encapsulate gọi AJAX của bạn trong khối mã sau

 
$('form.confirmChange').submit(function(event) { 
     event.preventDefault(); 
     #Rest of your code goes in here 
}); 

preventDefault() sẽ ngăn chặn hành động mặc định của một sự kiện từ kích hoạt.

Answer 4

Hãy thử điều này

<script> 
function refreshpage(){ 
(ajax code here) 
    return false; 
} 
</script> 

<form onsubmit="return refreshpage();"> 
<input type = "submit" value="submit_btn"> 
</form> 

Answer 5

Tôi gặp vấn đề tương tự. Cũng giống như bạn, tôi đã bọc các thẻ <input> của mình bên trong một cặp thẻ <form>. Mặc dù không có <submit>, tôi thấy rằng khi tôi nhấp vào nút của mình để kích hoạt cuộc gọi Ajax, nó đã làm mới trang - và thực sự gửi biểu mẫu tới trang.

Tôi đã xóa các thẻ <form> và hành vi này đã dừng, nhưng Ajax vẫn hoạt động như mong đợi. Tôi hy vọng điều này sẽ giúp bất cứ ai khác đang trải qua điều này.

Answer 6

Sử dụng vòng lặp để chỉ chạy cuộc gọi ajax một lần.

var i; 
for(i=0;i<1;i++){ 
//ajax code here 
} 

Vì vậy, sau đó nó sẽ không gọi một lần nữa và một lần nữa ..