私のページがリロードしようとしたとき、なぜ私はajaxクエリを送信していますか？

Question

私はajaxでフォームを送信しようとしていますが、e.preventDefault（）ページをリロードしようとしても。ここに私のHTMLは次のとおりです。

<form action="/user/changeProfileData" id="edit-profile_form" method="post"> 
 
    <ul class='profile-data'> 
 
    <li class='profile-data_item persona-icon'>Никнейм: <input id='profile_nickname' name='nickname' type="text" placeholder="Nickname:" value="{{myNickname}}" ></li> 
 
    <li class='profile-data_item'>Name: <input name='name' id='profile_name' type="text" placeholder="Name:" value="{{myName}}"></li> 
 
    <li class='profile-data_item'>Surname: <input name='surname' id='profile_surname' type="text" placeholder="Surname:" value="{{mySurname}}" ></li> 
 
    <li class='profile-data_item b-day-icon'>Age: <input name='age' id='profile_age' type="text" placeholder="Age:" value="{{myAge}}"></li> 
 
    <li class='profile-data_item place-icon'><input type="text" name='city' id='profile_city' placeholder="City" value="{{myCity}}" :readonly="inputStatus == 1 ? true : false">, <input name='country' id='profile_country' type="text" placeholder="Страна" value="{{myCountry}}" :readonly="inputStatus == 1 ? true : false"></li> 
 
    <li class='profile-data_item phone-icon'>Phone: <input name='phoneNumber' id='profile_phoneNumber' type="text" placeholder="Phone:" value="{{myPhoneNumber}}"></li> 
 
    <input type="hidden" name="_csrf" value='{{csrfToken}}' /> 
 
    <input type="submit" value="Submit" id="edit-profile_submit"> 
 
    </ul> 
 
</form>

そして、私のajax.jsコード：

$(document).ready(function(){ 

var csrf_token = {{csrfToken}}; 

$("body").bind("ajaxSend", function(elm, xhr, s){ 
    if (s.type == "POST") { 
     xhr.setRequestHeader('X-CSRF-Token', csrf_token); 
    } 
}); 



$('#edit-profile_submit').click(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     contentType:"application/x-javascript; charset:UTF-8", 
     global: false, 
     type: 'POST', 
     url: '/user/changeProfileData', 
     dataType: 'html', 
     data: { 
      name: $("#profile_name").val(), 
      nickname: $("#profile_nickname").val(), 
      surname: $("#profile_surname").val(), 
      country: $("#profile_country").val(), 
      city: $("#profile_city").val(), 
      phoneNumber: $("#profile_phoneNumber").val(), 
      age: $("#profile_age").val() 
     }, 
     success: function (result) { 
      console.log(result); 
     }, 
     error: function (request, status, error) { 
      console.log(error); 
     } 
    }); 
}); 
}); 

とサーバーのコード、必要に応じて：

router.post('/changeProfileData', function (req, res, next){ 
var id = req.user._id; 
console.log(req.body); 
var nickname = req.body.nickname; 
var name = req.body.name; 
var surname = req.body.surname; 
var age = req.body.age; 
var city = req.body.city; 
var country = req.body.country; 
var phoneNumber = req.body.phoneNumber; 

User.findByIdAndUpdate(id, { $set: { nickname: nickname, name: name, surname: surname, age: age, city: city, country: country, phoneNumber: phoneNumber }}, function (err, user) { 
    if (err) return handleError(err); 
    console.log("ADDED!!!!!!!!!!!!!"); 
}); 

}）; ここではすべてルートでOKです。 フォームが送信され、データがデータベースに保存されますが、フォームを送信したページが長時間再起動しようとしたが、最終的にはフォームに表示されているリンクが表示されます。あなたは上のポスト要求で終了したときに私を助けてください、私はおかしくなりそうだ...

Answer 1

）はまた、あなたは（res.endを追加する必要がありアヤックス

async: true 

にデータ型以下の行を入れてみてくださいサーバー

Answer 2

クリックアクションハンドラを送信ボタンにアタッチする代わりに、フォームのsubmitイベントにハンドラをアタッチする必要があります。

$('#edit-profile_form').submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     contentType:"application/x-javascript; charset:UTF-8", 
     global: false, 
     type: 'POST', 
     url: '/user/changeProfileData', 
     dataType: 'html', 
     data: { 
      name: $("#profile_name").val(), 
      nickname: $("#profile_nickname").val(), 
      surname: $("#profile_surname").val(), 
      country: $("#profile_country").val(), 
      city: $("#profile_city").val(), 
      phoneNumber: $("#profile_phoneNumber").val(), 
      age: $("#profile_age").val() 
     }, 
     success: function (result) { 
      console.log(result); 
     }, 
     error: function (request, status, error) { 
      console.log(error); 
     } 
    }); 
}); 
}); 

あなたはsubmitイベントに関する詳細な情報を読み取ることができます。