jQuery ajax()使用serialize()提交form数据

Posted 2020-09-26 where there is a will, there i

本文转载自：http://www.cnblogs.com/leejersey/p/3750259.html

jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化，如：

<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>

$(document).ready(function(){
    console.log($("form").serialize()); // FirstName=Bill&LastName=Gates
});

这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()，举例如下：

$.ajax({
    type: \'post\',
    url: \'your url\',
    data: $("form").serialize(),
    success: function(data) {
        // your code
    }
});

使用$.post()、$.get()和$.getJSON()也是一样的：

$.post(\'your url\', $("form").serialize(), function(data) {
        // your code
    }
});

$.get(\'your url\', $("form").serialize(), function(data) {
        // your code
    }
});

$.getJSON(\'your url\', $("form").serialize(), function(data) {
        // your code
    }
});

例2：

<form id="quesform"> </form>
var check = 1;
        $("input[type=\'radio\']").click(function(){ 
            if(check != 1) { 
                return false;
            }

            var checked_len = $("input[type=\'radio\']:checked").length;
            var len = Number("{{$queslist|count}}");
            var ques_data = $("#quesform").serialize();
            console.log(ques_data);

            if(checked_len >= len) { 
                $.ajax({
                    type: "POST",
                    url: "__SELF__",
                    data:ques_data,
                    beforSend:function() { 
                        check = 2;
                    },
                    success: function(res) {
                        if(res.status==2000){
                            window.location.href = \'/Evaluation/index.html\';
                        } else if (res.state == 101) { 
                            window.location.href = res.url;
                        }else{
                            TipsShow.showtips({info: res.msg});
                        }
                        check=1;
                    }
                });
            }
        });