第一json字符串定义
1 直接定义
<script>
var str ='{"name": "lili"}' ; console.log(str);------->{name: "lili"}
</script>
2存在js对象，把js对象直接转换成json字符串
var obj = {"name": "lili"}; console.log(obj);------>{"name": "lili"}-------string
var str2 = JSON.stringify(obj); console.log(str2)------->{name: "lili"}----object
第二后台传给前端json字符串，需要转换成js对象才能够使用
var obj2 = JOSN.parse(str2); console.log(obj2);---------->{name: "lili"}---type: object
console.log(typeof obj2); -------->object
AJAX可以进行局部刷新，不加载整个页面
原生的ajax
先创建一个对象
var xhr = new XMLHttpRequest();
//get请求
xhr.open("get","/ajax?user=xiaoli&pass=111",true) //参数说明，请求方法，请求的url，是否async异步（意思就是是否选择局部进行更新）
xhr.send();
form 是浏览器发送的请求，会改变浏览器的地址；ajax 是js发送的请求不会改变浏览器的地址
//post请求,使用原生的ajax的时候必须设置请求头
xhr.open("post","/ajax",true)；
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username=xiaoli&pass=111");
xhr.onreadystatechange=function{
}
第二种jq的ajax,这种推荐
<button id = "btn">提交</button>
<script scr="jauery.js"></script>
<script>
var btn = $("#btn");
btn.click(function(){
$.ajax({ //$.ajax就是jq的ajax的写法
"method": "get",
"url": "/ajax",
"data": {
username: "xiaoli",
pass: "111"
},
"success": function(data){ //data就是用来接收后台返回的数据的
console.log("success");
console.log(data);
$("#wrap").html(data); //这里是把服务端返回的数据展示到页面上 ，wrap是标签的id
},
"error": function(error){
console.log("error");
console.log(error); //这里的error是一个对象里面有很多的属性，可以通过.打印出来
console.log(error.statusText);
}
});
});
</script>
jq里面获取前端输入的用户名密码
"data": {
username: $("#username").val(), //这里username是input标签的id
}
js获取值是 js.value