專注Java教育13年 全國咨詢/投訴熱線:400-8080-105

首頁 hot資訊 在jQuery中通過Ajax表單提交數據

在jQuery中通過Ajax表單提交數據

更新時間:2022-04-15 08:53:35 來源:動力節點 瀏覽103次

如何在 jQuery 中通過 AJAX 提交表單

創建 HTML 表單

jQuery Ajax 代碼

常見問題

如何在 jQuery ajax 中使用表單數據添加額外的字段或數據?

ajax FormData:非法調用

如何使用 jQuery.ajax 發送 multipart/FormData 或文件?

創建 HTML 表單

在這一步中,我們將為多個文件上傳或 FormData 創建一個 HTML 表單和一個額外的字段。

<!DOCTYPE html>
<html>
<title>jQuery Ajax Form Submit with FormData Example</title>
<body>
<h1>jQuery Ajax Form Submit with FormData Example</h1>
<form method="POST" enctype="multipart/form-data" id="myform">
    <input type="text" name="title"/><br/><br/>
    <input type="file" name="files"/><br/><br/>
    <input type="submit" value="Submit" id="btnSubmit"/>
</form>
<h1>jQuery Ajax Post Form Result</h1>
<span id="output"></span>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 
</body>
</html>

jQuery Ajax 代碼

在這一步中,我們將編寫用于向服務器發送表單數據的 jquery ajax 代碼。

$(document).ready(function () {
    $("#btnSubmit").click(function (event) {
        //stop submit the form, we will post it manually.
        event.preventDefault();
        // Get form
        var form = $('#myform')[0];
       // Create an FormData object 
        var data = new FormData(form);
       // If you want to add an extra field for the FormData
        data.append("CustomField", "This is some extra data, testing");
       // disabled the submit button
        $("#btnSubmit").prop("disabled", true);
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/upload.php",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 800000,
            success: function (data) {
                $("#output").text(data);
                console.log("SUCCESS : ", data);
                $("#btnSubmit").prop("disabled", false);
            },
            error: function (e) {
                $("#output").text(e.responseText);
                console.log("ERROR : ", e);
                $("#btnSubmit").prop("disabled", false);
            }
        });
    });
});

以上就是關于“在jQuery中通過Ajax表單提交數據”的介紹,大家如果想了解更多相關知識,可以來關注一下動力節點的AJAX教程,里面有更豐富的知識等著大家去學習,希望對大家能夠有所幫助哦。

提交申請后,顧問老師會電話與您溝通安排學習

免費課程推薦 >>
技術文檔推薦 >>

返回頂部
天堂资源网,色综合天天综合给合国产,午夜无码伦费影视在线观看,亚洲网红自拍偷拍 秋霞在线观看片无码免费不卡| 人人妻人人狠人人爽| 任你懆视频这精品| japaneseoleman中老年| 国产女厕所偷窥系列在线视频| 久久香蕉国产线看观看精品yw| 总裁每上一步楼梯就进入更深| 东北老夫妇啪啪嗷嗷叫| 边做菜边摸边爱爱好爽| 亚洲图欧洲图自拍另类高清| 夜夜未满十八勿进的爽爽影院| freex性Xx| 无翼乌漫画之本能觉醒| caoporm-超频在线视频| 正在播放国产对白孕妇作爱| 狠狠综合久久久久综合网小蛇| 各类熟女熟妇真实视频| 很黄很色很污18禁免费| 日本漫画无翼乌全彩工番漫画| chinese乱子伦xxxx| 攻含着双性受奶头睡觉| 亚洲中文字幕一区二区三区| 儿孑今晚满足你| 福利100合集 在线播放| 欧美黑人巨大videos精品| 18禁色大尺度视频免费播放器| 日韩人妻无码精品一专区| 8x8x海外华为永久免费视频| 欧美movies同性同志| 欧美在线看片a免费观看| 日韩av一区二区三区无码| http://www.222beryl.com