Question

建议在HTML页面中使用Ajax时，我决定尝试学习它是如何工作的。在我的例子中，我只是试图从一个php文件中获取响应（它只是将一个简单的字符串作为测试回应），但它不起作用，因为没有实际发生。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title> Incident Center </title>
   <!--<link rel="stylesheet" href="http://web.njit.edu/~swp5/assignment/style/style.css">-->
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <script type="text/javascript">
    function onsubmit()
    {
        var sender;
        if (window.XMLHttpRequest)
        {
            sender=new XMLHttpRequest();
        }
        else
        {
            sender=new ActiveXObject("Microsoft.XMLHTTP");
        }
        sender.onreadystatechange=function()
        {
            if (sender.readyState==4 && sender.status==200)
            {
                document.getElementById("myDiv").innerHTML=sender.responseText;
            }
        }
        sender.open("GET","proz.php",true);
        sender.send();
    }
    </script>
</head>
<body>
    <div class="header">
        Incident Center 
    </div>

            <p>
                <button onclick="onsubmit()">Test</button>
            </p>


    <div id="myDiv"></div>
</body>
</html>

Answer 1

正如我在评论中已经提到的，您应该检查您的请求的响应代码，看看是否出现了问题。将以下行添加到onreadystatechanged函数的开头：

alert(sender.readyState + ', ' + sender.status + ', ' + sender.responseText);

根据此输出，您可以确定您的错误。

Answer 2

为什么不使用jQuery？ http://www.jquery.com/

Answer 3

发送实际上并没有显示任何内容。发送调用页面并填充两个不同的变量。发送的内容是填充发件人的“responseXML”和“responseText”属性。发送后尝试：

alert(sender.responseText);

请参阅http://en.wikipedia.org/wiki/XMLHttpRequest

Answer 4

使用jQuery更容易，因为它具有内置的AJAX功能。你的代码看起来像这样：

jQuery.ajax({
    type: 'get',
    url: 'proz.php',
        error: function(r) {
            alert("Something went wrong - "+r);
        }
    success: function(response) {
        alert(response);
    }
});

希望有所帮助

Answer 5

在这里使用Opera 11.51，实际上并不喜欢使用onsubmit()作为函数名的事实。大概是因为onsubmit()实际上已经是<button>元素本身的事件处理程序钩子。我认为其他浏览器也不喜欢这个函数名称。

首先，重命名该功能。我们在这里假设dosubmit()。

此外，您应该在<form>元素中包含一个按钮。并且因为默认按钮充当提交按钮，表单正在提交，导致页面重新加载。

为防止出现这种情况，您应该让函数return false;调用函数onclick="return dosubmit()"，如果您打算像这样调用内联函数，或者将按钮设为{{1}类型的按钮1}}，如此：button

基本的ajax逻辑

5 个答案: