【重点】前端后端 [存封装传值数据] [数组对象字符串拼接 array object json ajax]

案例1：前端用数组存值放进input框value中，form表单提交，效果等于字符串拼接 "xxx"+","+"xxx"

var zTreeCheckName = "";
var zTreeCheckId = "";
var zTreeCheckPid = "";
for(var i=0;i<zTreeCheckObj.length;i++){
if(zTreeCheckObj[i].dictname != null)
zTreeCheckName += (i==zTreeCheckObj.length-1)?zTreeCheckObj[i].dictname:zTreeCheckObj[i].dictname+",";
zTreeCheckId += (i==zTreeCheckObj.length-1)?zTreeCheckObj[i].dictid:zTreeCheckObj[i].dictid+",";
zTreeCheckPid += (i==zTreeCheckObj.length-1)?zTreeCheckObj[i].parentdictid:zTreeCheckObj[i].parentdictid+",";
}
$("#zTreeCheckName").val(zTreeCheckName)
$("#zTreeCheckId").val(zTreeCheckId)
$("#zTreeCheckPid").val(zTreeCheckPid)

数组存

var zTreeCheckName = new Array();
var zTreeCheckId = new Array();
var zTreeCheckPid = new Array();
for(var i=0;i<zTreeCheckObj.length;i++){
zTreeCheckName[i]=zTreeCheckObj[i].dictname
zTreeCheckId[i]=zTreeCheckObj[i].dictid
zTreeCheckPid[i]=zTreeCheckObj[i].parentdictid
}
$("#zTreeCheckName").val(zTreeCheckName)
$("#zTreeCheckId").val(zTreeCheckId)
$("#zTreeCheckPid").val(zTreeCheckPid)

后端接收到的数据完全一样：字符串，中间用逗号隔开，外面没有括号包围。

案例2：${xxx}和"${xxx}"

EL表达式获取数据：后端发送数据，前端接收，在html代码块中直接用${xxx}获取，因为默认是文本；在js代码块（即<script></script>）中获取需要用引号包围"${xxx}"，因为没有引号，会把它当做一个变量，但因为这个变量没有声明过，所以会报is not defined。

例如后端发送字符串"tony"到前端，request.setAttribute("name","tony")
前端js代码块里，${name}接收到了tony，但会报tony未定义。需要用引号包围它，即"${name}"。

案例3：后端传json，前端传json

后端传前端：

1. servlet发送，js代码块获取

后端发送json格式字符串，在前端的js代码块中用${xxx}接收到的是对象，而非字符串。不需要引号包围。如图

图中json2和json3的区别，json2在前端接收如果没用引号包围如"${json2}"会报obj1 is not defined。json3无需引号包围，接收到的数据会被直接解析为数组。如右图。

list和map都会报错。
list报abc is not defined。map报Invalid shorthand property initializer

报错Invalid shorthand property initializer，是因为json里冒号写成了等号等其他符号。
{'xxx'='xxx','xxx'='xxx'}

2. servlet发送，ajax获取

后端发送json格式字符串，ajax中默认接收到的是字符串（默认text）。需要用JSON.parse()转成json对象，或者指定dataType："json"（底层jquery会调用jQuery.parseJSON(json)）

response.getWriter().write("{\"message\":\"用户名可用\",\"flag\":true}")

1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
3）$.ajax( { option1:value1,option2:value2... } );
常用的option如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址

$.get()和$.post()的区别：使用起来基本没区别。发送的值含有中文时，若$.get()发送，后端需先编码后解码（即getBytes("iso8859-1"),new String(bytes,"UTF-8")），若$.post()发送，后端不会乱码，不需要request.setCharaterEncoding("UTF-8")，因为jquery底层已经处理了。

        var jsonObject = new Object();
        jsonObject.name = "jack";
        jsonObject.phone = "13879013334";
        jsonObject.id = "asdghj";

$.ajax({
type:"POST",
url: "${pageContext.request.contextPath}/ajax",
  //contentType: "application/json", //用request.getParameter()获取不需要写这个因为写了post类型，默认application/x-www-form-urlencoded，会从请求body中找
dataType: "json", //服务器返回的数据类型。可以写json，也可以写text 有时候后台发过来的json格式字符串会有问题，如BOM头，用json会拿不到数据，需要用text来测试
data: jsonObject, //发送到服务器的参数，直接用json对象。因为contentType没有用"application/json"就不需要用JSON.stringify(jsonObject)转字符串，
success: function (data) {
console.log(data)
},
error: function (data){
alert("解析数据失败！");
}
});

后端发送json字符串到前端ajax，要使用严格的JSON格式！！！{"key1":value,"key2":value}

后端发送json格式字符串"{'message':'用户名可用','flag':true}"，前端ajax的dataType: "json"时，进入error函数，无法解析json。

在java中，需要转义。str="{\"key\":value,\"key\":value}";

response.setContentType("text/html;charset=UTF-8")与response.setContentType("application/json;charset=UTF-8")在这里没有影响

前端传后端

总结：
ajax传json对象，$.ajax()不配置contentType："application/json"
ajax传json字符串，$.ajax()需配置contentType："application/json"

ajax用1传，后端用request.getParameter()接收。
ajax用2传，后端用request.getReader()接收，在springMVC中用@RequestBody。
详细内容见下面

springMVC使用@RequestBody接收json数据时符合总结2，$.ajax()需要传json字符串，@RequestBody才能解析。若不用@RequestBody，用request.getParameter()来接收，则$.ajax()传json对象。

若form表单提交json对象，需将对象转成字符串（即序列化），不然即使用request.getReader()获取的也是object字符。

若ajax提交，可以直接提交json对象（注意：$.ajax()中不要指定contentType: "application/json"，不然后端获取为null，原因见《SpringMVC中使用Ajax请求以json格式返回null值》）。

后端获取值方法1：
request.getParameter("username");request.getParameter("password");
request.getParameter("phone");request.getParameter("id");

后端获取值方法2：
BufferedReader reader = request.getReader();
StringBuffer sb = new StringBuffer();
String line = null;
while((line=reader.readLine())!=null){
sb.append(line);
}
ajax发送json对象的话，无论有没设置contentType："application/json"，都可以用方法2获取到值。获取到的值是这样：name1=xxxxxx&age1=13&price1=4000
ajax发送json字符串（即JSON.stringify(obj)）的话，用方法2获取到的是这样：{"name1":"xxxxxx","age1":13,"price1":4000}。前提是需要设置contentType："application/json"，不然reader字符流读不到内容。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。