Ajax

Ajax的概述

Ajax(Asynchronous JavaScript and XML的缩写) 一种不需要刷新整个页面便可以与服务器通讯。

在传统的Web模型中，当用户发送请求，服务器是返回整个页面的，而Ajax模型中，用户发送请求，服务器只是返回一个数据。

注意：ajax请求是基于JavaScript的事件来实现的。

$.ajax用法

语法：

$.ajax({
    url : "服务器地址",
    type : "请求方法", //格式：get | post    
    data : "请求时携带的数据",  //格式：{key : value},
    dataType : "表示服务响应的数据类型",  //text文本类型   json类型
    //服务响应成功后监听的函数，response响应的数据
    success:funtion(respose){
            //请求成功代码内容    
    },
    //服务器响应失败时触发的函数，error服务响应的错误信息
    error:function(error){
           //请求失败代码内容
    }            
})

举个例子：

 function ajax01(){
    $.ajax({
            url: "http://192.168.1.70:8888/hello/demo01",
            type:"post",
            data:{names:"张三"},
            success: function(result){
            $("#msg").html(result)
            }
    })
}

$.get 和 $.post用法

$.get用法

这是一个get请求封装的方法

语法：

$.get(
"路径地址", //请求路径地址
[data]，//携带的数据
function(result){ 
  //代码内容
},//监听函数
[dataType] //响应的数据类型
)

举个例子：

$.get("http://192.168.1.70:8888/hello/demo04",{age:15},function(result){
     $("#msg").html(result)
})

$.post用法

 这是一个post请求封装的方法

语法：

$.post(
"路径地址", //请求路径地址
[data]，//携带的数据
function(result){ 
  //代码内容
},//监听函数
[dataType] //响应的数据类型
)

举个例子：

$.post("http://192.168.1.70:8888/hello/demo01",{name:"刘德华"},function(result){
          $("#msg").html(result)
})

响应的数据类型

3种响应数据类型

①xml类型：人工智能返回的数据-----微信支付

<info>
<name>张三</name>
<age>15</age>
</info>

②text文本类型：默认文本

③json对象类型：都是使用该这种数据类型多

json的数据

json(JavaScript  Object Notation)，一种简单的【数据格式】，它是JavaScript原生格式。

格式：

json对象
{
    "key1" : value1,
    "key2" : value2
}

json集合
[
  {
     "key1" : value1,
     "key2" : value2,
     "key3" " value3   
  },
  {
     "key1" : value1,
     "key2" : value2
   }
]

注意：

js的对象的区别：json的key都需要使用""表示，如果想调用对象中的属性方法：对象名.属性名

举个例子：

<script>
   //js的对象的区别: json的key都需要使用""表示。
   let s={"name":"张三","age":18};    
   //如果想调用对象中的属性. 对象名.属性名
   alert(s.name)
   //多个json对象
   let ss=[
       {"name":"张三","age":18},
       {"name":"李四","age":22},
       {"name":"王五","age":23}
     ]
    //调用根据下标---length
    alert(ss[0].name)
</script>

text数据转成json数据

首先必须明确一点，这个text数据一定是json数据格式才可以进行json的转换。

方法一：通过手动实现转换

语法：

JSON.parse(对象)

举个例子：

<script>
    $.ajax({
        url:"http://192.168.1.70:8080/Student",
        data:{"name":"张三","age":18},
        success:function(response){
        //使用手动转换json对象
        SON.parse(response);
        }
    })
</script>

方法二：使用dataType="json"

举个例子：

<script>
    $.ajax({
        url:"http://192.168.1.70:8080/Student",
        data:{"name":"张三","age":18},
        dataType:"json",
        success:function(response){
        //使用dataType:"json"，会自动将response转换成json
        }
    })
</script>