第一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