原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)

下面是关于“原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)”的完整攻略，包含以下几个部分：

关于原生JS封装ajax

原生JS可以使用XMLHttpRequest对象来发送http请求，通过该对象的open()和send()方法来实现。但是，为了方便和规范使用ajax，我们可以封装一个ajax函数。下面是一个基本的封装实现：

function ajax(method, url, data, success) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            success(xhr.responseText);
        }
    }
    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(data);
}

在上述代码中，我们通过一个名为ajax的函数来封装ajax操作。该函数使用了四个参数：请求方式（method）、请求地址（url）、数据（data）、回调函数（success）。

使用该函数时，我们只需要传递对应的参数即可完成ajax的调用。示例如下：

ajax("GET", "http://example.com", null, function(responseText) {
    console.log(responseText);
});

传json、str和excel文件上传

对于json和str的传递，我们只需要将数据格式转换为文本字符串，然后作为data参数传递给ajax函数即可。示例如下：

var jsonData = {name: "张三", age: 20};
var jsonString = JSON.stringify(jsonData); // 将json数据格式转化为文本字符串
ajax("POST", "http://example.com", jsonString, function(responseText) {
    console.log(responseText);
});

var strData = "name=张三&age=20";
ajax("POST", "http://example.com", strData, function(responseText) {
    console.log(responseText);
});

对于excel文件的上传，则需要借助HTML5的FormData对象和XMLHttpRequest的upload属性。示例如下：

var fileInput = document.getElementById("file-input");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.upload.addEventListener("progress", function(event) {
    var percent = event.loaded / event.total * 100; // 计算上传进度
    console.log("上传进度为：" + percent + "%");
});
xhr.open("POST", "http://example.com/upload");
xhr.send(formData);

在上述代码中，我们首先获取到一个id为file-input的input元素，然后通过它的files属性获取到文件。接着，我们创建了一个FormData对象，并将文件添加到该对象中。在发送请求时，我们需要通过XMLHttpRequest的upload属性来监听上传进度事件，并在回调函数中输出上传进度。最后，我们调用open()和send()方法来发送请求。

提交表单

提交表单时，我们需要将表单中的数据格式化为json或str类型，然后作为data参数传递给ajax函数。示例如下：

var form = document.getElementById("my-form");
var data = new FormData(form);
ajax("POST", "http://example.com", data, function(responseText) {
    console.log(responseText);
});

在上述代码中，我们首先获取到一个id为my-form的表单元素，然后通过FormData对象将表单数据格式化为可传输的格式。接着，我们将该格式化后的数据作为data参数传递给ajax函数，并设置回调函数来接收返回的数据。

示例：获取天气信息

下面是一个使用原生JS封装ajax异步获取天气信息的示例。在该示例中，我们通过向聚合数据的API接口发送请求，来获取指定城市的天气信息，并将获取到的数据展示在页面上。完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气查询</title>
    <script>
        function ajax(method, url, data, success) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    success(xhr.responseText);
                }
            }
            xhr.open(method, url, true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }
        function getWeather() {
            var cityInput = document.getElementById("city");
            var city = cityInput.value;
            var key = "your-api-key"; //需要替换为你自己的API Key
            var url = "https://www.tianqiapi.com/api?version=v6&city="+city+"&key="+key;
            ajax("GET", url, null, function(responseText) {
                var result = JSON.parse(responseText);
                var weather = result.wea;
                var temperature = result.tem;
                var airQuality = result.air;
                var html = "天气："+weather+"，温度："+temperature+"，空气质量："+airQuality;
                document.getElementById("result").innerHTML = html;
            });
        }
    </script>
</head>
<body>
    <input type="text" id="city">
    <button onclick="getWeather()">查询</button>
    <div id="result"></div>
</body>
</html>

在该示例中，我们在页面中创建了一个输入框、一个查询按钮和一个展示结果的div元素。当用户点击查询按钮时，我们获取输入框中的城市名称，并将其作为参数向聚合数据的API接口发送请求。在请求成功后，我们解析返回的json格式数据，并将其显示在结果div元素中。

示例：上传文件

下面是一个使用原生JS实现上传文件的示例。在该示例中，我们允许用户选择一个文件，然后将该文件上传到指定的服务器，并在上传过程中展示上传进度。完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script>
        function ajax(method, url, data, success) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    success(xhr.responseText);
                }
            }
            xhr.open(method, url, true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }
        function uploadFile() {
            var fileInput = document.getElementById("file-input");
            var file = fileInput.files[0];
            var formData = new FormData();
            formData.append("file", file);
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    console.log(xhr.responseText);
                }
            };
            xhr.upload.addEventListener("progress", function(event) {
                var percent = event.loaded / event.total * 100;
                document.getElementById("progress").innerHTML = "上传进度："+percent.toFixed(2)+"%";
            });
            xhr.open("POST", "http://example.com/upload");
            xhr.send(formData);
        }
    </script>
</head>
<body>
    <input type="file" id="file-input">
    <button onclick="uploadFile()">上传</button>
    <div id="progress"></div>
</body>
</html>

在该示例中，我们在页面中创建了一个上传文件的input元素、一个上传按钮和一个展示上传进度的div元素。当用户点击上传按钮时，我们获取input元素中选择的文件，并将其通过FormData对象包装为可传输的格式。然后，我们通过XMLHttpRequest对象向服务器发送请求，并在该对象的upload属性上监听上传进度事件，在回调函数中更新上传进度。最后，我们调用open()和send()方法发送请求，将文件传输给服务器。

以上就是关于“原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)”的完整攻略，希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS封装ajax 传json，str，excel文件上传提交表单(推荐) - Python技术站