Question

我正在尝试为初学者找到一些非常简单的AJAX请求，除了一些不起作用的代码之外我什么都没找到......好吧，有人可以帮助我并告诉我这有什么问题吗？

我的Klient部分：

<form method="GET" action="" id="f">
    <label for="name">Your name: </label> <input type="text" id="name" name="name">
    <input type="submit" onclick="yourName(document.getElementById('name').value)">
</form>
<span id="result"></span>
<script>
    function yourName(str)
    {

        var xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","f.php?name="+str,true);
        xmlhttp.send();

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

    }
</script>

和服务器部分：

<body>

<?php

// Send the data back
echo "Your name is: ".$_GET['name'];

?>
</body>

我不是javascript的大朋友，这对我来说是不可理解的：（

Answer 1

你正确的javascript。

你需要改变你的html：

<form method="GET" action="" id="f">
    <label for="name">Your name: </label> <input type="text" id="name" name="name">
    <input  value=" submit" type="button" onclick="yourName(document.getElementById('name').value)">
</form>

更改按钮的类型。如果你使用type="submit"，那么在你按下它时会提交你的表格。

Answer 2

重写您的表单，因为我认为您不需要提交和操作：

<form method="GET" id="f">
<label for="name">Your name: </label><input type="text" id="name">
<button type="button"    
onclick="yourName(document.getElementById('name').value)">Click</button>
</form>

这是您可以尝试的首发AJAX功能：

function yourName(str) {
var ajaxRequest;
try {
    ajaxRequest = new XMLHttpRequest();
} catch (e1) {
    try {
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e2) {
        try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e3) {
            alert("Please try again!");
            return false;
        }
    }
}
ajaxRequest.onreadystatechange = function () {
    if (ajaxRequest.readyState === 4) {
        document.getElementById("result").innerHTML = ajaxRequest.responseText;
    }
};    
ajaxRequest.open("GET","f.php?name=" + str,true);
ajaxRequest.send(null);
return false;
}

Answer 3

您的函数绑定到提交按钮上的单击事件。

当您单击它时，将发送Ajax请求，然后表单在响应返回之前提交（重新加载页面）。

从onclick属性返回false以停止正常行为。

Answer 4

试试这个：

<form method="GET" action="" id="f">
    <label for="name">Your name: </label> <input type="text" id="name" name="name">
    <input type="submit" onclick="return yourName(document.getElementById('name').value)">
</form>

<span id="result"></span>

<script>
function yourName(str)
{

    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","f.php?name="+str,true);
    xmlhttp.send();

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

    return false;

}
</script>

我假设当你按下提交按钮时页面被重定向？您需要在return属性中添加onclick，然后在实际的javascript函数中返回false，以便不提交表单。

Answer 5

如果你真的想要使用原始JS使用this tutorial，但如果你想让你的生活轻松使用JQuery。

首先，您可以使用Ajax Form Plugin中的ajaxForm / ajaxSubmit函数或jQuery序列化函数。（这样你就不需要在HTML中添加任何js东西，除了底部提供的链接）给ajaxForm：

$("#f").ajaxForm({url: 'server.php', type: 'get'})

或

$("#f").ajaxSubmit({url: 'server.php', type: 'get'})

ajaxForm将在按下提交按钮时发送。 ajaxSubmit立即发送。

序列化：

$.get('f.php?' + $('#f').serialize())

$.post('f.php', $('#f').serialize())

AJAX serialization documentation is here.

添加链接：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script>
$( document ).ready(function() {
    $( "#f" ).submit(function( event ) {
      $.get('f.php?' + $('#f').serialize())
      event.preventDefault();
    });
});
    </script>

希望它有所帮助！顺便说一下，您可以在网络选项卡中看到响应。

Answer 6

请从提交按钮中删除type="submit"以调用ajax脚本。

您的代码当时以两种方式工作;首先自己提交页面，其他人调用你的js函数。因此，您需要使用type="button"更改按钮的类型，然后根据需要添加提交结果的ajax成功响应

像：

<input type="type" onclick="yourName(document.getElementById('name').value)">

并在ajax代码上添加：

xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("result").innerHTML=xmlhttp.responseText;
            document.getElementById("f").submit();
        } 

    }

检查上述更改，并在执行完毕后告诉我您是否有任何错误。

Answer 7

使用JQuery - AJAX请求非常简单：

$.get('f.php?name=' + str, function(result) {
    $("#result").html(result);
});

更多信息：http://api.jquery.com/jQuery.get/

简单的AJAX初学者请求

7 个答案: