ページをリロードせずにajaxでデータを送信する方法は？ （Nodejs）

Question

リロードせずにデータを送信してデータベースに保存することはできません。私は理解できない、どうして私のページがリロードされるのか。私はここで

は私の形です...私は私の問題を解決することができますどのようにないアイデアを持っていない：ここで

 <form action="/user/change" method="post"> 
      Name: <input type="text" id="name" name='profile_name' value="{{myName}}"> 
      Surname: <input type="text" id="surname" name="profile_surname" value="{{mySurname}}"> 
      Age: <input id="profile_age" name="age" type="text" value="{{myAge}}"> 
      <input type="hidden" name="_csrf" value='{{csrfToken}}'> 
      <input type="submit" value="Send" id="send_profile"> 
     </form> 

は私のAjaxのスクリプトです：

$('#send_profile').click(function() { 
    $.ajax({ 
     global: false, 
     type: 'POST', 
     url: /user/change, 
     dataType: 'html', 
     data: { 
      name: $("#profile_name").val(), 
      surname: $("#profile_surname").val(), 
      age: $("#profile_age").val() 
     }, 
     success: function (result) { 
      console.log(result); 
     }, 
     error: function (request, status, error) { 
      serviceError(); 
     } 
    }); 
}); 

そして、私のNode.jsの要求ハンドラ：

router.post('/change', function (req, res) { 
var name = req.body.name, 
surname = req.body.surname, 
age = req.body.age 

User.findOneAndUpdate({_id: req.user._id}, {$set:{name: name, surname: surname, age: age}}, {new: true}, function(err, doc){ 
    if(err){ 
     console.log("Something wrong when updating data!"); 
    } 
    console.log(req); 
    console.log('req received'); 
    res.redirect('/user/'+req.user._id); 
}); 
}); 

Answer 1

を使用する任意の形式の提出のデフォルトの機能を防止するため は、フォームと送信ボタンを使用してから、茎、1つの解決策は、フォームを削除し、提出してデータだけを引っ張っていますonClickハンドラから取得します。私は個人的には作業形式を残したいと思っています。JSが無効になっている（稀ではありますが）可能性がある場合に備えて、フォームは依然としてリロードされます。

このメソッドでは、clickイベントのデフォルト動作を防ぐ必要があります。単純なevent.preventDefault()呼び出しをjQuery AJAXハンドラの前に追加しました。これは、イベントのデフォルト動作（この場合、フォームを投稿経由で送信する）を防ぎ、ハンドラーがページを再ロードすることなくそれを実行できるようにします。 event object

---

$('#send_profile').click(function(event) { 
    event.preventDefault(); 

    $.ajax({ 
     global: false, 
     type: 'POST', 
     url: /user/change, 
     dataType: 'html', 
     data: { 
      name: $("#profile_name").val(), 
      surname: $("#profile_surname").val(), 
      age: $("#profile_age").val() 
     }, 
     success: function (result) { 
      console.log(result); 
     }, 
     error: function (request, status, error) { 
      serviceError(); 
     } 
    }); 
}); 

Answer 2

あなたのページは入力タイプ= submitで送信しているため、ページがリロードされています。

これを通常のボタンに置​​き換えると正常に動作します。

編集：フォームタグから投稿を削除することもできます。

Answer 3

送信時デフォルトでは、フォームデータはフォームのアクション属性を送信します。空の場合は、同じページにデータを送信します。問題上述したように、我々はe.preventDefault();

$('#send_profile').click(function() { 
    e.preventDefault(); 
    $.ajax({ 
     global: false, 
     type: 'POST', 
     url: '/user/change', // missing quotes 
     dataType: 'html', 
     data: { 
      name: $("#profile_name").val(), 
      surname: $("#profile_surname").val(), 
      age: $("#profile_age").val() 
     }, 
     success: function (result) { 
      console.log(result); 
     }, 
     error: function (request, status, error) { 
      serviceError(); 
     } 
    }); 
});