Vue form 表單提交+ajax非同步請求+分頁

阿新 • • 發佈：2019-01-09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="UTF-8"/>
    <title>非同步引數上傳</title>
    <link rel="stylesheet" type="text/css" href="${ctx }/css/bootstrap.min.css" 
>
    <#--<link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>-->
    <link href="${ctx }/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="${ctx }/css/css.css"/>
    <#--<link rel="stylesheet" 
 type="text/css" href="${ctx }/css/style.css"/>-->
    <link rel="stylesheet" type="text/css" href="${ctx }/css/subwelcome.css"/>
    <script>var $context = {};
    $context.ctx = '${ctx}';
    $context.resources = '${ctx}/resources';
    </script>
</head>
<body>
<div id="app" 
 class="htmleaf-container">

    <div class="container kv-main">
        <br>
        <div style="margin-left: 200px;" class="robot-b-name">
            <a class=".btn btn-primary" href="">返回上傳頁面</a>
        </div>
        <br>
        <form @submit.prevent="submit" class="well form-inline">
            <input type="text" class="input-big" style="width: 500px" v-model.trim="batchInforRequestVO.appkey"
                   placeholder="請輸入appkey">
            <input type="text" class="input-group" style="width: 500px" v-model.trim="batchInforRequestVO.batchnum"
                   placeholder="請輸入批次號">
            <input type="hidden" class="input-group" style="width: 500px"
                   v-model.trim="batchInforRequestVO.currentPage">
            <button type="submit" class="btn btn-info">查詢</button>
        </form>
        <br>
        <!--提示框公共部分begining-->
        <div class="modal-mask" v-show="show">
            <div class="modal-confirm">
                <h4 class="confirm-header">
                    <i class="iconfont icon-questioncircle"></i> {{ title }}
                </h4>
                <div class="confirm-content">
                    {{ content }}
                </div>
                <div class="confirm-btns">
                <#--<button class="btn" v-on:click="opt(1)">取 消</button>-->
                    <button class="btn btn-primary" v-on:click="opt(2)">確 定</button>
                </div>
            </div>
        </div>
        <br>
        <!--提示框公共部分ending-->
        <div class="modal-mask" v-show="showcontent">
            <div class="modal-confirm">
                <h4 class="confirm-header">
                    <i class="iconfont icon-questioncircle"></i> {{ title }}
                </h4>
                <div class="confirm-content">
                    {{ content }}
                </div>
                <div class="confirm-btns">
                <#--<button class="btn" v-on:click="opt(1)">取 消</button>-->
                    <button class="btn btn-primary" v-on:click="opt(3)">確 定</button>
                </div>
            </div>
        </div>
        <div>查詢結果</div>
        <!-- TableBegining -->
        <div>
            <table class="table table-striped table-bordered table-condensed">
                <tr>
                    <th>批次號</th>
                    <th>處理進度</th>
                    <th>檔名稱</th>
                    <th>上傳時間</th>
                    <th>請求方法</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(batchInforResponseVO, index) in BatchInforResponseVO ">
                    <td>{{batchInforResponseVO.batchNum}}</td>
                    <td>{{batchInforResponseVO.processPercentage}}</td>
                    <td>{{batchInforResponseVO.channelName}}</td>
                    <td>{{batchInforResponseVO.inserTime}}</td>
                    <td>{{batchInforResponseVO.requestAddre}}</td>
                    <td><a id="opreat" v-on:click="defaultExport(index)" href="#">匯出 </a><a
                            v-on:click="redirectTo(index)" id="opreat" href="#">自定義匯出 </a></td>
                </tr>
            </table>
        </div>
        <!-- TableEnding -->
        <!-- 分頁部分Begining -->

        <div class="span6" style="width:25%;margin-right: 10px;float: right;">
            <div style="width: 500px;" id="DataTables_Table_0_length">
                <span> 每頁10條記錄 當前頁{{batchInforRequestVO.currentPage}}</span> &nbsp
                <span>共{{totalPage}}頁&nbsp<a id="previousPage" v-on:click="changePage(1)" href="#">←上一頁</a>&nbsp &nbsp<a
                        id="nextPage" v-on:click="changePage(2)" href="#">下一頁 →</a></span>
            </div>
        </div>
        <!-- 分頁部分Ending -->

    </div>
</div>
</div>
</body>
<script type="text/javascript">
    window.history.go(1);
</script>
<script src="${ctx }/js/jquery/jquery-2.0.3.min.js"></script>
<script src="${ctx }/js/jquery.form.js"></script>
<script src="${ctx }/js/vue/vue.js"></script>
<script src="${ctx }/js/business/exportconfig.js" type="text/javascript"></script>

</html>

var vue = new Vue({
    el: '#app',
    data: {
        batchInforRequestVO: {
            currentPage: 1,
            appkey: '',
            batchnum: ''
        },
        show: false,
        showcontent: false,
        onCancel: false,
        onOk: false,
        totalPage: 0,
        title: '提示框',
        content: '載入......',
        message: '批量資料處理',
        BatchInforResponseVO: []

    },
    methods: {
        refreshTest: function () {
            location.reload(true)
        },

        //輸入框增加方法
        add: function () {
            this.user.names.push({
                text: ""
            })
        },

        //輸入框刪除方法
        decrease: function (index) {
            if (!index == 0) {
                this.user.names.splice(index, 1)

            }

        },
        changePage: function (type) {
            if (type == '1') {
                debugger
                if (this.batchInforRequestVO.currentPage == '1') {
                    vue.showcontent = true;
                    vue.content = '已經是首頁啦!';
                    return
                }
                this.batchInforRequestVO.currentPage--;
                this.submit();
            }
            else if (type == '2') {
                this.batchInforRequestVO.currentPage++;
                debugger
                if (this.batchInforRequestVO.currentPage > this.totalPage) {
                    this.batchInforRequestVO.currentPage--;
                    vue.showcontent = true;
                    vue.content = '已經是尾頁啦!';
                    return
                }
                this.submit();

            }

        },
        checkparam: function () {

            if (this.batchInforRequestVO.appkey == '' && this.batchInforRequestVO.batchnum == '') {
                vue.showcontent = true;
                vue.content = '查詢引數不可以為空!';
                return false
            }
            else {
                return true
            }


        },
        opt(type){

            this.show = false
            if (type == '1') {
                if (this.onCancel) this.onCancel()
            }
            else if (type == '3') {
                this.showcontent = false
                if (this.onOk) this.onOk()
            }
            else {
                if (this.onOk) this.onOk()
                vue.refreshTest();
            }

            this.onCancel = false
            this.onOk = false

            document.body.style.overflow = ''
        },

        submit: function () {
            debugger
            var data = JSON.stringify(this.batchInforRequestVO); // 這裡才是你的表單資料

            if (!vue.checkparam()) {
                return
            }
            ;
            //da.append("name", this.name)可以逐次新增多個引數
            $.ajax({
                url: '../interface/queryBatchInfor',
                data: data,
                type: 'POST',
                contentType: 'application/json',
                dataType: 'JSON',
                // cache: false,
                processData: false,// 告訴jQuery不要去處理髮送的資料
                // contentType: false,// 告訴jQuery不要去設定Content-Type請求頭

                success: function (data) {
                    debugger
                    if (data.respCode == 'success') {
                        vue.BatchInforResponseVO = data.batchInforResponseVOList;
                        vue.totalPage = data.totalPage;
                    } else {
                        vue.show = true;
                        vue.content = data.respMsg;
                    }
                    console.log(data)
                },
                error: function (data) {
                    vue.show = true;
                    vue.content = '系統內部錯誤';
                }
            })


        },
        defaultExport: function ($index) {
            debugger
            var index = $index;

            window.location.href = $context.ctx + "../interface/defaultexcport?batchNum=" + this.BatchInforResponseVO[index].batchNum;
        },
        redirectTo: function ($index) {
            vue.showcontent = true;
            vue.content = '進行中......';
            debugger
            var index = $index;
            // window.location.href = $context.ctx + "../interface/to_autoconfig?batchNum="+ this.BatchInforResponseVO[index].batchNum;
        }


    }

})

Vue form 表單提交+ajax非同步請求+分頁

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi

關於ajax進行form表單提交進行非同步上傳裡面帶有檔案上傳的問題

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &

轉載：關於ajax，form表單提交，http請求提交的區別

https://www.cnblogs.com/lidgblogs/archive/2017/09/01/7403828.htmlajax模仿form上傳：<!doctype html> <html lang="en"> <head>

Extjs6關於Ajax和form表單提交以及store請求session超時的處理方法

對於Store的處理每個store配置的時候，配上load監聽，載入時處理： usrStore : { model : 'App.model.Usr', autoLoad :

form表單提交,後臺方法請求提示400,不進斷點

form表單提交,後臺方法請求提示400 發現前臺的date型別form資料不能傳值到controller中的引數中,需要在請求獲取資料之前轉換型別 @initBinder可以直接在你的controller中提供資料繫結。initbinder 方法不能有返回

mip ajax jsonp 非同步請求更多載入 form表單提交

.mip-a-74{width:100%}.mip-div-96{text-indent:2em;height:10rem;overflow:hidden}.mip-section-251{margin:10px 12px 10px}.mip-img-256{width:100%;heigh

servlet3.0以上form表單提交（ajax非同步提交）

一、普通form提交 1、jsp <form id="form" method="post" name="upload" enctype="multipart/form-data" action="/index.do"> <input type=

工作中如何使用ajax提交form表單,包括ajax文件上傳

msu 包括需要 java tip ror 存儲 adf ucc 提供一種方法就是利用jquery.form.js，我們是和java對接的後臺。代碼如下： <input type="text" id="text1"> <input type="text

AJAX PHP無刷新form表單提交的簡單實現(推薦)

username mime win root 支持對象希望 meta {} 下面小編就為大家帶來一篇AJAX PHP無刷新form表單提交的簡單實現(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 ajax.php <

jqPaginator分頁（ajax用法和form表單提交用法）

用法 () var meta lang 點擊 parse name back 一般使用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

form表單提交轉為ajax方式提交

clas modal 通過 fault IT pre submit sub 方式 <form action="xxx" method="get"> //action的值是請求的url地址 <div class="form-group">

python中前後端通訊方法Ajax和ORM對映（form表單提交）

後端從資料庫獲取資料給到前端：第一種方式： admin.py檔案程式碼： @admin.route('/showList') def show(): # 獲取資料庫所有文章資料，得到一個個物件 res=Article.query.all() dicts=[]

form表單提交與ajax提交的區別

原文地址：https://blog.csdn.net/yao302789/article/details/50954902 Ajax提交是通過js來提交請求，請求與響應均由js引擎來處理，頁面不會重新整理，用戶感覺不到實際上瀏覽器發出了請求。比如說我們希望網頁總是顯示最新的新聞，而又不想老是

form表單提交沒有跨域問題，但ajax提交存在跨域問題

瀏覽器的策略本質是：一個域名下面的JS，沒有經過允許是不能讀取另外一個域名的內容，但是瀏覽器不阻止你向另外一個域名傳送請求。所以form表單提交沒有跨域問題，提交form表單到另外一個域名，原來頁面是無法獲取新頁面的內容，或者說form提交後不需要返回，但是ajax是需要返回的。而ajax是想要讀取響

Vue使用Element庫form表單提交校驗心得

Element是非常好用的前端PCui庫，但是有些樣式與產品給的需求有差別，這裡分享一下form表單校驗的心得。 Form 元件提供了表單驗證的功能，只需要通過 rules 屬性傳入約定的驗證規則，並將 Form-Item 的 prop 屬性設定為需校驗的欄位名即可。

vue.js form表單提交

form表單提交是前端經常要用到的，vue.js的form提交只是比普通的多加幾個東西其他都是大同小異的上程式碼吧！主要就是v-model的用法啦 <form action="" method="post" enctype="multipart/form-data"> &

Multipart/form-data POST檔案上傳詳解理論簡單的HTTP POST 大家通過HTTP向伺服器傳送POST請求提交資料，都是通過form表單提交的，程式碼如下：

Multipart/form-data POST檔案上傳詳解理論簡單的HTTP POST 大家通過HTTP向伺服器傳送POST請求提交資料，都是通過form表單提交的，程式碼如下： <form method="post"action="http://w.soh

Ajax模仿form表單提交以及jquery的param()方法

param() 方法用於在內部將元素值轉換為序列化的字串表示。請參閱 .serialize() 瞭解更多資訊。對於 jQuery 1.3，如果傳遞的引數是一個函式，那麼用 .param() 會得到這個函式的返回值，而不是把這個函式作為一個字串來返回。對於 jQuery 1.4，.param() 方

action提交form表單，用於登入請求，servlet接收資料

今天發現登入需要用action提交form表單，然後通過後臺決定跳轉是否成功安全性較高。之前使用前端location.href來實現跳轉，安全性很低，被測試部門打回重做。 action總結： html寫法： <form id="signin-form_id" met

Ajax提交form表單，Ajax檔案上傳

平時我們會用到各種各樣的Ajax請求資料方式，下面我們就來說一下這個Ajax的表單提交，檔案上傳等等。。。 1.第一種，.post，.get方式 $.post(path,{data:data},function(data){ if（success){ }

Vue form 表單提交+ajax非同步請求+分頁

相關推薦