ajax表单问题IE

ajax form issue IE

本文关键字：IE 问题 表单 ajax      更新时间：2023-09-26

我有以下的代码，在每个浏览器，但IE工作。当点击表单的提交按钮时，IE根本没有响应。

表单的值为:onsubmit="sendform(this);return false;" 

<script type="text/javascript">
    function makeRequest(url) {
        var http_request = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            http_request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        }
        http_request.onreadystatechange = function() {
            if (http_request.readyState == 4) {
                if (http_request.status == 200) {
                    alert(http_request.status);
                    //alert(http_request.responseText);
                    toggleDiv('stylized');
                    showtoggleDiv('success');
                } else {
                    alert('There was a problem with the request.');
                }
            }
        };
        http_request.open('GET', url, true);
        http_request.send(null);
    }
    function sendform(el) {
        var sub = el.getElementsByTagName('input');
        query = new Array();
        for (i in sub) {
            if (sub[i].name) {
                query.push(sub[i].name + '=' + sub[i].value);
            }
        }
        query = '?' + query.join('&');
        makeRequest("http://markburnettinternational.com/sitelokpw/members/test.php" + query);
    }
</script>
<script language="javascript">
    function toggleDiv(divid) {
        if (document.getElementById(divid).style.display == 'none') {
            document.getElementById(divid).style.display = 'block';
        } else {
            document.getElementById(divid).style.display = 'none';
        }
    }
</script>
<script>
    function showtoggleDiv(divid) {
        document.getElementById(divid).style.display = 'block';
    }
</script>

打开浏览器的调试器，并在sendform()中放置一个断点，然后遍历它，看看会发生什么。或者打开javascript控制台可以给你关于正在发生的事情的重要反馈。

这段代码至少有三个问题:

var sub = el.getElementsByTagName('input');
query = new Array();
for (i in sub) {
    if (sub[i].name) {
        query.push(sub[i].name + '=' + sub[i].value);
    }
}
首先，始终使用var在局部作用域中声明变量，因此使用

var query = new Array();
for (var i in sub) {

第二，getElementsByTagName返回NodeList，这是一个类似数组的对象。永远不要使用for … in循环遍历数组(类对象)，始终使用普通的for循环。

第三，始终使用encodeURIComponent来正确编码查询参数:

for (var i = 0, len = sub.length; i < len; i++) {
    if (sub[i].name) {
        query.push(sub[i].name + '=' + encodeURIComponent(sub[i].value));
    }
}

这个可能解决你的IE问题。

相关文章：