ajax请求封装

最新推荐文章于 2025-04-09 11:16:19 发布

xiaoxiede_wo

最新推荐文章于 2025-04-09 11:16:19 发布

阅读量151

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/xiaoxiede_wo/article/details/90069021

版权

JS 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用Ajax技术实现在不刷新页面的情况下提交表单的方法。通过监听按钮点击事件，阻止默认行为，构造请求参数，并利用Ajax发送POST请求到指定URL。详细解释了如何设置请求头和处理响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    var sub = document.getElementById('sub');
        sub.onclick = function(e){
            e.preventDefault();
            var data = "username=" + userName.Value + '&age=' + age.value; 
            ajaxFun()
        }
   
        function ajaxFun(method, url, data, callback, flag){

            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject('Microsoft.XMLHttp');
            }
            method = method.toUpperCase();
            if(method == 'GET'){
                xhr.open(method, url + '?' + data, flag);
                xhr.send();
            }else if(method == 'POST'){
                xhr.open(method, url, flag);
                xhr.setRequestHeader('Control-type','application/x-www-form-urlencoded');
                xhr.send(data);
            }
        
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        callback(xhr.responseText);
                    }
                }
            }
        }
        function showList(data){
            
        }