Question

我开发了一个Python API，现在正将它与我下载的HTML模板集成。它是一个简单的单页HTML模板，其表单可以接受专辑名称和艺术家姓名。我希望使用AJAX处理表单。因此，一旦表单成功提交，它就会被API返回的消息替换。

（简化的）html片段是：

<div class="form">
    <form role="form" action="form.php" id="signup">
        <div class="form-group">
            <label>Artist Name</label>
            <input type="text" name="artist" id="artist">
        </div>
        <div class="form-group">
            <label>Tracking Number</label>
            <input type="text" name="album" class="album">
        </div>
        <button type="submit" class="btn">Submit!</button>
    </form>
</div>

然后我在html文件的开头导入了一个JS文件。以下是JS文件。

$(function() {
    var form = $('#signup');

    var formMessages = $('#form-messages');

    $(form).submit(function(e) {
        e.preventDefault();
        var formData = {
            'artist'    : $('input[name=artist]').val(),
            'album'             : $('input[name=album]').val(),
        };

        // process the form
        $.ajax({
            type        : 'POST',
            url         : 'form.php',
            data        : formData,
            dataType    : 'json' 
    }) 
        .done(function(data) {
                var content = $(data).find('#content');
                $("#result").empty().append(content);
            });
});

我认为问题在于.done(function(data))但是，我发现代码的网站并不清楚。

form.php返回一个JSON字符串。在我使用表单时，它将信息发送到Python API，Python API返回JSON消息。但我无法访问JSON消息。它在包含

'code': X, 'message':'returned messaged...'

理想情况下，我想做一个if / else语句。所以

if code = 1:
    display: Success

等但我不知道在PHP / JS中从哪里开始。

Answer 1

在看到其他一些堆栈溢出答案和另一个网站后，我最终能够使它工作。

我在表单结尾前的按钮下面的html文件中添加了一个div：

<form>
    ...
    ...
    <button type="submit" class="btn">Submit!</button>
    <div id="thanks" style="display:none;"></div>
</form>

然后，在JS文件中，我将.done（函数（数据））修改为：

.done(function(data) {
            if (data.result == '1') {
                $('#thanks').show().text("Success!");
                $('input[type="text"],text').val('');
            } else if (data.result == '2') {
                $('#thanks').show().text("Album and Artist already exists");
            } else {
                $('#thanks').show().text("Uh Oh. Something has gone wrong. Please try again later or contact me for more help");
            }
        });

使用AJAX提交表单

1 个答案: