ajax 传递json 字符串

AJAX（Asynchronous JavaScript and XML）是指一种异步传输技术，可以实现无需刷新页面就能实时更新数据的效果。而JSON（JavaScript Object Notation）则是一种轻量级的数据交换格式，具有易读、易传输和易解析等优点。在AJAX中传递JSON字符串可以用来实现前后端数据的交互，下面我们来介绍一下使用AJAX传递JSON字符串的方法。

ajax 传递json 字符串

首先，我们需要创建一个XMLHttpRequest对象。这个对象是AJAX的核心，负责向服务器发送请求和接收服务器返回的数据。创建对象的代码如下：

    var xhr = new XMLHttpRequest();

然后，我们需要对XMLHttpRequest对象进行一些设置。比如，发送请求的方式、请求的地址、是否异步等等。下面是一段设置代码的例子：

    xhr.open("POST","/api/project/create",true); //设置请求方式、请求地址和是否异步
    xhr.setRequestHeader("Content-Type","application/json;charset=utf-8"); //设置请求头

在设置完XMLHttpRequest对象之后，我们需要把数据转换成JSON字符串并发送给服务器。这时需要用到JSON.stringify()函数将数据转换成JSON字符串，然后使用send()方法发送请求。这个过程的代码如下所示：

    var data = { 
        name: 'myproject',desc: 'my first project',status: 'unfinished' 
    }; //定义要发送的数据
    var json = JSON.stringify(data); //将数据转换成JSON字符串
    xhr.send(json); //发送请求

最后，我们需要监听服务器返回的数据，当请求成功并返回数据时，XMLHttpRequest对象会触发readystatechange事件，我们可以使用onreadystatechange()函数对此进行监听。当readyState属性为4时，表示请求已经完成，status属性为200时，表示请求成功。我们可以使用responseText或responseJSON属性获取服务器返回的数据。这个过程的代码如下所示：

    xhr.onreadystatechange = function () { 
        if(xhr.readyState == 4 && xhr.status == 200) { //readyState为4且status为200表示请求成功
            var response = JSON.parse(xhr.responseText); //解析服务器返回的JSON字符串
            alert(response.msg); //弹出服务器返回的消息
        } 
    };

总结来说，使用AJAX传递JSON字符串可以实现前后端的数据交互，而JSON字符串的优点在于它的易读、易传输和易解析，使得数据传输更加高效和灵活。

ajax 传递json 字符串

相关推荐