페이지를 새로 고침하지 않고 아약스로 데이터를 보내려면 어떻게해야하나요? (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> 

내 아약스 스크립트입니다 : 내가 아무 생각이 없다, 나는 내 문제를 해결할 수있는 방법 ... 여기

은 내 양식이다

$('#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

을 사용하는 모든 형태의 제출의 기본 기능을 방지하기위한 하나의 해결책은 양식을 제거하고 입력하고 바로 데이터를 가져 오는 것입니다 onClick 핸들러에서. 나는 개인적으로 일하는 양식을 남기는 것을 선호한다. 단지 JS가 비활성화 된 경우 (희소하지만 가능한 경우) 양식이 여전히 재 적재와 함께 제출된다.

이 방법을 사용하면 click 이벤트의 기본 동작을 방지해야합니다. jQuery AJAX 핸들러 앞에 간단한 event.preventDefault() 호출을 추가했습니다. 이벤트의 기본 동작 (이 경우 게시물을 통해 양식을 제출하는 것)이 발생하지 않으므로 처리기가 페이지를 다시로드하지 않고도 처리 할 수 ​​있습니다. 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

귀하의 페이지는 입력 유형 = 제출으로 제출하기 때문에 다시로드 중입니다.

일반 버튼으로 교체하면 정상적으로 작동합니다.

편집 : 양식 태그에서도 게시물을 삭제할 수 있습니다.

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(); 
     } 
    }); 
});