在jQuery中通過ajax提交表單

Question

我在提交表格時遇到一些問題。 似乎沒有什么東西在發送，他們的代碼有什么問題嗎，因為JavaScript並不是我的強項...

$("#send").click(function() {
        var complete = true;
        $('input#name, input#email, input#subject, textarea#message').each(function() {
            if ($(this).val()) {
                $(this).css("background","#ffffff").css("color","#5c5c5c");
            } else {
                $(this).css("background","#d02624").css("color","#ffffff");
                complete = false;
            }
        });
        if (complete == true){
            var name = $("input#name").val();
            var email = $("input#email").val();
            var subject = $("input#subject").val();
            var message = $("textarea#message").val();
            var data = '{"name":"'+name+'","sender":"'+email+'","subject":"'+subject+'","message":"'+message+'"}';
            $.ajax({
                type:"POST",  
                url:"contact.php",  
                data:$.base64.encode(data),
                success:function(data){
                    data = $.parseJSON(data);
                    if (data.status == "success") {
                        $.fancybox.close();
                    }
                }
            });
        }
    });

此活動還有一個實時版本，可以在以下網址查看： http : //idify.co.uk ，謝謝:)

Answer 1

您可以做得更好。

$('form')
    .submit(function(event) {
        var form = $(this);
        $.ajax({
            url: '[url here]',
            type: 'post',
            data: $.base64.encode(form.serialize()),  // $.serialize() - it gets all data from your form
            dataType: 'json', // function in success callback knows how to parse returned data
            success: function(data) {
                if (data['status'] == true) {
                    // your code here
                    // e.g.
                    $.fancybox.close();
                }
            }
        });
        event.preventDefault();
    });

請享用！ :)

Answer 2

提交后出現錯誤：

數據為空http://idify.co.uk/javascripts/landing.js第25行

看來數據已成功發送，並且有一個響應：

 {"status":"error","responce":"No token parameter was specified."} 

這應該可以幫助您確保成功回調中包含數據：

            success:function(response) {
                if (response) {
                    var data = $.parseJSON(response);
                    if (data && data.status == "success") {
                        $.fancybox.close();
                    }
                } else {
                    // handle errors
                }
            }

Answer 3

哈哈，謝謝大家。 我很傻，沒有包含需要通過php文件傳遞的變量，對它進行了排序，並且它的工作就像一個夢，我最終使用了第一個解決方案，因為表單提交對我不起作用。