springMVC前后端多种数据交互

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一、 ajax不传数据的时候

$.ajax({
            url: "http://localhost:8080/test.do",
            type: "POST",
            dataType: "text",
            success: function(data) {
                alert(data);
            },
            error: function() {
                alert("error");
            }
        });
@RequestMapping(value="test.do",method= RequestMethod.POST,produces = "application/text;charset=UTF-8;")
    @ResponseBody
    public String test(){
        return "后台返回";
    }

二、ajax向后台传递一个字符串(注意前后台的编码!)

$.ajax({
            url: "http://localhost:8080/test.do",
            type: "POST",
            dataType: "text",
            contentType:"application/text;charset=UTF-8",
            data:"前端数据",
            success: function(data) {
                alert(data);

            },
            error: function() {
                alert("error1");
            }
        });
@RequestMapping(value="test.do",method= RequestMethod.POST,produces = "application/text;charset=UTF-8;")
    @ResponseBody
    public String test(@RequestBody String str){
        return "后台返回:" + str;
    }

三、当ajax要想传递给后台一个json数据,后台解析该json数据。

spring版本不能过高!

   
    
      org.springframework
      spring-webmvc
      3.2.4.RELEASE
    

1. 必须要导入依赖包:jackson-mapper-asl


    
      org.codehaus.jackson
      jackson-mapper-asl
      1.9.13
    

2. 注意前端用JSON对象来转换,后台注意使用一个对应于json属性的List接收,并解析!

var arrSend=[];
        var jsonSend={"action":"操作1","data":"数据1"};
        var jsonSend2={"action":"操作2","data":"数据2"};
        arrSend.push(jsonSend);
        arrSend.push(jsonSend2);
        $.ajax({
            url: "http://localhost:8080/test.do",
            type: "POST",
            dataType: "text",
            contentType:"application/json;charset=UTF-8",
            data:JSON.stringify(arrSend),
            success: function(data) {
                alert(data);
            },
            error: function() {
                alert("error1");
            }
        });
@RequestMapping(value="test.do",method= RequestMethod.POST,produces = "application/text;charset=UTF-8;")
    @ResponseBody
    public String test(@RequestBody Listajaxposts){
        for(ajaxpost ap : ajaxposts){
            System.out.print("\naction = " + ap.getAction()+",data="+ap.getData());
        }
        return "后台已经成功接收到json数据";
    }

四、后台把给前端返回json数据

1. 后台返回JSON数据类型:JSONObject  和 JSONArray(json数组) (导入以下的包)


      net.sf.json-lib
      json-lib
      2.4
      jdk15
    

2. 注意前后端的数据类型定义

1、 "application/json;charset=UTF-8"  :定义前端发送的数据类型为  json 

2、dataType: "json"  : 定义前端接收的数据类型为  json 

3、produces = "application/json;charset=UTF-8;" :定义后台返回的数据类型为  json 

$.ajax({
            url: "http://localhost:8080/test.do",
            type: "POST",
            dataType: "json",
            contentType:"application/json;charset=UTF-8",
            data:JSON.stringify(arrSend),
            success: function(data) {
                console.log("\n"+data);
            },
            error: function() {
                alert("error1");
            }
        });
@RequestMapping(value="test.do",method= RequestMethod.POST,produces = "application/json;charset=UTF-8;")
    @ResponseBody
    public JSONObject test(@RequestBody Listajaxposts){

        for(ajaxpost ap : ajaxposts){
            System.out.print("\naction = " + ap.getAction()+",data="+ap.getData());
        }
        JSONObject obj = new JSONObject();
        obj.put("KEY1","VALUE1");
        return obj;
    }
@RequestMapping(value="test.do",method= RequestMethod.POST,produces = "application/json;charset=UTF-8;")
    @ResponseBody
    public JSONArray test(@RequestBody Listajaxposts){

        for(ajaxpost ap : ajaxposts){
            System.out.print("\naction = " + ap.getAction()+",data="+ap.getData());
        }

        JSONArray arr = new JSONArray();
        JSONObject obj = new JSONObject();
        obj.put("KEY1","VALUE1");
        arr.add(obj);
        System.out.print(arr);
        return arr;
    }

五、用字符串的形式完整传输HTML页面内容。

如果把HTML页面的数据当字符串的形式传输给后台,直接传输是不成功的,因为HTML页面中有很多字符是“敏感字符”,所以对于这些敏感字符需要进行转义。你可以尝试挨个挨个在前端先进行转义,然后在java后台再一个一个进行解码。那js 和 java 提供了一个比较方便的方法帮你转义,就是:URL编码转义。

1. js:encodeURI() 函数可把字符串作为 URI 进行编码。

该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#

$('#btn').click(function () {


        var strH = '\n' +
            '    \n' +
            '        \n' +
            '        \n' +
            '        \n' +
            '        ';
        var strBd = '\n' +
            '\n' +
            '    \n' +
            '        \n' +
            '        \n' +
            '        \n' +
            '        \n' +
            '        \n' +
            '    \n' +
            '    \n' +
            '        \n' +
            '        \n' +
            '        \n' +
            '        \n' +
            '        \n' +
            '    \n' +
            '
12345
12345
'; var End = '\n' + ' '; var htmlStr = strH+strBd+End; $.ajax({ url:"htmlInStrTest.do", type: "POST", dataType: "text", contentType:"application/text;charset=UTF-8", data:encodeURI(htmlStr), success: function(data) { alert(data); }, error: function() { alert("error in model 2 post EmailHtmlTest.do"); } }); });

2. java:java.net.URLDecoder.decode

@Controller
public class TestController {

    @RequestMapping(value="htmlInStrTest.do",method= RequestMethod.POST,produces = "application/text;charset=UTF-8;")
    @ResponseBody
    public String htmlInStrTest(@RequestBody String str){

        System.out.print("\n\n str = "  + str);
        String  mailHtmlContent  = "";
        try {
              mailHtmlContent = java.net.URLDecoder.decode(str,"UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        System.out.print("\n\n str = "  + mailHtmlContent);
        return "传输完整HTML字符内容成功";
    }
}

六、基于springMVC实现的文件上传

详见博客:https://my.oschina.net/u/3697586/blog/1600615

 

转载于:https://my.oschina.net/u/3697586/blog/1592818

你可能感兴趣的:(springMVC前后端多种数据交互)