jquery+ajax+json

谯嘉懿
2023-12-01

什么是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

 类似资料: