Jquery Ajax是一種基于javascript的前端框架,可以進(jìn)行異步的HTTP請(qǐng)求和響應(yīng)操作。在用戶修改密碼時(shí),使用Jquery Ajax可以實(shí)現(xiàn)無(wú)刷新修改密碼的功能。以下是實(shí)現(xiàn)代碼:
$(document).ready(function(){ $("#change-password-form").submit(function(event){ //阻止表單默認(rèn)提交行為 event.preventDefault(); //獲取表單數(shù)據(jù) var formData = { 'old_password' : $('input[name=old_password]').val(), 'new_password' : $('input[name=new_password]').val(), 'confirm_password' : $('input[name=confirm_password]').val(), 'csrfmiddlewaretoken' : $('input[name=csrfmiddlewaretoken]').val() }; //發(fā)送Ajax請(qǐng)求 $.ajax({ url: "/change-password/", //修改密碼的后臺(tái)處理url type: "POST", data: formData, dataType: "json", success: function(response) { //操作成功返回 if(response.success){ alert("密碼修改成功!"); } else{ alert(response.error_message); } }, error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); } }); }); });
上述代碼中,我們首先防止了表單默認(rèn)提交行為,然后獲取了表單中的數(shù)據(jù)。接著,使用$.ajax方法發(fā)送post請(qǐng)求到后臺(tái),后臺(tái)的url地址是'/change-password/',數(shù)據(jù)是formData,數(shù)據(jù)類型是json,請(qǐng)求成功后自動(dòng)返回對(duì)應(yīng)的響應(yīng)。如果操作成功,則alert出操作成功信息;如果操作失敗,則將后臺(tái)返回的錯(cuò)誤信息alert出來(lái)。
需要注意的是,后臺(tái)處理方法需要反饋操作結(jié)果,可以使用Django框架提供的HttpResponse返回json字符串,前端代碼就可以根據(jù)操作結(jié)果進(jìn)行下一步處理。