form表單提交

前言:這是一篇關於form提交數據的文章,ajax由jQuery提供php

form表單提交

1、form是HTML的一個標籤,用來向服務端發送數據。form元素有本身的屬性,這裏要講的是form的enctype,method,action這三個屬性html

  1. enctype:表示的是當method="post"時候,form將數據提交給服務器端的MIME類型可能取值有如下三種html5

    • application/x-www-form-urlencoded:未制定格式的默認格式
    • multipart/form-data:用於type屬性值設爲file的input標籤
    • text/plain(html5)

2.method:表示指定瀏覽器用那種http方式提交form,可能值有ajax

  • post:指的是HTTP post方法,表單數據會包含在表單體內部提交給服務器端
  • get:指的是HTTP get方法,表單數據會附加在action屬性的URI中,並以?做爲分隔符,獲得這樣的URI在提交給服務器端,數據暴露在URI中

3.action: 處理當前form信息所在的URLjson

利用上述屬性發送表單數據至服務器端瀏覽器

2、實踐一
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接收數據進行處理app

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>

3、實踐二
當前存在input元素的type類型是filepost

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>
相關文章
相關標籤/搜索