Question

功能：

此代码的功能是更新用户个人资料页面上的用户详细信息。

代码：

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"> 应该包含文本“已更新更改”。

实际结果：

一旦发送了发布请求，就会观察到200 OK响应，并且响应包中的文本为更改已更新。但是，浏览器无法反映出来。未收到新的响应。

请协助解决此问题，因为我对此还很陌生（并且整个代码都在很多地方放在一起）。另外，我们非常感谢您提供有关该主题的任何其他信息或相关读物

Answer 1

您将需要使用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);
  });
});

渲染NodeJs中的jQuery POST请求的响应

1 个答案: