媒介：这是一篇关于form提交数据的文章，ajax由jQuery供应

form表单提交

一、form是HTML的一个标签，用来向服务端发送数据。form元素有本身的属性，这里要讲的是form的enctype,method,action这三个属性

1. enctype:示意的是当method=”post”时刻，form将数据提交给服务器端的MIME范例能够取值有以下三种

   • application/x-www-form-urlencoded:未制订花样的默许花样
   • multipart/form-data:用于type属性值设为file的input标签
   • text/plain(html5)

2.method:示意指定阅读器用那种http体式格局提交form，能够值有

• post:指的是HTTP post要领，表单数据会包含在表单体内部提交给服务器端
• get:指的是HTTP get要领，表单数据会附加在action属性的URI中，并以?作为分隔符，获得如许的URI在提交给服务器端，数据暴露在URI中

3.action: 处置惩罚当前form信息地点的URL

应用上述属性发送表单数据至服务器端

二、实践一
HTML code

<div class="wrap">
    <form action="demo.php" method="post" id="demoForm">
        <input type="text" name="name">
        <input type="password" name="password">
        <input type="text" name="else">
        <input type="reset" value="作废">
        <input type="submit" value="提交" onclick="demo();return false;">
    </form>
</div>

demo.php吸收数据举行处置惩罚

JavaScript code

<script >
        function demo(){
            var data = $('#demoForm').serialize();
            $.ajax({
                url:"demo.php",
                type:"post",
                data:data,
                dataType:"json",
                success:function(res){
                    // 胜利回调函数
                },
                error:function(xhr){
                    // 失利回调函数
                }
            });
        }
        
    </script>
    
    

三、实践二
当前存在input元素的type范例是file

HTML code

<div class="wrap">
        <form action="demo.php" method="post" id="demoForm" enctype="multipart/form-data">
            <input type="text" name="name">
            <input type="password" name="password">
            <input type="file" name="file">
            <input type="reset" value="作废">
            <input type="submit" value="提交" onclick="demo();return false;">
        </form>
    </div>

JavaScript code

<script >

    function demo(){
        var data = new FormData($('#demoForm')[0]);
        $.ajax({
            url:"demo.php",
            type:"post",
            data:data,
            dataType:"json",
            cache:false,
            contentType:false,
            processData:false,
            success:function(res){
                // 胜利回调函数
            },
            error:function(xhr){
                // 失利回调函数
            }
        });
    }
    
</script>