在 NodeJs 中呈现 jquery POST 请求的响应

Posted 2023-03-08

【中文标题】在 NodeJs 中呈现 jquery POST 请求的响应

【英文标题】：Rendering the response of a jquery POST request in NodeJs

【发布时间】：2019-09-09 20:53:45

【问题描述】：

功能：

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

代码：

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"> 应包含文本 Changes Updated。

实际结果：

一旦发送了 post 请求，就会观察到 200 OK 响应，并且响应数据包包含文本 Changes Updated。但是，浏览器不会反映它。未呈现收到的新响应。

请协助解决这个问题，因为我对此很陌生（整个代码是从很多地方组合在一起的）。此外，任何额外的信息，或关于该主题的良好阅读将不胜感激

【问题讨论】：

Accessing ajax POST response in javascript的可能重复

关于$.ajax的回复数据，已有很多问题和答案，您尝试了哪些，为什么它们不足以解决您的问题？

【参考方案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);
  );
);

【讨论】：

感谢您的回复。当我说相当新时，我的意思是几个小时的经验（如果怀疑的质量低于标准，请提前道歉）。如果我省略 JSON 转换 jquery 函数，我会得到所需的结果。我需要完全相同的事件，但使用 JSON 数据。我相信，在调用 preventDefault() 函数时，除了将 FormData 发送到服务器之外，还禁用了其他一些事件。我想调用所有相同的事件，除了发送的数据必须是 JSON 格式。

@Dan：感谢您的回复。当我说相当新时，我的意思是几个小时的经验（如果怀疑的质量低于标准，请提前道歉）。