Update the todo list without refreshing the page in express nodejs app

前端未结

关注

 2  1060

I am a newbee to the express nodejs applications. I want to make a todo list. This is how it looks so far. My question is when I add a todo, it takes some time to show the chang

相关标签:

2条回答

轮回少年

2021-02-06 20:12

Your server should return JSON instead of rendered HTML. On the front end you should use JavaScript (jQuery and method $.getJSON() for example) to query your server for the updated task list. jQuery will use AJAX to send and receive data from your server without the need to refresh your page. There are many good tutorials online on how to make REST API using Node.js.

0 讨论(0)
发布评论:

提交评论
- 加载中...
别那么骄傲

2021-02-06 20:32
ExpressJS is a server-side framework. That means it serves up views when a browser makes requests for them. In order to prevent the browser from making a full page refresh when interacting with the page you need to look into a client-side framework.

I highly recommend taking a look at AngularJS, but that can be a daunting framework for a beginner. I would definitely first learn JQuery if you haven't already. Many other frameworks either build on top of JQuery directly or mimic some of the patterns employed by JQuery. I would focus on JQuery first and then graduate to a higher-level framework like AngularJS or something similar.

Here is an example of hijacking a form submit with JQuery:
```
<script type="text/javascript">
  $('#myForm').on('submit', function (event) {
    event.preventDefault(); // Stop the form from causing a page refresh.
    var data = {
      username: $('#username').val(),
      password: $('#password').val()
    };
    $.ajax({
      url: 'http://localhost/my/url',
      data: data,
      method: 'POST'
    }).then(function (response) {
      // Do stuff with the response, like add it to the page dynamically.
      $('body').append(response);
    }).catch(function (err) {
      console.error(err);
    });
  });
</script>
```
If you put that script tag at the bottom of a page, just before the closing </body> tag, it will hijack a form with the ID myForm and attach an event handler for the submit event. When the form is submitted the event handler will fire first. The first line of the handler event.preventDefault() tells the browser not to perform the default submit behavior and refresh the page. Then after that we create a data object to store the values of the form fields that we are interested in. In this example I use a text input with the ID "username" and a password input with the ID "password". Notice how the string you pass to $() looks a lot like a CSS selector, that's the idea :)

Once we have the data we want to post to the server, we make an AJAX request with the data and we handle the response, or catch any errors if they occur. This AJAX request happens without refreshing the page :)

The reason this script has to be at the bottom of a page is because the elements need to be loaded before it runs. JQuery makes it possible to ensure that the entire document is ready before running scripts.
```
$(document).on('ready', function (event) {
  // This code won't run until the whole page is ready.
});
```
If you place your code in that event handler then you can put the script tag anywhere on the page, even in the <head>. JQuery offers a shortcut for that event handler because it's used a lot.
```
$(function (event) {
  // This is sugar for $(document).on('ready', function () { ... });
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...