使用 Ajax 订阅表单

Question

我真的不知道如何完成这项工作。 我需要使用电子邮件按钮进行订阅，并且需要对其进行验证并显示一条成功消息、加载和错误。

我以前从未使用过 Ajax，这是我必须做的，我必须使用服务器上名为 newsletter.php 的 php 文件中的预定义控制器来完成时事通讯订阅 ajax 功能，我应该使用其中名为 subscribe 的控制器函数来生成 ajax 请求的响应。

如果有任何意义，请帮助我。

这是我的电子邮件地址表格

<div id="subscribeText">
      <form action="" method="post" name="ContactForm" id="ContactForm" >
        <input type="submit" name="subscribeButton" id="subscribeButton" value="Submit" />
        <input type="text" name="subscribeBox"  id="subscribeBox" value="Enter your email address..." size="28" maxlength="28" onFocus="this.value=''" />
      </form>

    </div>

http://jsfiddle.net/vaaljan/R694T/

这就是成功的样子，错误和加载几乎相同。 What the success message looks like

希望这不是太牵强，我还没有使用过太多的 java 脚本，但我或多或少地了解。

谢谢

Answer 1

我在 jsfiddle 上做了一个小例子。

$('#send').click(function (e) {
e.preventDefault();
var emailval = $('input#email').val();
console.log(emailval);
if (emailval !== "") {
    $.ajax({
        cache: false, // no cache
        url: '/echo/json/', // your url; on jsfiddle /echo/json/
        type: 'POST', // request method
        dataType: 'json', // the data type, here json. it's simple to use with php -> json_decode
        data: {
            email: emailval // here the email
        },
        success: function (data) {
            console.log(data);
            $('<strong />', {
                text: 'Successfull subscribed!'
            }).prependTo('#state');
        },
        error: function (e) {
            $('<strong />', {
                text: 'A error occured.'
            }).prependTo('#state');
        },
        fail: function () {
            $('<strong />', {
                text: 'The request failed!'
            }).prependTo('#state');
        }
    });
} else {
    alert("Insert a email!");
}

});

Here it is.

它使用 jQuery 处理 ajax 请求。
该示例显示了 ajax 的工作原理。