SSM框架下使用JSON和AJAX进行前后端数据传输

最新推荐文章于 2022-07-31 01:12:20 发布

Adam_allen

最新推荐文章于 2022-07-31 01:12:20 发布

阅读量4.7k

点赞数 6

分类专栏： json 文章标签： ssm json

本文链接：https://blog.csdn.net/Adam_allen/article/details/79029379

版权

json 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

SSM框架下使用JSON和AJAX进行前后端数据传输

随着前后端分离开发，前端使用ajax发送请求，后台提供相应的服务，之间的数据传递用JSON来完成！

接下来用登陆功能来演示前后端通过JSON交互

1. 前端页面

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/1/10 0010
  Time: 上午 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
</head>
<body>
<h1>登录页面</h1>
用户名：<input id="username" type="text" name="username"/><p/>
密码：<input id="password" type="password" name="password"/></p>
<button id="btn" type="button">登录</button><p/>
<span id="info"></span>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#btn").click(function(){
            $.ajax({
                //提交数据的类型 POST GET
                type:"POST",
                //提交的网址
                url:"login",
                //提交的数据
                data:{username:$("#username").val(),password:$("#password").val()},
                //返回数据的格式
                datatype: "json",
                //成功返回之后调用的函数
                success:function (data){
                    $("#info").html(data.status);
                },
                //调用出错执行的函数
                error: function(error){
                   aler("ajax error : "+error);
                }
            });
        });
    });
</script>
</body>
</html>

ajax的一些详细用法

url : 要求为String类型的参数，（默认为当前页地址）发送请求的地址
type : 要求为String类型的参数，请求方式（post或get）默认为get
async : 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行
data : 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{fo1:”bar1”,foo2:”bar2”}转换为&foo1=bar1&foo2=bar2。
dataType : 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。

function(data, textStatus){
     //data可能是xmlDoc、jsonObj、html、text等等
     this;  //调用本次ajax请求时传递的options参数
         }

error : 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为”application/x-www-form-urlencoded”。该默认值适合大多数应用场合。

2. controller

package com.shangfu.controller;

import com.shangfu.dao.UserDao;
import com.shangfu.model.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.util.HashMap;
import java.util.Map;

@Controller
public class LoginController {
    @Autowired
    private UserDao userDao;

    @RequestMapping(value="/login" , method= RequestMethod.POST , produces="application/json;charset=UTF-8")
    public @ResponseBody Map<String,String> test(@RequestParam("username") String username, @RequestParam("password") String password,HttpServletResponse response){
        Map<String,String> map = new HashMap<String, String>();
        if(username.equals("hyh")&&password.equals("123")) {
            map.put("status", "success");
            return map;
        }
        map.put("status", "error");
        return map;
    }
}

pom文件添加架包

<!-- Jackson  fastjson-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.5.2</version>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.5.2</version>
        </dependency>

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.5.2</version>
        </dependency>

spring-mvc.xml添加代码

<mvc:annotation-driven/>

代码处添加@ResponseBody,这个注解会自动调用相关jar包的api将你要返回的对象自动的转化为JSON字符串后，封装到response中，然后返回给浏览器！

3. 出现的问题，页面出现错误，代码如下：

400
出现这个错误是，前端发送的数据和服务器接收的数据格式不同导致的，例如，前端发送的是json,而后台接受到的数据类型为key-value，就会报这个错误！
前端使用的是key-value,后端使用的json(本文所用)
406
缺少json转化的相关的jar包

Adam_allen

关注

6
点赞
踩
34

收藏

觉得还不错? 一键收藏
3
评论
SSM框架下使用JSON和AJAX进行前后端数据传输

SSM框架下使用JSON和AJAX进行前后端数据传输随着前后端分离开发，前端使用ajax发送请求，后台提供相应的服务，之间的数据传递用JSON来完成！（本节内容需要你有javascript基础）接下来用登陆功能来演示前后端通过JSON交互1. 前端页面<%-- Created by IntelliJ IDEA. User: Administrat
复制链接

扫一扫