基本ajax逻辑

根据对使用Ajax的html页面的建议，我决定尝试学习它是如何工作的。在我的例子中，我只是试图从一个PHP文件（它只是回应一个简单的字符串作为测试）得到响应，但它不起作用，因为没有发生任何事情。基本ajax逻辑

<!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>

来源

2011-10-26 Sam

比如：你的HTML格式不正确。缺少'

对不起，为了简化代码，我将代码从原始状态改为了一点，以便缩小可能性。我忘了删除另一个标签。 – Sam

您是否在请求后检查了响应代码？ responseText仅在sender.status == 200时设置。 –

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

因此，首先，重命名该函数。我们在这里假设dosubmit()。

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

为了防止这种情况，你应该让功能return false;和调用函数像这样onclick="return dosubmit()"，如果你要内嵌调用它，或使按钮button类型的按钮，像这样：<button type="button" onclick="dosubmit()">

来源

2011-10-26 17:04:21

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

来源

2011-10-26 16:53:09

在他的问题中，他声明他正试图学习如何工作。在这种情况下，最好是像这样尝试，而不是使用jQuery来完成幕后的所有实际AJAX工作。 –

你说得对，对不起。 –

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

alert(sender.responseText);

见http://en.wikipedia.org/wiki/XMLHttpRequest

来源

2011-10-26 16:53:59 Tom

对不起。我错过了onreadystatechange函数调用 – Tom

它更容易使用jQuery来做到这一点，因为它有一个内置的AJAX功能。您的代码应该是这样的：

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

希望帮助

来源

2011-10-26 17:02:54 hollandben

与戴维斯相同的评论回答：在他的问题中，他表示他正试图学习如何工作。在这种情况下，最好是像这样尝试，而不是使用jQuery来完成幕后的所有实际AJAX工作。 –

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

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

基于此输出，您可以大概判断你的错误。

来源

2011-10-26 17:09:34

回答

相关问题