ajax編輯資訊和刪除資訊

1、控制器程式碼

/**
 * 編輯家教資訊
 */
public function gengxin(Request $request)
{
    $id = $request->id;
    $article = Tutor::with('photo')->find($id);
    $article->update([
        'user_id' => Auth::user()->id,
        'title' => $request->title,
        'type' => $request->type,
        'identity_id' => $request->identity_id,
        'stage' => implode(',', $request->stage),
        'subject' => implode(',', $request->subject),
        'city' => $request->city,
        'area' => $request->area,
        'street' => $request->street,
        'description' => $request->description,
        'price' => $request->price,
        'photo_id' => $request->photo_id,
        'name' => $request->name,
        'mobile' => $request->mobile,
    ]);

}

/**
 * 刪除資訊
 */
public function destroy($id)
{
    Tutor::destroy($id);
}複製程式碼

2、html程式碼

<div class="info_list">

    @foreach($tutors as $tutor)
        <div class="info_list_c" data-id="{{$tutor->id}}">
            <input type="hidden" id="hidden" value="{{$tutor->id}}">
            <input type="hidden" id="type" value="{{$tutor->type}}">
            <input type="hidden" id="identity_id" value="{{$tutor->identity_id}}">
            <input type="hidden" id="stage" value="{{$tutor->stage}}">
            <input type="hidden" id="subject" value="{{$tutor->subject}}">
            <input type="hidden" id="description" value="{{$tutor->description}}">
            <input type="hidden" id="price" value="{{$tutor->price}}">
            <input type="hidden" id="photo" value="{{$tutor->photo->image or ''}}">
            <input type="hidden" id="photo_id" value="{{$tutor->photo_id}}">
            <input type="hidden" id="city" value="{{$tutor->city}}">
            <input type="hidden" id="area" value="{{$tutor->area}}">
            <input type="hidden" id="street" value="{{$tutor->street}}">
            <input type="hidden" id="name" value="{{$tutor->name}}">
            <input type="hidden" id="mobile" value="{{$tutor->mobile}}">

            <div class="info_list_title"><a href="/jiajiao/show/{{$tutor->id}}">{{$tutor->title}}</a></div>
            <button class="edit_button" style="cursor: pointer;">編輯資訊</button>
            <button style="cursor: pointer;" class="delete">刪除資訊</button>
        </div>
    @endforeach

</div>複製程式碼

編輯模態框中要寫隱藏域。彈出驗證資訊

@if(count($errors) > 0)
    <script>
        layer.msg('{{$errors->first()}}', {icon: 5, time: 2000, skin: 'winning-class'})
    </script>
@endif

<input type="hidden" id="edit_id">複製程式碼

3、js程式碼

/*點選button顯示model*/
$(".edit_button").click(function () {
    $(".model").show();
    //獲取表單原有值
    var id = $(this).siblings("#hidden").val();
    var title = $(this).siblings('.info_list_title').text();
    var type = $(this).siblings('#type').val();
    var identity_id = $(this).siblings('#identity_id').val();
    var stage = $(this).siblings('#stage').val();
    var subject = $(this).siblings('#subject').val();
    var description = $(this).siblings('#description').val();
    var price = $(this).siblings('#price').val();
    var photo = $(this).siblings('#photo').val();
    var photo_id = $(this).siblings('#photo_id').val();
    var city = $(this).siblings('#city').val();
    var area = $(this).siblings('#area').val();
    var street = $(this).siblings('#street').val();
    var name = $(this).siblings('#name').val();
    var mobile = $(this).siblings('#mobile').val();

    //設定編輯值
    $("#edit_id").val(id);
    $("#title").val(title);
    /*預設選中單選框*/
    $(".type").each(function () {
        if ($(this).val() == type) {
            $(this).attr('checked', "checked")
        }
    });
    $(".identity_id").each(function () {
        if ($(this).val() == identity_id) {
            $(this).attr('checked', "checked")
        }
    });
     /*預設選中核取方塊*/
   $.each(stage.split(','), function (i, item) {
        $("input[type=checkbox][value=" + item + "]").attr("checked", "checked");
    });
    $.each(subject.split(','), function (i, item) {
        $(".subject").each(function () {
            if ($(this).val() == item) {
                $(this).attr("checked", "checked");
            }
        })
    });
    $("#description1").val(description);
    $("#price1").val(price);
    $("#img_show").attr("src", photo);
    $("#photo_id1").val(photo_id);
    $("#select_shi").val(city);
    $("#select_qu option").remove();
    $("#select_qu").append("<option>" + area + "<option>");
    $("#select_zhen option").remove();
    $("#select_zhen").append("<option>" + street + "<option>");
    $("#name1").val(name);
    $("#mobile1").val(mobile);
    // console.log(photo_id);
});
//執行編輯
$(".submit").click(function () {
    var id = $("#edit_id").val();
    var title = $("#title").val();
    var type = $(".type:checked").val();
    var identity_id = $(".identity_id:checked").val();
    var description = $("#description1").val();
    var price = $("#price1").val();
    var photo_id = $("#photo_id1").val();
    var city = $("#select_shi").val();
    var area = $("#select_qu").val();
    var street = $("#select_zhen").val();
    var name = $("#name1").val();
    var mobile = $("#mobile1").val();
    var stage = [];
    $(".stage:checked").each(function (i) {//把所有被選中的核取方塊的值存入陣列
        stage[i] = $(this).val();
    });
    var subject = [];
    $(".subject:checked").each(function (i) {//把所有被選中的核取方塊的值存入陣列
        subject[i] = $(this).val();
    });

    //手機號正則
    var mobile2 = /^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,6,7,8]{1}\d{8}$|^18[\d]{9}$/;

    if (title.length == "") {
        layer.msg("標題不能為空!", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (type.length == "") {
        layer.msg("釋出型別！", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (identity_id.length == '') {
        layer.msg("身份不能為空！", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (stage.length == '') {
        layer.msg("輔導階段不能為空！", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (subject.length == '') {
        layer.msg("輔導科目不能為空！", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (description.length == '') {
        layer.msg("服務介紹不能為空！", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (price.length == '') {
        layer.msg("價格不能為空！", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (photo_id.length == '') {
        layer.msg("圖片不能為空！", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (city.length == '') {
        layer.msg("地市不能為空！", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (area.length == '') {
        layer.msg("地區不能為空！", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (name.length == '') {
        layer.msg("聯絡人不能為空！", {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }
    if (!mobile2.test(mobile)) {
        layer.msg('手機號格式不正確!', {icon: 5, time: 2000, skin: 'winning-class'});
        return false;
    }

    $.ajax({
        type: 'post',
        url: "/user/gengxin/" + id,
        data: {
            id: id,title:title, type: type, identity_id: identity_id, description: description,
            price: price, photo_id: photo_id, city: city, area: area, street: street,
            name: name, mobile: mobile, stage: stage, subject: subject
        },
        dataType: 'json',
        success: function (data) {
            window.location.reload();return false;
        }
    });
    // console.log(photo_id,stage, subject);
    // return false;
});

/*點選docuemnt事件隱藏model*/
$(".model").click(function () {
    $(".model").hide();
});
/*對model_c事件阻止冒泡*/
$(".model_c").click(function (e) {
    e.stopPropagation();
})

/*刪除資訊*/
$('.delete').click(function () {
    var id = $(this).parents('.info_list_c').data('id');
    var _this = $(this);
    $.ajax({
        type: 'DELETE',
        url: "/user/delete/" + id,
        data: {id: id},
        success: function () {
            _this.parents('.info_list_c').fadeOut(400);
        }
    });
    return false;
})複製程式碼

4、路由配置

Route::get('/user','JiajiaoController@user');
Route::post('/user/gengxin/{id}','JiajiaoController@gengxin');
Route::delete('/user/delete/{id}','JiajiaoController@destroy');複製程式碼