nodejs express 响应按钮事件,不使用router
发布于 1年前 作者 sihao1234 1098 次浏览

在某一个页面。填写了一些输入框。然后点击一个button做一些数据库操作。但是我想处理完之后页面不刷新,也就是之前输入的信息保持不变。 这个需要重新routes吗?还是在app.js里除了get, set, post之外有其他的方法呢。

举例说明:

需求:

在页面上点击 按钮 数据库进行初始化

使用routes路由,以便能够在服务器端执行数据库操作的 代码:

服务器端: 
app.js
app.get('/initializing', routes.initialize); 

index.js
exports.initialize = function(req, res){
        console.log('initializing');
        //写业务代码,进行数据库初始化
        // ...成功
        // 重定向到原页面
        res.redirect("/") ; // 地址重写
};

除此之外,还需要在服务器上新建initializing.html空白页面。否则404 且,这样的方法返回后就重新刷新了原页面。原页面上所填的信息就丢失了。

客户端:
index.ejs
<input type="text" id="myIndexText"/>
...
<a id="initializing" href="/initializing" >数据初始化</a>

问题:

必须用此方法routes下实现吗?
还是在app.js里除了get, set, post之外有其他的方法呢。
或者ajax或者其他的方法呢?
我不知道该怎么写,求测试代码。
谢谢!!!
8 回复

能否明示? 哪里有实例可以参考下的呢?

主要是服务器端不知道该怎么写。。

页面上除了 get, set, post 还怎么让服务器端执行function呢?

你的请求肯定有一个返回的response,你返回json就是了撒,然后怎么处理看你自己情况,也可以不管他,页面就不会刷新,这种要求嘛,强力推荐angularJs。。你懂的。方便快捷省时又省心

使用ajax,就是写个function(result){…}。
在models中进行数据的操作。如果修改成功,就callback(1),否则callback(0).在客户端请求的代码中对返回值进行判断.得到的是1就维持现状,0则清空并且提示!

###注意:刚刚写的只是实现的思路。具体的业务还要补充一些。

不是让服务器执行fn,而是有请求进服务器了,才响应该请求,去执行该执行的fn。 ajax请求也一样,和普通的网页请求类似,只不过它是异步的而已。

好的,谢谢大家!

下面是我写的一个例子。主要是之前不知道服务器端有: res.send(“来自服务器的响应”); }

res对象还有其他什么方法嘞?

服务器端

                app.js

                   app.get('/initializing2', routes.initialize2);


                index.js

                    exports.initialize2 = function(req, res){
   console.log('initializing2'); 
   res.send("来自服务器的响应"); }

客户端

                     <h2>AJAX</h2>
                    <button type="button" onclick="loadXMLDoc()">请求数据</button>
                    <div id="myDiv"></div>

                    <script>
                        //AJAX
                        function loadXMLDoc()
                        {
                            var xmlhttp;
                            var str;
                            if (window.XMLHttpRequest)
                            {// code for IE7+, Firefox, Chrome, Opera, Safari
                                xmlhttp=new XMLHttpRequest();
                            }
                            else
                            {// code for IE6, IE5
                                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                            }
                            xmlhttp.onreadystatechange=function()
                            {
                                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                                {
                                    str = xmlhttp.responseText;//得到服务器响应
                                    document.getElementById("myDiv").innerHTML=str;
                                }
                            }

                            xmlhttp.open("GET","/initializing2",true);
                            xmlhttp.send();
                        }
                    </script>

a o , 格式不太好。。。

回到顶部