简单web网页与SSM后台交互
简单web网页与SSM后台交互
情况说明
如今，已经搭建好SSM后台开发环境，并且可以经由postman工具测试成功。现在尝试写出web前端网页，通过实现简单的提交、注册、查询功能来加深对前后端数据传输格式、接口设置等理解。
编程思路
大体的思路得正确，为实现以上需求，首先需要确定的是，主要编写简单网页的方式是通过js实现点击按钮向后台发送get或post请求。
实现结果
由于笔者前端js语言应用经验较少，首先在网上找到简单网页的代码模板，如下：
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript" src="submit.js"></script>
</head>
<body>
<form name="myform" method="post">
<label for="user">用户名</label>
<input type="text" id="user" name="user" value="d">
<br />
<label for="password">密码</label>
<input type="password" id="password" name="password" value="d">
<br />
<label for="user">原名</label>
<input type="realName" id="realName" name="realName" value="lallll">
<br />
<input type="button" id="submit" name="submit" value="登录" onclick="Submit()">
<input type="button" id="signUp" name="signUp" value="注册" onclick="SignUp()">
<br />
<label for="user">用户id</label>
<input type="text" id="userId" name="userId" value="6">
<br />
<input type="button" id="query" name="query" value="查询" onclick="Query()">
</form>
</body>
整个代码结构还是比较清晰的，就是最基本的html结构，需要注意的是在head部分引入了两个src。针对以上代码做一点说明：
- 其中一个是在线引用jQuery。jQuery是一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。总而言之，jQuery可以帮助你更加方便的实现js发送get或post请求
- 另外一个是引入submit.js。submit.js是另一个文件，主要负责具体实现get或post请求。
- 在input/button标签或者需要发送数据的地方，增加一个onclick的属性，这些方法在submit.js中实现。
submit.js
function Submit() {
console.log($('#user').val(),$('#password').val());
var jsonData={
"userId":4,
"userName":$('#user').val(),
"passWord":$('#password').val(),
"realName":"d"
}
$.ajax({
type: "POST",
dataType: "json",
url: "http://localhost:8889/user/enterUser",
contentType: 'application/json',
data: JSON.stringify(jsonData),
success: function () {
alert('Bingo!')
},
error: function () {
alert("Bad！");
submitted = false;
}
});
}
function Query() {
console.log($('#userId').val());
$.ajax({
type: "GET",
url: "http://localhost:8889/user/getUser/"+$('#userId').val(),
success: function (data) {
alert(data.userId+" "+data.userName +" "+data.passWord+" "+data.realName)
alert("Bingo!")
},
error: function () {
alert("Bad");
}
});
}
//注册功能测试时，需要改一下用户名（相同用户名不能再注册）
function SignUp() {
console.log($('#userId').val());
var jsonData={
"userName":$('#user').val(),
"passWord":$('#password').val(),
"realName":$('#realName').val()
}
$.ajax({
type: "POST",
url: "http://localhost:8889/user/addUser",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify(jsonData),
success: function () {
alert("Bingo!")
},
error: function () {
alert("Bad");
}
});
}
对以上代码做几点说明：
- 以上三个方法的实现有很多相似之处，大体框架是一样的。
- 编程小技巧：console.log($('#userId').val())可以把需要观察的值写在日志里，在浏览器端F12就可以在控制台看到
- 针对具体运行结果是走success还是error，主要看发送get或post请求后，后台返回的状态码(是OK还是NOT_FOUND)。另外success中function括号中可能包含的data只是接受返回的数据，名字无所谓的。比如Submit.js对应的后台登录代码：
//返回类型是ResponseEntity(可以添加HttpStatus状态码)
@RequestMapping(value="enterUser", method={RequestMethod.POST, RequestMethod.GET})
public ResponseEntity<User> EnterUser(@RequestBody User user){
System.out.println(user);
User check_userName = userService.check(user);
if (check_userName == null)
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
return new ResponseEntity<>(userService.EnterUser(user), HttpStatus.OK);
}
bug说明(本次练习遇到两次靠自己没能解决的bug，好在得到师兄的帮助解决了)
- 首先的问题是码完test.html和submit.js后，双击test.html运行，结果在chrome上显示如图：
在Firefox上显示如图：
可以得到结论，火狐浏览器在开发者角度上很不错，尤其在针对国内开发者。两个浏览器都显示是跨域请求出现了问题，在网上找了一遍，很多解决办法，但是好像都挺复杂的。尝试了其中一种，安装chrome插件 Allow-Control-Allow-Origin: *，同样也给Firefox安上插件，然并卵。
最终解决办法是把test.html和submit.js放到后台框架SSM的resource资源文件中(如此便在一个域中)，如此在浏览器端输入localhost:8889/test.html即可访问成功
- 第二个bug是在码完Query方法时出现，无法正常返回user信息。找了半天，不知道问题在哪。
最终解决办法是发现是后台出现了问题，后台并没有返回user对象，而是简单返回了一个字符串。所以前后端对接乃至接口设置都至关重要。<后台背锅呀！>
简单web网页与SSM后台交互的更多相关文章
- Ztree的简单使用和后台交互的写法（二）
针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...
- ajax简单后台交互
ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...
- java简单web爬虫(网页图片)
java简单web爬虫(网页图片)效果,执行main()方法后图片就下载道C盘的res文件夹中.没有的话创建一个文件夹代码里的常量根据自己的需求修改,代码附到下面. package com.sinit ...
- web storage 简单的网页留言版
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- 如何用CropBox实现头像裁剪并与java后台交互
如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...
- web网页练习
一. HTML部分 1. XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元 ...
- 简单介绍几种Java后台开发常用框架组合
01 前言 Java框架一直以来都是面试必备的知识点,而掌握Java框架,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能对当前正在开发中的系统有整体的认知,从而更好的熟悉和学习技术,这篇 ...
- C#开发BIMFACE系列49 Web网页中加载模型与图纸的技术方案
BIMFACE二次开发系列目录 [已更新最新开发文章,点击查看详细] 在BIMFACE二次系列博客中详细介绍了服务器端API的调用方式,如下列表 C#开发BIMFACE系列1 BIMFAC ...
- 静态网页怎样实现动态交互?-JavaScript
在Html基础上,javascript能够开发交互式web网页.javascript的出现使得网页和用户之间实现了一种实时性的.动态的.交互性的关系,javascript短小精悍,又是在客户机上执行的 ...
随机推荐
- 使用SpringMVC框架解决中文乱码的问题
spring Web MVC框架提供了org.springframework.web.filter.CharacterEncodingFilter用于解决POST方式造成的中文乱码 问题. 需要在we ...
- 设置windows2008系统缓存大小限制,解决服务器运行久了因物理内存耗尽出僵死（提升权限后，使用SetSystemFileCacheSize API函数，并将此做成了一个Service）
声明: 找到服务器僵死的原因了,原因是虚拟内存设置小于物理内存. 只要虚拟内存设置为系统默认大小就不会出生僵死的现象了. 当时因为服务器内存48G,系统默认虚拟内存大小也是48G, 觉得太占硬盘空间, ...
- Delphi子类调用祖父类的虚函数
因为看Delphi书的时候,就产生了疑惑.老讲调用父类虚函数,但是万一需要调用祖父虚函数怎么办?后来又经常在C++里看到,就更疑惑了 type TA = class procedure ShowMsg ...
- Realm_King 之 .NET 打包详细教程(B)
上篇(Realm_King 之 .NET 打包详细教程(A))给大家讲述了打包基本的操作,接下来帮助大家如何覆盖安装,希望大家仔细阅读... (一)看到你的解决方案,选中你的安装程序,点击F4会弹出改 ...
- 八大排序算法 JAVA实现 亲自测试 可用！
今天很高兴 终于系统的实现了八大排序算法!不说了 直接上代码 !代码都是自己敲的, 亲测可用没有问题! 另:说一下什么是八大排序算法: 插入排序 希尔排序 选择排序 堆排序 冒泡排序 快速排序 归并排 ...
- Zookeeper详解-伪分布式和集群搭建（八）
说到分布式开发Zookeeper是必须了解和掌握的,分布式消息服务kafka .hbase 到hadoop等分布式大数据处理都会用到Zookeeper,所以在此将Zookeeper作为基础来讲解. Z ...
- MQ消息队列搭建命令及方法
MQ 是一款稳定.安全又可靠的消息传递中间件.它使用消息和队列来支持应用程序.系统.服务和文件之间的信息交换.它可以简化和加速多个平台中不同应用程序和业务数据的集成.支持各种 API 和语言,并可以在 ...
- PATA 1006. Sign In and Sign Out (25)
#include <bits/stdc++.h> using namespace std; const int N = 100005; struct visitor{ char ID[20 ...
- 使用new新建动态二维数组(多注意)
#include<iostream> using namespace std; int main() { //设想要建立一个rows行,cols列的矩阵 //使用new进行新建 int r ...
- SwiftLint：代码规范检查工具介绍
Swift-CodeStyle Checker:SwiftLint 介绍: SwiftLint 是一个用于强制检查 Swift 代码风格和规定的一个工具,基本上以 GitHub's Swift 代码风 ...