Question

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

我尝试做的是让表单向服务器发送一个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请求。

Answer 1

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

您可以将其附加到按下按钮，然后调用一些代码：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

按下提交按钮后，浏览器将向服务器提交数据，并加载新页面。您可以绑定表单的提交事件，并在事件中进行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
});

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

3 个答案: