前端boostrap架构下使用ajax传值json数据给后台前端boostrap架构下，如何使用使用ajax传值json数据呢？步骤如下：

53 阅读 0 评论 35 点赞

我是靠谱客的博主幸福云朵，最近开发中收集的这篇文章主要介绍前端boostrap架构下使用ajax传值json数据给后台前端boostrap架构下，如何使用使用ajax传值json数据呢？步骤如下：，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前端boostrap架构下，如何使用使用ajax传值json数据呢？步骤如下：

第一步：在html页面下构建传输给后台的json数据：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
#xx{
color: red;
}
</style>
</head>
<body>
<form name="myForm" id="fm">
<input name="uid" type="hidden" value="1" />
<input name="username" type="text" id="user_id"/>
<input name="password" type="text" id="pwd_id"/>
<select name="grade" id="grade">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3" selected="selected">三年级</option>
<option value="4">四年级</option>
<option value="5">五年级</option>
<option value="6">六年级</option>
</select>
<input name="sex" type="radio" checked="checked" value="1" />男
<input name="sex" type="radio" value="0" />女
<input name="hobby" type="checkbox" checked="checked" value="1" />游泳
<input name="hobby" type="checkbox" checked="checked" value="2" />跑步
<input name="hobby" type="checkbox" value="3" />羽毛球
<button id="btnSubmit">点击</button>
</form>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="js/jquery.json.js"></script>
<script>
<span style="color:#ff0000;">
$("#btnSubmit").on("click",function(){
var us=$("#user_id").val();
var pwd = $("pwd_id").val();
var mess=[{'userName':us,'passwd':pwd},{'name':'king','age':26}];
$.ajax({
type: "POST",
url: "/StuMs/test001",
data: "mess="+JSON.stringify(mess),
dataType:"json",
success:alert("输入信息成功")
});
});</span>
</script>
</body>
</html>

注意：

1）当把多个json对象封装到一个数组中时，后台接收的json数据类型也必须是jsonArray类型的；

2）ajax的url格式问题：url地址为controller层的映射路径，其实就是与我们以前做表单提交的action路径一样

3）ajax的data格式问题：data数据类型必须是："json名="+JSON.stringify(json名)，

4）ajax的格式问题：url地址为controller层的映射路径，其实就是与我们以前做表单提交的action路径一样

第二步：javaEE后台的Controller层获取json数据

@Controller
public class TestPost{
@RequestMapping("/test001")
public void getPostValue(HttpServletRequest request) throws JSONException
{
String jsonString = request.getParameter("mess");
JSONArray array = new JSONArray(jsonString);
JSONObject js1 = array.getJSONObject(1);
System.out.println(js1.getString("name"));
}