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

Question

我的网页上有以下表单和javascript函数。 这是一个虚拟函数，我正在使用它来测试我想做的事是否可行。

我正在尝试做的是有一个向服务器发送AJAX请求的表单，以便服务器可以在页面本身继续沿其预定路径继续的同时更新数据库。 我的时间紧迫，所以很遗憾，我没有时间重写整个页面来更好地支持此操作。 我xmlhttp的问题是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";
?>

编辑

请注意，我不想阻止默认行为。 实际上，必须像往常一样提交形式。 我只想向流程添加AJAX请求。

Answer 1

我知道这并不能直接回答您的问题，但是如果您时间有限，那么我建议您仅使用jQuery来处理AJax。

您可以将其附加到按钮上，然后调用一些代码： http : //api.jquery.com/jQuery.ajax/

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

Answer 2

您不能触发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事件处理程序。

Answer 3

按下提交按钮后，浏览器将向服务器提交数据，并加载新页面。 您可以绑定表单的Submit事件，并在事件中进行ajax调用，但是您将遇到2个问题。

发送所有ajax数据之前，浏览器可能会重定向
您不知道ajax调用是否成功

我会尝试使用隐藏的输入以相同的形式发送通过ajax发送的数据。 如果两个调用都针对不同的URL，请尝试以下操作：

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
});

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

问题描述

3 个解决方案

解决方案1
2 2012-01-13 14:16:37

解决方案2
2 已采纳 2012-01-13 14:37:59

解决方案3
0 2012-01-13 14:35:52

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

问题描述

3 个解决方案

解决方案1 2 2012-01-13 14:16:37

解决方案2 2 已采纳 2012-01-13 14:37:59

解决方案3 0 2012-01-13 14:35:52

解决方案1
2 2012-01-13 14:16:37

解决方案2
2 已采纳 2012-01-13 14:37:59

解决方案3
0 2012-01-13 14:35:52