jquery+ajax+json

什么是ajax

简单来说AJAX就是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

原生态ajax

原生态的ajax主要有5步：
第一步：创建XMLHttpRequest：

   var xhttp=new XMLHttpRequest();

  **第二步：注册回调函数**

                xhttp.onreadystatechange=callback()

**第三步：设置与服务器交互的方式、地址、参数等信息。**

xhttp.open("post","/Demo01",true);

**第四步：向服务器发送请求，启动与服务器的交互。**

xhttp.send("username=张三包");

第五步：创建回调函数，让回调函数接收服务端返回的数据，然后更新页面。

function callback(){ }

一个完整的ajax

function myfunction(){
         var xhttp=new XMLHttpRequest();
             xhttp.onreadystatechange=function(){
            if(this.readyState==4&&this.status==200){
                console.log("成功");
            }

        };
        xhttp.open("post","/Demo01",true);
        xhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
        xhttp.send("username=张三包");
    }

注意get方法的参数可以再url 使用？和&传递，post方法传递参数要写在send方法中并且要加设置请求头

jquery的ajax

$.ajax()它是jquery提供的最基本的ajax编程方式。其他方式都是根据.ajax()所改进的，所以会用这个其他的也会用；

juqery替我们封装好了上面介绍的那5步，只需要写入参数就可以；

$.ajax()参数

type: “get”/“post” , 表示穿的是post 还是get方法
data: " 这里是传递的参数信息,一般是json格式"
url:“这里是请求的地址”
success:function(){
成功的回调函数
}
其他的一些参数这里不做阐述，想了解的可以看文档

完整的jquery+ajax例子

  var person01={
              "username":"张三",
              "age":"50"
        }
        $(function() {
            $("#but").click(function () {
                $.ajax({
                    url: "/Demo02",
                    success: function () {
                        console.log("成功");
                     
                    },
                    data: person01,
                    type: "get",
                    datatype:"json"
                });
            });
        });

什么是json

json就是一种数据交换格式，广泛在前后端交互中应用；
JSON的规则很简单： 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。其实就是对象数组相互嵌套使用。
在前端中直接支持json格式，但后台不支持，可以fastjson或者jackson处理.
这里推荐一篇博客，写的比较好，是springmvc实现ajax交互，有兴趣的可以看看。
https://blog.csdn.net/qq_27008807/article/details/78882876