接下来，我们来制作一个简单的前后台页面交互效果制作，其中用到的技术分别是HTML,CSS,JS,Node.js,Ajax。接下来由我来带大家制作。

  • 制作HTML页面
  • 首先需要用到简单的HTML搭建一个HTML的页面这个页面中有一个输入框与一个提交按钮。
  •  为HTML页面添加简单的CSS样式（为了美观，可以不用添加）
  • 然后开始书写JS相关代码（重要）
  •  首先，我们需要通过JS代码来获取文本框，与按钮。这里用到了document.getElementById 意思是JS通过标签的id值进行获取接下来查看获取到的内容。
  • 从图上可以看出已经获取到了表单控件与按钮。
  • 接下来进入Ajax的书写（重要）
  • 在这里简单说明一下Ajax的含义
  • Ajax全称为Asynchronous JavaScript and XML，即异步的 JavaScript 和 XML。
  • Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
  • Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
  • Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
  • 以上都是比较官方的语言，简单点来说Ajax其实是一种连接前台与后台的一种方式。
  • 到这里Ajax()已经搭建完成，这个地方使用的请求方法为GET方法，请求的接口url为"/one",为异步执行
  • 接下来，进入后台Web服务器的搭建与接口的创建
  • 在这里后台服务器的搭建还是接口的创建都是在js文件中，所以我们需要创建一个js文件用来存储服务器与接口。其中需要导入express模块这个模块为Node.js的模块，所以需要下载Node.js进行模块的下载。详细内容点击超链接：https://jingyan.baidu.com/article/456c463b60fb380a583144a9.html
  • 这里我们的Web服务器已经创建成功，接下来需要写与前台交互的接口。
  • 现在我们的接口已经创建完成，前后台的交互也已经成功，然后我们来进行获取用户输入框的内容并让其显示到后天界面中。
  • 获取用户输入框中的内容（这里需要用到js的相关知识）
  • 测试是否获取到了用户输入内容
  • 接着需要将用户传入的数据传输到后台页面
  • 编写后端接口中的内容来接收前台传输的数据
  • 最终效果如下：