简单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后台交互的更多相关文章

  1. Ztree的简单使用和后台交互的写法（二）

    针对Ztree的简单使用和后台交互的写法(一)中的树进行改进 1.增加节点的权限 由页面的当前用户,决定树的根节点 然后动态获取树的详细节点: 初始化函数为: function init(){ //初 ...

  2. ajax简单后台交互

    ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...

  3. java简单web爬虫(网页图片)

    java简单web爬虫(网页图片)效果,执行main()方法后图片就下载道C盘的res文件夹中.没有的话创建一个文件夹代码里的常量根据自己的需求修改,代码附到下面. package com.sinit ...

  4. web storage 简单的网页留言版

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  5. 如何用CropBox实现头像裁剪并与java后台交互

    如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...

  6. web网页练习

    一. HTML部分 1. XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同: XHTML 元素必须被正确地嵌套. XHTML 元 ...

  7. 简单介绍几种Java后台开发常用框架组合

    01 前言 Java框架一直以来都是面试必备的知识点,而掌握Java框架,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能对当前正在开发中的系统有整体的认知,从而更好的熟悉和学习技术,这篇 ...

  8. C#开发BIMFACE系列49 Web网页中加载模型与图纸的技术方案

    BIMFACE二次开发系列目录     [已更新最新开发文章,点击查看详细] 在BIMFACE二次系列博客中详细介绍了服务器端API的调用方式,如下列表 C#开发BIMFACE系列1   BIMFAC ...

  9. 静态网页怎样实现动态交互?-JavaScript

    在Html基础上,javascript能够开发交互式web网页.javascript的出现使得网页和用户之间实现了一种实时性的.动态的.交互性的关系,javascript短小精悍,又是在客户机上执行的 ...

随机推荐

  1. ACL 我为什么要发明一个轮子？

    现在成熟的开发库与开发框架有很多,所以平时我们在开发自己的应用程序时一般直接拿来用就可以了,所以当我先是开发出 C 语言版的 acl 框架库时有人认为是这个轮子是否值得发明,而当我再开发出基于 acl ...

  2. c#编写的基于Socket的异步通信系统--SanNiuSignal.DLL已开源

    自从推出了SanNiuSignal.DLL,用户反映还是满好的;为了更好的服务于大家,我已经修复了很多BUG,同时把这个DLL开源;下面就先来介绍下 使用这个DLL开发出的简单的通信系统;如图: 想使 ...

  3. 基于SAP HANA平台的多团队产品研发

    工欲善其事必先利其器.要提高多团队的开发效率,而且还是在SAP HANA平台上,建议大家还是本着“慢就是快”的原则,不要急功近利,在没有准备好团队开发的架构时就匆忙开始功能的开发.匆忙功能开发就算了, ...

  4. shell多线程之进程间通信（3）

    之前的文章依赖是1对1或1多对的,但每个任务的前置任务都只有1个. 本文的核心在于一个任务依赖于多个任务的执行完成,如上图所示,这个任务就是fact,只有new和dviduser两个任务都完成的情况下 ...

  5. 《Oracle PLSQL从入门到精通》pdf电子版

    链接:https://pan.baidu.com/s/1fhfMtmwM_hOAGgYOfNYlkw提取码:r53a 学习pl/sql的同学,可以看看这本书,讲解的很详细,从入门到精通,大家有什么不懂 ...

  6. vue结合Ant Design实现后台系统的权限分配(支持无限子级嵌套)

    最近公司的业务需要,要做一个后台管理系统的管理系统类似于这样子 功能需求如下: 左边是权限菜单,右边对应的是具体权限. 1.父级权限菜单选中,父级权限菜单的权限包括其中所有子级权限菜单的权限也要选中, ...

  7. LR编写Socket脚本方法1(XML/16进制报文data.ws格式)

    本文主要讲述了Socket协议脚本的基础知识和编写方法,让大家能够在短时间内快速掌握简单的Socket协议脚本的编写方法.1.socket协议介绍Socket协议有万能协议之称,很多系统底层都是用的s ...

  8. Mac sublime text3 安装插件

    一.下载Mac版sublime text3 下载地址:http://www.pc6.com/mac/120663.html(参考) 2.安装后打开 1.在界面的最上端找到tools(英文版),选择第一 ...

  9. spring源码深度解析— IOC 之 默认标签解析（下）

    在spring源码深度解析— IOC 之 默认标签解析(上)中我们已经完成了从xml配置文件到BeanDefinition的转换,转换后的实例是GenericBeanDefinition的实例.本文主 ...

  10. 2019.ccpc女生赛-wfinal总结

    2019ccpc女生赛离它结束有四天了,在这个期间我想了很多,想了想还是决定写这个总结.作为这个队伍唯一的一名大一队员,我很庆幸,能跟着两个学姐一起打比赛,计爱玲师姐,即将工作,张莹俐学姐.这估计都是 ...