AJAX 教程及JSON数据

AJAX简述

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行
  
  

w3scholl参考：https://www.w3school.com.cn/js/js_ajax_http_send.asp
学习参考：https://www.runoob.com/ajax/ajax-tutorial.html

jQuery封装的 ajax() 方法（html常用方法）

//ajax方法
$.ajax('url接口地址',{
	headers:{token:''},
    type: "get",//请求的类型（GET 或 POST)
    data:{
    	city:''
    },//要发送到服务器的数据,要传递的参数
    success: function(data){
       console.log('获取天气',data);
    },//调取成功后获取的数据
    dataType: "json" //预期的服务器响应的数据类型
})
//第二种写法
$.ajax({
	headers:{token:''},
    url:'url接口地址',
    type: "get",//请求的类型（GET 或 POST)
    data:{
    	city:''
    },//要发送到服务器的数据,要传递的参数
    success: function(data){
       console.log('获取天气',data);
    },//调取成功后获取的数据
    dataType: "json" //预期的服务器响应的数据类型
})

get()方法

语法：
$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )

---

URL：发送请求的 URL字符串。
data：可选的，发送给服务器的字符串或 key/value 键值对。
callback：可选的，请求成功后执行的回调函数。
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。

语法：$.get(URL,data,function(data,status,xhr),dataType)

$.get("接口地址",{后端要接收的参数},function(data){
	//接口返回的数据
});

//参考
$.get("test.php");

$.get("test.php", { name: "Bill", time: "2pm" } );

$.get("test.php", function(data){
  alert("Data Loaded: " + data);
});

$.get("test.cgi", { name: "Bill", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});

等价于ajax()方法下面写法，type默认值: “GET”

$.ajax({
  url: url,
  data: data,
  success: success,
  error: error,
  dataType: dataType
});

学习参考：https://www.w3school.com.cn/jquery/ajax_get.asp

post()方法

语法：$(selector).post(URL,data,function(data,status,xhr),dataType)

$.post("接口地址",{suggest:txt},function(result){
     //接口返回的数据
});

$.post("test.php", { name: "Bill", time: "2pm" } );

$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

$.post("test.php", function(data){
   alert("Data Loaded: " + data);
});
 
$.post("test.php", { name: "Bill", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
});

//获得 test.php 页面返回的 json 格式的内容：
$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // Bill
     console.log(data.time); //  2pm
}, "json");

等价于

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

学习参考：https://www.runoob.com/jquery/ajax-ajax.html

error错误消息（HTML 状态消息）

$.ajax()的error参数

$.ajax({
  type: 'GET',//默认值为GET
  url: url,
  data: data,
  success: success,
  error: error,
  dataType: dataType
});

readyState == 4 && status == 200表示请求成功
常见错误：

• 400，服务器未能理解请求（客户端错误）
• 401，被请求的页面需要用户名和密码（客户端错误）
• 404，服务器无法找到被请求的页面（客户端错误）
• 500，请求未完成。服务器遇到不可预知的情况（服务器错误）

HTML状态消息参考

JSON数据

JSON: JavaScript Object Notation（JavaScript 对象标记法）。
JSON 是一种存储和交换数据的语法。
JSON 是通过 JavaScript 对象标记法书写的文本。

当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。
JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。
我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。
以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

//存储数据：
myObj = { name:"Bill Gates",  age:62, city:"Seattle" };//对象
myJSON =  JSON.stringify(myObj);//string字符串
localStorage.setItem("testJSON", myJSON);//存储

//接收数据：
text = localStorage.getItem("testJSON");//获取字符串
obj =  JSON.parse(text);//转化为对象
document.getElementById("demo").innerHTML = obj.name;//获取对象中name值

//JSON 格式几乎等同于 JavaScript 对象。
//在 JSON 中，键必须是字符串，由双引号包围：
{ "name":"Bill Gates" }

//JavaScript
{ name:"Bill Gates" }

//JSON数据转对象并获取值
var text =  '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
console.log(obj.name);

JSON.parse()方法：将JSON字符串转JavaScript对象
JSON.stringify() 方法：将一个 JavaScript 对象或值转换为 JSON 字符串