Question

我自己通过在线教程学习Jquery和AJAX，并在遇到问题时在SO上发帖，所以请记住，如果你这么善意回答我的问题，我是新手。

我在modalbox中有一个表单。 Ajax阻止它关闭/重新加载，并在提交后显示一条消息，如下图所示：

enter image description here

我的问题

显示成功和失败消息。我想改变这一点，以便1）成功提交时显示成功消息或2）提交失败时显示失败消息：

我的表格

 <div id="inline3" style="width:400px;display: none;">
        <h3>Contact Us</h3>
        <form name="message-form" action="" id="contact-form" method"post">
        Message<br /> <input type="text" name="msg" value="" /><br />
        <input type="submit" value="Contact Us" name="contact" class="buttono" />
        </form>
        <div class="form-feedback" style="display:none">
        Thank You We will Get Back to you 
        </div>
         <div class="form-feedback" style="display:none">
        Ooops....Something Went Wrong
        </div>
       <div>

JQUERY

$(function(){
    $("#contact-form").submit(function(e){
    e.preventDefault(); 

    $form = $(this);

    $.post(document.location.url, $(this).serialize(), function(data){
        $feedback = $("<div>").html(data).find(".form-feedback").hide();
        $form.prepend($feedback)[0].reset();
        $feedback.fadeIn(1500)
    })

    });
})

如果有人可以给我一些帮助或建议，我们将非常感激。

感谢您阅读

Answer 1

我要做的第一件事就是改变后端，这样它就不会返回html，而是返回只包含你需要的信息的json（比如提交是成功还是失败以及任何其他消息等等））。

然后我想到的最简单的解决方法是给你的两个反馈消息div中的每一个唯一ID：

public class Entity<E extends Entity<E>> {
    private static int lastID = 0;
    protected int ID;

    protected Entity() {
    }

    public static <E extends Entity<E>> E create(Class<E> clazz) {
        lastID++;

        E newItem;
        try {
            newItem = clazz.newInstance();
        } catch (InstantiationException | IllegalAccessException e) {
            throw new RuntimeException(e); // let's hope your child classes will have a working default constructor 
        }
        newItem.ID = lastID;
        return newItem;
    }

    public int getID() {
        return ID;
    }
}

public class Blob extends Entity<Blob> {
    private int x,y;

    public Blob() {
    }

    public void setPos(int X,int Y){;
        x = X;
        y = Y;
    }
}

public class AnotherBlob extends Entity<AnotherBlob> {

    String help = "Help!";

    public String help() {
        return help;
    }

}

// TEST!
public class Test {

    public static void main(String[] args) {
        Blob blob = Entity.create(Blob.class);
        AnotherBlob anotherBlob = Entity.create(AnotherBlob.class);

        System.out.println("Blob: " + blob.getClass() + " ID = " + blob.getID() +
                "\nAnother blob: " + anotherBlob.getClass() + " ID = " + anotherBlob.getID());
    }

}

保留类名，以便您可以使用css以类似的方式设置两者的样式。

然后在您的javascript中检查成功或失败标志。基于标志显示基于id的一个或另一个div：

<div id="form-feedback-success" class="form-feedback" style="display:none">
Thank You We will Get Back to you 
</div>
 <div id="form-feedback-error" class="form-feedback" style="display:none">
Ooops....Something Went Wrong
</div>

您可能需要进行一些调整（比如将json的响应反序列化为对象），但这就是它的要点。

Jquery如果条件显示基于提交或失败的消息

1 个答案: