1. 程式人生 > >jQuery ajax提交

jQuery ajax提交

ajax提交

<script>

            $(function(){
                $("#submit").on('click',function(){   //選擇id為submit的按鈕,點選時觸發函式
                    $.ajax({
                        type: 'POST',
                        url: "{:url('admin/update')}",
                        data: $(".layui-form").serialize(),  //選擇class為layui-form的資料  serialize() 方法通過序列化表單值,建立 URL 編碼文字字串.

                        dataType: "json",
                        success: function(data){ //返回成功函式
                            console.log(data);
                            if (data.status == 1) {
                                alert(data.message);
                                window.location.href = "{:url('admin/index')}";
                            } else {
                                alert(data.message);
                                window.location.href = "{:url('admin/ediit')}";
                            }
                        }
                    })
                })
            })

        </script>

$.ajaxFileUpload提交

                    <div id="file-pretty">
                   <input id="file_path" name="file" type="file" class="form-control" style="display:none">
                    <div class="input-append input-group">
                     <span class="input-group-btn">
                     <button id="btn_path" type="button" class="btn btn-white">選擇圖片</button>
                       </span>
               <input id="info_path" type="text" name='img' class="form-control input-large" value="">
                                                </div>
                                            </div>




                                        <script>
                                                $(function(){
                                                    $('#btn_path').click(function(){    
                                                        $("#file_path").click();//使用選擇圖片按鈕覆蓋原來的上傳檔案按鈕,當點選選擇圖片時,相當於點選上傳檔案按鈕。
                                                    });


                                                    //非同步上傳

 //當id為file_path的元素髮生變化時執行函式。delegate為繫結一個事件。

http://www.365mini.com/page/jquery-delegate.htm(delegate的用法)

http://www.w3school.com.cn/jquery/event_change.asp(change的用法)


                                                    $("body").delegate("#file_path", 'change', function(){  

                                                        var filepath = $("input[name='file']").val();
                                                        var arr = filepath.split('.');

                                                        var ext = arr[arr.length-1];//圖片字尾


               if('gif|jpg|png|bmp'.indexOf(ext)>=0){ //判斷ext中是否有gif,jpg... http://www.w3school.com.cn/jsref/jsref_indexOf.asp(indexof的用法)

                                                            $.ajaxFileUpload({
                                                               url: '{:url('upload_image')}',
                                                               type: 'post',
                                                               data: { name: 'file' },// 選擇name為“file”的元素的資料(與上面的id選擇器進行比較  data: $(".layui-form").serialize())
                                                               secureuri: false,
                                                               fileElementId: 'file_path',
                                                               dataType: 'json',
                                                               success: function (data, status) {
                                                                   $('#info_path').val(data);

                                                                   $('#info_path').focus(); //當元素獲得焦點時,發生 focus 事件。

http://www.w3school.com.cn/jquery/event_focus.asp(focus的用法)

                                                               },
                                                               error: function (data, status, e){
                                                                   layer.alert('上傳失敗');
                                                               }
                                                            });
                                                        }else{
                                                            // 清空file
                                                            $('#file_path').val('');
                                                            layer.alert('請上傳合適的圖片型別');
                                                        }
                                                    });
                                                });
                                            </script>