【springMVC】简单的前后端数据交流

最最常见两种,一则返回视图模板(文档),二则为json数据。就使用一个源代码文件来看看springmvc是怎么做到的。

1、UserController.java源代码文件

(这里额外的使用了fastjson架包来将对象解析为json)

package com.zay;

import com.alibaba.fastjson.JSON;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by zay on 2016/11/29.
 */

@Controller
@RequestMapping("/User/")
public class UserController {

    /*
    * 前后端json数据交流
    * */
    @ResponseBody
    @RequestMapping("CheckUsername.do")
    public String checkUsername(HttpServletRequest request, HttpServletResponse response) throws IOException{
        System.out.println(request.getParameter("username"));  //获取username字段值
        //这里可进行处理
        //得到处理结果
        AjaxModel ajax = new AjaxModel();  //自定义的 一个ajax数据模型,为了规范前后端数据交流。
        ajax.setMsg("the password is wrong ");
        return JSON.toJSONString(ajax);
    }
    /*
    * 返回视图模板字符串,这里将自动补充先前spring配置的视图前后缀以确定最终的视图页面。
    * */
    @RequestMapping("register.do")
    public String register(){
        return "register";
    }
}

2、其他文件的配置

springmvc-servlet.xml

<beans xmlns="http://www.springframework.org/schema/beans"
               xmlns:context="http://www.springframework.org/schema/context"
               xmlns:p="http://www.springframework.org/schema/p"
               xmlns:mvc="http://www.springframework.org/schema/mvc"
               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:schemaLocation="http://www.springframework.org/schema/beans
      http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context.xsd
      http://www.springframework.org/schema/mvc
      http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<!-- 启动注解驱动的Spring MVC功能,注册请求url和注解POJO类方法的映射-->
<mvc:annotation-driven />
<!-- 启动包扫描功能,以便注册带有@Controller、@Service、@repository、@Component等注解的类成为spring的bean -->
<context:component-scan base-package="com.zay" />
<!-- 对模型视图名称的解析,在请求时模型视图名称添加前后缀 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:prefix="/" p:suffix=".jsp" />
</beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
        <!-- load-on-startup元素标记容器是否在启动的时候就加载这个servlet(
             值必须是一个整数,表示servlet应该被载入的顺序 -->
    </servlet>

    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
</web-app>

register.jsp

<%--
  Created by IntelliJ IDEA.
  User: zay
  Date: 2016/11/29
  Time: 15:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
        $(function(){
            $("#user").blur(function(){
               $.ajax({
                   url:‘/springmvc/User/CheckUsername.do‘,
                   data:{
                       username:$("#user").val()
                   },
                   dataType:"json",
                   type:"POST",
                    success:function(data,status){
                        alert(data.msg);
                    }
               });
            });
        });
    </script>
</head>
<body>
    <p>给自己找个登录名:</p>
    <input id="user" type="text" name="user"/>
</body>
</html>

3、架包的引用,除了基本的spring架包外,还使用了fastjson架包。

时间: 2024-10-03 13:38:37

【springMVC】简单的前后端数据交流的相关文章

前后端数据交互方法

在此介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率. 此文章适合前后端协同开发经验不足的新手阅读. 目录: HTML赋值 JS赋值 script填充JSON AJAX获取JSON WebSocket实时传输数据 总结 HTML赋值 输出到 Element 的 value 或 data-name <input type="hidden" value="<?php echo $user_avatar;?>" /> &

web前后端数据交互

前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个list.js来说明后端是如何将数据传到前端,前端是如何获取数据,并进行数据展示的. /** * 列表方法 * 1.列表页面显示列表内容的div容器ID为list_container * 2.列表页面模板区域textarea的ID为list_template * 3.列表页面显示列表页码下拉框的div容

初识 vue —— 最简单的前后端交互示例

一.初识 vue 时的困惑 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳永

前后端数据交互处理基于原生JS模板引擎开发

json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那里断点,观察是否有错误. <!DOCTYPE html> <html> <head> <title>前后端数据交互处理原生JS模板引擎开发</title> <meta charset ='utf-8'> <script type=&

前后端数据交互

前后端数据交互以及连接数据库流程: 首先需要在后台建立数据库,并且连接数据库,打开apache服务器确保所有文件代码在服务器中运行 这里是封装好的连接数据库通用模式(一定要确保数据库是否连接成功) 1:前端jsp页面设置form表单或是可以让用户提交用户信息的格式,确定需要传递的参数name让用户输入,通过点击按钮后submit()提交到后台: (这里是引用了bootsrap的模态框) 通过ajax传递参数(引用已经封装好的ajax) 自己封装好的ajax: function ajax(opti

实现前后端数据交互的方法

前端工程师的职责:1.UI重构  2.在正确的区域渲染出服务端的数据. 毕竟,我们要构建一个大的web应用,必然不是普普通通的静态页面构成. 下文将罗列前端工程师应该必备的同后端打交道的常用技能. 1.服务端渲染 谈起服务端渲染,对于动态服务而言,这个世界上跑的大多数页面都经过服务端的数据渲染,接口->前端赋值->模板渲染. 这些都是在服务器完成,在我们查看源码的时候,可以看到完整的html代码,包括每个数据值. 常用的php模板:Smarty,Blade,Mustache. 如果使用Node

Spring MVC前后端数据交互总结

控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是servlet的替代品. - append Spring MVC在Web应用中扮演V的角色,负责处理HTTP请求并返回相应的资源,它在用的时候要配置一个核心的Dispatcher负责检查资源,请求过来的时候会查找是否有相应的Handler,有就会把请求交给Controller,一般使用注解来配置暴露给用户

spring mvc 前后端数据交互笔记(解决httprequest400,415问题)

1:前端发送数据,后端返回界面 A:浏览器 $.ajax({     url: "/rest/userController/login",     type: "post",     data: {"username": "chenhao", "password": "123456"} }); B:服务端 @RequestMapping("/login") publi

spring mvc 前后端数据交互笔记(解决415,400问题)

1:前端发送数据,后端返回界面 A:浏览器 $.ajax({ url: "/rest/userController/login", type: "post", data: {"username": "chenhao", "password": "123456"} }); B:服务端 @RequestMapping("/login") public String log