美文网首页
05json交互

05json交互

作者: RobertLiu123 | 来源:发表于2019-08-05 08:41 被阅读0次

第1-2节
JSON.parse()【从一个字符串中解析出json对象】
JSON.stringify()【从一个对象中解析出字符串】
json交互
json形式
1、json对象

{key1:value1,key2:value2}

2、json数组

[{key1:value1,key2:value2},{key1:value1,key2:value2},{key1:value1,key2:value2}]

准备工作
引jar,相关的pom描述:

   <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.8.8</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.8.0</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.8.8</version>
    </dependency>

模拟正式开发-开发准备
1)有一个java类,tabclass,想要对他进行操作

public class TabClass {
    private int classId;
    private String className;
......
}

如果是请求添加,应该收到classid,classname.给用户返回处理结果。我拼装一个返回对象(返回码和描述)
0 -成功
999-未知异常
-1 -失败
2)操作返回对象

public class ResultMsg {
   private int resultCode;
   private String errorMsg;
。。。。。。
}

3)src/main/webapp下新建js包,将jquery-1.11.2.min.js拷贝进来
请求是key-value,响应json
addclass.jsp增加以下代码,利用form表单序列化功能

 <input type="button" id="btn2" value="请求kv,响应json"/>
 $("#btn2").bind("click",function(){
       $.ajax({
           type: "POST",
           url: "<%=request.getContextPath()%>/json/addkv.action",
          data:$("#form1").serialize(),
           success: function(msg){
             alert( "返回码: " + msg.resultCode );
           }
        });
   })

后台controller

@RequestMapping("/addkv")
public @ResponseBody ResultMsg addkv(TabClass tabClass) {
    ResultMsg rm = new ResultMsg();
    rm.setResultCode(0);
    rm.setErrorMsg("添加成功");
    return rm;
}

第2节 学生练习上面的程序
第3节 请求响应都是json
后台关键点:@RequestBody @ResponseBody
@RequestBody 用户前台输入json形式------->后台自动转换成java对象形式
@ResponseBody 后台java代码返回对象形式---->自动给前台转换成json形式
代码需要变动的:除了需要加注解,其他的不用动。
1)新建addclass.jsp,并发送json形式的请求。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="<%=request.getContextPath()%>/js/jquery-1.11.2.min.js"></script>
<script src="<%=request.getContextPath()%>/js/myjquery.js"></script>
<script>
   $(function(){
       //为btn1绑定单击事件
       $("#btn1").bind("click",function(){
          // var id=$("#classId").val();
           //var name=$("#className").val();
         //发送ajax请求,请求后台进行添加 
           $.ajax({
               type: "POST",
               contentType:"application/json",//传递json时必填
               url: "<%=request.getContextPath()%>/tclass/add2.action",
               /* data: '{"classId":'+id+',"className":'+name+'}', */
               /*JSON.stringify 把对象序列化成字符串
               serializeObject是把form序列化成对象*/
               data:JSON.stringify($("#form1").serializeObject()),
               success: function(msg){
             alert( "返回码: " + msg.resultCode );
               }
            });
           
       })
       
   })
</script>
</head>
<body>
<form id="form1" method="post">
   编号: <input type="text" name="classId" id="classId"/><br>
  名称: <input type="text" name="className" id="className" /><br>
  <input type="button" id="btn1" value="来去都json"/>
</form>
</body>
</html>

2)其中的myjquery.js用于将form序列化成对象

jQuery.prototype.serializeObject=function(){  
    var obj=new Object();  
    $.each(this.serializeArray(),function(index,param){  
        if(!(param.name in obj)){  
            obj[param.name]=param.value;  
        }  
    });  
    return obj;  
};

3)后台controller

@Controller
@RequestMapping("/tclass")
public class JsonController {
    /*
     * 收发都json
     */
    @ResponseBody
    @RequestMapping("/add2")
   public ResultMsg add(@RequestBody TabClass tabClass){
        ResultMsg rm=new ResultMsg();
        rm.setResultCode(0);
        rm.setErrorMsg("添加成功");
    return rm;
   }
}

相关文章

  • 05json交互

    第1-2节JSON.parse()【从一个字符串中解析出json对象】JSON.stringify()【从一个对象...

  • 首先引入交互函数 使用交互函数进行交互

  • 关于交互的思考

    在做交互之前,个人觉得有必要对交互进行些许总结,以明确三个问题:交互是什么?为什么要做交互?怎么做交互? 交互是什...

  • Windows下从零开始学习nodejs4.X+express4

    nodejs交互环境 nodejs交互环境简称 : REPL类似于Python的交互环境, nodejs的交互环境...

  • 我们要做个官网

    产品:我们要做个官网。 交互:好啊,好啊, 交互:需求是什么? 产品:刚才的就是啊。 交互:。。。。。。 交互:能...

  • 交互设计

    交互设计中有个预设用途原则,要让用户一看见它就知道如何使用。 动效的交互过程可以拆分为交互对象+交互行为+交互反馈...

  • I/O交互,web交互(8.10)

    I/O交互 终端交互使用

  • 程序猿学习UE交互设计

    本文结构 什么是交互 一些交互设计原则 交互文档该怎么写 交互设计的责任边界 学习路径 延伸阅读 什么是交互 1....

  • 语音交互基础知识(语言唤醒、语音识别、语音理解和语音合成)

    AI时代的到来,增强了硬件产品的人机交互、语音交互以及AR、VR交互。语音交互是交互方式在智能领域的一种探索。语音...

  • 微交互

    一、什么是微交互? 微交互是在交互设备上的单一交互流程的细节优化。 二、微交互要做到哪些? 1、克制。 去掉多余的...

网友评论

      本文标题:05json交互

      本文链接:https://www.haomeiwen.com/subject/hlrldctx.html