您的位置：首页 > Web前端 > JavaScript

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

2018-01-10 23:17 591 查看

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包
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ssm json
相关文章推荐
新的分享
章节导航