如何使用提交按钮来激活AJAX功能？

问题描述：

我的网页上有以下表单和javascript功能。这是一个虚拟函数，我正在使用它来测试我想要做什么是可能的。如何使用提交按钮来激活AJAX功能？

我正在试图做的是有一个窗体发送一个AJAX请求到服务器，以便服务器可以更新数据库，而页面本身继续沿着它的预定路径。我处于紧张时刻，所以我很遗憾没有时间重写整个页面以更好地支持这一点。我的问题是xmlhttp对象似乎没有正常返回。我得到一个readyState的4，但status为0.有人可以请解释我需要做什么？

这里是我的代码：

ajax.php

<html> 
<head> 
<script type="text/javascript"> 
function test(){ 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.onreadystatechange=function(){ 
     document.getElementById("new").innerHTML+="<b>"+xmlhttp.readyState+"</b> "+xmlhttp.status; 

     if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
      document.getElementById("hello").innerHTML=xmlhttp.responseText; 
     } 
    } 

    xmlhttp.open("GET","response.php",true); 
    xmlhttp.send(); 
} 
</script> 
</head> 

<body> 
<?php 
if ($_POST){ 
    echo $_POST['hello']; 
} 
?> 

<form action="ajax.php" method="post"> 
<input type="text" name="hello" /> 
<input type="submit" value="submit" onclick="test();" /> 
</form> 

<div id="hello"></div> 
<h3>debug</h3> 
<div id="new"></div> 
</body> 
</html>

response.php

<?php 
echo "Hello there"; 
?>

编辑

请注意，我不想上一页默认行为。实际上，像往常一样提交forn 必须。我只是想为流程添加一个AJAX请求。

http://stackoverflow.com/questions/5081674/jquery-prevent-default-browser-form-submit-behaviour-but-submit-form-with-jquer – check123 2012-01-13 14:16:39

http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false – check123 2012-01-13 14:17:39

@ check123请不要说我不想阻止默认行为。表单需要像平常一样提交，但我也希望AJAX请求也能发生。 – ewok 2012-01-13 14:18:44

答

不能触发AJAX请求，并允许的形式在同一时间提交。当页面重新加载时，不完整的AJAX请求被取消（如提交表单时的情况）。您必须要么而不是完全提交表单，或者等到您的AJAX调用完成后再提交表单。如果你想去第二条路线，你可以做如下修改代码：

<html> 
<head> 
<script type="text/javascript"> 
function test(){ 
    var xmlhttp = new XMLHttpRequest(); 

    xmlhttp.onreadystatechange=function(){ 
     document.getElementById("new").innerHTML+="<b>"+xmlhttp.readyState+"</b> "+xmlhttp.status; 

     if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
      document.getElementById("hello").innerHTML=xmlhttp.responseText; 
      **document.getElementById("ajaxform").submit();** 
     } 
    } 

    xmlhttp.open("GET","response.php",true); 
    xmlhttp.send(); 
} 
</script> 
</head> 

<body> 
<?php 
if ($_POST){ 
    echo $_POST['hello']; 
} 
?> 

<form action="ajax.php" method="post" **id="ajaxform"**> 
<input type="text" name="hello" /> 
<input type="submit" value="submit" onclick="test();**return false;**" /> 
</form> 

<div id="hello"></div> 
<h3>debug</h3> 
<div id="new"></div> 
</body> 
</html>

更改/添加标有**。

请注意，我不喜欢那里的一些做法，特别是使用HTML标记的onsubmit等属性来附加Javascript事件处理程序。

谢谢，这个工程。另一个可能会出现的问题是，这是否可以通过多个提交按钮完成？ – ewok 2012-01-13 14:49:42

@ewok如果它们全部使用相同的形式，您希望它们都执行相同的AJAX调用，并且您只希望用户在任何给定的时间点击其中的一个来提交表单，但它会工作正常你只需在每个HTML标签中包含'onsubmit =“test（）; return false;'代码。如果你希望AJAX调用对每个按钮都是唯一的（即一个按钮发布到不同的URL /提交不同的数据到另一个），您需要为每个按钮编写单独的函数 – 2012-01-13 14:57:30

它将设置的方式是将一个按钮发布到页面的更改（“应用”按钮）并激活另一个提交按钮的按钮我想知道的是当你调用'document.getElementById（“ajaxform”）。submit（）;'时，哪个按钮会被识别为已被点击？ – ewok 2012-01-13 15:09:00

答

我知道这并不直接回答你的问题，但如果你时间紧张，那么我会建议只使用jQuery来处理AJAX。

你可以将它连接到一个按钮按下，然后调用一些代码：http://api.jquery.com/jQuery.ajax/

如果需要的话，我可以挖掘出一些代码示例。

答

一旦按下提交按钮，浏览器就会向服务器提交数据，并且会加载一个新页面。你可以绑定表单的提交事件，并在事件进行ajax调用，但你会有2个问题。

的浏览器可能会重定向之前所有的Ajax数据发送
你不知道，如果Ajax调用成功与否

我会尝试发送的数据要通过AJAX在发送使用隐藏输入的相同表单数据。如果两个呼叫都针对不同的网址，然后试试这个：

var ajaxSent = false; 
$('#myForm').submit(function(e){ 
    if (!ajaxSent){ 
     e.preventDefault(); 
     $.ajax({ 
      url: "ajaxUrl", 
      // data, method, etc 
      success: function(){ 
       ajaxSent = true; 
       $('#myForm').trigger('submit'); 
      } 
    } 
    // else submit the form 
});

虽然我更喜欢自己使用jQuery，但问题中的代码是使用常规的Javascript，并且没有jQuery标记，或者在问题中没有提及它。您至少应该在您的回答中指出代码使用jQuery，可能带有指向jQuery网站的链接。 – 2012-01-13 14:45:42

Downvote，因为没有参考这个使用jQuery和OP本来不是。 – webnoob 2012-01-13 15:27:32

如何使用提交按钮来激活AJAX功能？

相关推荐