如何实现前后端交互

大概流程

  • 首先我们要实现前端的页面,我们要有一个页面来让我们肉眼可以看见
  • JS的语法我们要掌握,1因为我们要通过JS来绑定事件(比如我们点击按钮就能发送数据给服务器,或者从服务器获取资源)2我们通过ajax请求来实现向服务器发送请求 3通过JS来修改DOM树,我们就能来修改我们的页面
  • 学会JSON这种(content-type)这种响应格式(序列号和反序列化)

HTML

  • 我们的通过form表单来提交数据到我们的服务器,提交到我们的/save-message.do的动态资源下,在JS中我们选中这个提交按钮,与事件绑定

  • 我们的table表格,也就是我们的显示数据的地方,我们想改变前端的样式,就是通过改变这个表格的DOM树来实现

JS

  • 通过改变了tbody的DOM结构,来改变页面的内容,这里我们要注意前端和后端的数据模式要保持一致

动态资源

 利用form标签提交

  • 我们地址栏输入/message-list.html
  • 1浏览器加载/meaasge-list.html文档资源
  • 2浏览器解析过程中发现了<scripts src="/messgae-list.js><scripts>
  • 3浏览器获得GET/message-list.js的脚本资源
  • 4开始执行JS代码,获取获取list列表的信息,通过调用了/message-list.json的动态资源(因为初始化的list里就有三条信息,所以会先把这三条信息返回)
  • 5响应后,继续JS的代码,xhr的load的事件驱动,将数据添加到HTML中,DOM树被修改,页面内容发生改变
  • 6我们的提交是通过表单,点了提交按钮,会post/save-message.do的资源,会将前端的输入的
  • 7信息保存到list的这个容器中,因为采用的是重定向,会去访问/message-list.htm,就会重复上面获取信息的步骤(1-5),所以会将输入的信息显示在我们的前端的表格中

前端提交到数据到后端的方式

  • 1采用from表单形式。form表单的后序处理,建议重定向,这样浏览器会自动重定向到指定的资源上
  • 2采用ajax+请求体:JSON的形式,ajax的后序处理,建议还是返回JSON,方便JS后序的处理,JS读取用户的输入,发起请求提交内容,根据结果继续修改页面或者重新载入页面

  • 5
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

库里不会投三分

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值