江门营销网站建设,建设一个营销型网站,推广网站的图片怎么做,移动网站建设哪家快目录
一、计算器
1、前端页面
2、服务器处理请求
3、效果
二、用户登陆系统
1、前端页面
#xff08;1#xff09;登陆页面
#xff08;2#xff09;欢迎页面
2、前端页面发送请求--服务器处理请求
3、效果
三、留言板
1、前端页面
2、前端页面发送请求
1登陆页面
2欢迎页面
2、前端页面发送请求--服务器处理请求
3、效果
三、留言板
1、前端页面
2、前端页面发送请求
1获取之前的页面留言
2发送填写的留言
3、服务器处理请求
1针对获取之前留言的请求
2针对发送留言的请求
4、前端页面处理服务器的响应
1处理获取到全部留言的响应
2处理发表留言后的响应
5、效果 一、计算器
1、前端页面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
form actioncalc/sum methodposth1计算器/h1数字1input namenum1 typetextbr数字2input namenum2 typetextbrinput typesubmit value 点击相加
/form
/body/html发送的是form请求请求路径为calc/sum请求方法为post。
页面效果 2、服务器处理请求 3、效果 二、用户登陆系统
1、前端页面
前端有两个页面登录页面和欢迎页面。登陆成功可以跳转欢迎页面。
1登陆页面
!DOCTYPE html
html langenheadmeta charsetUTF-8title登录页面/title
/headbody
h1用户登录/h1
用户名input nameuserName typetext iduserNamebr
密码input namepassword typepassword idpasswordbrinput typebutton value登录 onclicklogin()script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/script
scriptfunction login() {}/script
/body/html
2欢迎页面
!doctype html
html langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle用户登录首页/title
/headbody
登录人: span idloginUser/spanscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/script
script/script
/body/html
效果 2、前端页面发送请求--服务器处理请求
在登陆页面发送json请求url为login/check参数有username和password请求方法为post。 服务器处理上面请求 登陆页面处理来着服务器的响应 登陆成功跳转到欢迎页面
欢迎页面发送json请求url/login/index请求方式get请求内容为空。 服务器处理上面请求 欢迎页面处理来自服务器的响应 3、效果 三、留言板
1、前端页面
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title留言板/titlestyle.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}/style
/headbodydiv classcontainerh1留言板/h1p classgrey输入后点击提交, 会将信息显示下方空白处/pdiv classrowspan谁:/span input typetext name idfrom/divdiv classrowspan对谁:/span input typetext name idto/divdiv classrowspan说什么:/span input typetext name idsay/divinput typebutton value提交 idsubmit onclicksubmit()!-- divA 对 B 说: hello/div --/divscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscriptfunction submit(){}/script
/body/html效果 2、前端页面发送请求
在进入页面的时候该页面希望获取到之前的页面留言在填写完留言内容后希望页面能显示出内容。虽然目前前端已经可以显示但是浏览器刷新后就没了。
1获取之前的页面留言
请求类型json请求方式为get请求数据为空url/message/getList 2发送填写的留言
请求类型json请求方式post请求数据留言内容url/message/postList 3、服务器处理请求
定义留言对象 1针对获取之前留言的请求 2针对发送留言的请求 4、前端页面处理服务器的响应
1处理获取到全部留言的响应 2处理发表留言后的响应 5、效果
