前端boostrap架构下使用ajax传值json数据给后台

最新推荐文章于 2022-03-04 09:31:32 发布

xiuFranklin

最新推荐文章于 2022-03-04 09:31:32 发布

阅读量2.9k

点赞数 1

文章标签： ajax 前端 json javaEE后台 boostrap

本文链接：https://blog.csdn.net/xiuFranklin/article/details/50855256

版权

前端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"));
		
	}

备注：本人的javaEE项目采用的Maven管理jar包，获取JASONArray之前须去maven官网找关于jquery-json的jar包管理

第一次写博客，希望可以帮到大家

xiuFranklin

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端boostrap架构下使用ajax传值json数据给后台

前端boostrap架构下，如何使用使用ajax传值json数据呢？步骤如下：第一步：在html页面下构建传输给后台的json数据： Bootstrap 101 Template #xx{ color: red; }
复制链接

扫一扫