Визуализация ответа на запрос PQ jquery в NodeJs - PullRequest
Новая
       3

Визуализация ответа на запрос PQ jquery в NodeJs

1 голос
/ 19 апреля 2019

Функциональность:

Функциональность этого кода заключается в обновлении пользовательских данных пользователя Страница профиля .

Код:

Profile.ejs 

<script>
(function() {
    function toJSONString( form ) {
        var obj = {};
        var elements = form.querySelectorAll( "input, select, textarea" );
        for( var i = 0; i < elements.length; ++i ) {
            var element = elements[i];
            var name = element.name;
            var value = element.value;

            if( name ) {
                obj[ name ] = value;
            }
        }

        return JSON.stringify( obj );
    }

    document.addEventListener( "DOMContentLoaded", function() {
        var form = document.getElementById( "test" );
        form.addEventListener( "submit", function( e ) {
            e.preventDefault();
            var json = toJSONString( this );
            //alert(json);
            $.ajax({
              type: "POST",
              url: "/profile",
              data: json,
              success: function(){},
              dataType: "json",
              contentType : "application/json"
            });

        }, false);

    });

})();
</script>
<div id="res">
    <h4>
        <%= status %>
    </h4>
</div>
<form id="test" action="/profile" method="post">    
    <input type="text" name="name" id="name" value=""/>
    <input type="text" name="about" id="about" value=""/>
    <input type="text" name="hobbies" id="hobbies"  value=""/>
    <input type="submit" value="send" class="btn btn-primary btn-block"/>
</form>

index.js 

router.get('/profile', loggedin, function(req, res, next) {
  res.render('profile', {status:''});
});

router.post('/profile', loggedin, function(req, res, next) {
  res.render('profile', {status:'Changes Updated'});
});

Ожидаемый-результат:

После отправки запроса на отправку со всеми деталями <div id="res"> должен содержать текст Изменения обновлены.

Actual-результат:

После отправки запроса на отправку ответа 200 OK наблюдается, и пакет ответа имеет текст Изменения обновлены . Тем не менее, браузер не отражает это. Новый полученный ответ не отображается.

Пожалуйста, помогите в решении этой проблемы, так как я довольно новичок в этом ( И весь код собран из множества мест ). Кроме того, любая дополнительная информация, или хорошие чтения по этому вопросу будет высоко ценится

1 Ответ

0 голосов
/ 22 апреля 2019

Вам нужно будет использовать атрибут jQuery html, чтобы вставить нужные результаты в div. ejs используется для создания шаблонов до загрузки вашей страницы, а не для вставки данных ajax после загрузки страницы.

Попробуйте это: 

$(document).ready(function() { //the jQuery equivalent

    var form = $('#test');
    form.on('submit', function(e) {
        e.preventDefault();
        var json = toJSONString(this);
        $.ajax({
          type: "POST",
          url: "/profile",
          data: json,
          success: function(data) {
            console.log(data);
            $('#res').html(data); //insert "data" into the inner html of the div
          },
          dataType: "json",
          contentType : "application/json"
        });

    }, false);
  });
});
...