Question

您好我是第一次使用AJAX而且我正在观看本教程，因此我可以在我的网站上实现该功能：https://www.youtube.com/watch?v=PLOMd5Ib69Y。我正在尝试做的是联系我们表单，用户可以在其中写入消息，当他点击按钮时，消息将发送到我的电子邮件。使用AJAX，我试图在不重新加载的情况下更改按钮内容。

我有这个AJAX代码：

<script src="/js/jquery-1.4.3.min.js" type="text/javascript"></script>

<script>
    var ajax = 
    {
        send: function()
        {
            var userName = $("input[name=un]").val();
            var userEmail = $("input[name=email]").val();
            var userMsg = $("input[name=msg]").val();


        if(userName == "" || userEmail == "" || userMsg == "")
        {
            alert("All fields are required!");
        }
        else
        {
            ajax.SetText("Sending...");
            $.post("sendMSG.php", {

                name : userName, email : userEmail, message : userMsg
            }, function(data){

                ajax.SetText(data);
            });

        }

        },
        SetText: function(text)
        {
            $("input[type=button]").val(text);
        }


    }


</script>

和html表单：

Name: <br> <input type="text" size="40" name="un">
                    <br>
                    Email: <br> <input type="text" size="40" name="email"> 
                    <br>

                    Write us a Message!
                    <br>    
                    <textarea rows="4" cols="50" name="msg" id="content"></textarea>
                    <br/>
                    <input type="button" value="Send Message!" onClick="ajax.send()" />

出于某种原因，当我点击按钮时，会发生无意义的事情。正如我所说，这是我第一次使用AJAX，我不知道如何使用AJAX代码。如果答案很简单，请放轻松一下：p

由于

Answer 1

您似乎使用了相当旧版本的jQuery。您应该使用可以在jQuery Website.

上找到的最新版本

现在，对于此示例，我们将使用submit事件侦听器。首先，您需要正确设置表单：

<form id="myform" method="post">
    Name: <br> <input type="text" size="40" name="un">
<br />
    Email: <br> <input type="text" size="40" name="email"> 
<br />
    Write us a Message!
<br />    
    <textarea rows="4" cols="50" name="msg" id="content"></textarea>
<br />
    <input type="submit" value="Send Message!"/>
</form>

现在为jQuery（如上所述;我们将使用submit事件。）但首先我们必须确保在运行我们的jQuery之前加载DOM元素。这是通过使用：

完成的

$(document).ready(function(){});

设置我们的jquery就像在submit事件监听器中编写我们想要做的一样简单：

$(document).ready(function(){

    $('#myform').submit(function(e){
        e.preventDefault();

        $.post('sendMSG.php',{name: userName, email: userEmail, message: userMsg}, function(data) {
            console.log(data);
        });

    });

});

显然在运行$.post ajax请求之前完成了所需的所有处理。

一些注释：

您可以在活动中使用e.preventDefault()或return false;来停止发生的默认操作。（见下文）

e.PreventDefault()

$('#myform').submit(function(e){
    e.preventDefault();
    // do ajax and processing stuff
});

return false;

$('#myform').submit(function(e){
    // do ajax and processing stuff
    return false;
});

您应该使用jQuery.ajax代替jQuery.post，因为它会为您提供更多选择。

Answer 2

我认为您使用的是jquery，所以您应该将每个代码放在

中

$(document).ready(function(){});

AJAX代码无法单击按钮

2 个答案: