关于css:前端主流布局系统进阶与实战

@RestController
public class GreetingController {

// 解析 application/json
@RequestMapping(value = "/hello", method = RequestMethod.POST)
public Object getJson(@RequestBody Object obj) {return obj;}

}

客户端，原生 ajax

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function (ev) {console.log(xhr.readyState);
    if (xhr.readyState === 4){if (xhr.status === 200){console.log(xhr.responseText);
        } else {console.error(xhr.statusText);
        }
    }
};
xhr.open('POST','/hello');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name:'zhuwei', age:'25', hobby:'ball'}))

阅读器请求详情

1534052079504.png

application/x-www-form-urlencoded

服务端，springboot

@RestController
public class GreetingController {

// 解析 application/x-www-form-urlencoded
@RequestMapping(value = "/helloFormUrl", method = RequestMethod.POST)
public String getForm(@RequestParam("name") String name,@RequestParam("age") String age) {return "name="+name+"&"+"age="+age;}

}

客户端，html form 表单

<input type="text" name="name">
<input type="text" name="age">
<input type="submit">

</form>

或者使用 ajax

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function (ev) {console.log(xhr.readyState);
    if (xhr.readyState === 4){if (xhr.status === 200){console.log(xhr.responseText);
        } else {console.error(xhr.statusText);
        }
    }
};

// 生成 post 参数 params，有三种方法，选一种
//1. 使用 URLSearchParams 接口, 会对内容进行 utf8 编码
const params = new URLSearchParams();
params.append('name', '小明');
params.append('age', '18');

//2. 使用 encodeURIComponent 对内容进行编码
// 好处是 url 中的汉字等一些特殊字符会被转为 utf8 编码，缩小出错
const params = "name="+encodeURIComponent("小明")+"&age="+encodeURIComponent("19")  

//3. 不编码间接写，可能服务端会解码谬误
const params = "name= 小明 &age=19"

xhr.open('POST','http://localhost:1234/helloFormUrl');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(params)

download：前端支流布局零碎进阶与实战