首页 > 解决方案 > Laravel:当复选框状态更改时发送 AJAX POST 请求时出现问题

问题描述

对于我正在构建的管理面板,如果您选中或取消选中一个复选框,我可以使帖子显示为可见或不可见,当单击该复选框时,一个 POST 请求被发送到 /posts-update-visibility 方法,该方法更新 isVisble 的属性邮政模型。

出于某种原因,isVisible 没有被更新,无论如何 isVisible 总是返回 1。

首先使用 AJAX GET 调用从数据库中检索帖子:

$.ajax({

                    async: true,
                    url: '/posts',
                    type: 'GET',
                    dataType: 'JSON',
			 
                    success: function (data) { 
							
				        $('.row[data-link=' + linked_entry + ']').remove();
					
					    $.each(data.posts, function (index, item) {
					
					        var posts_row = '<tr class="row" data-link="posts">';
                            posts_row += '<td>' + item.title + '</td>';
                            posts_row += '<td>' + item.body + '</td>';
                            posts_row += '<td><div style="width:110px; height:60px; background-image:url(' + item.image + '); background-size:cover;"></div></td>';
                            posts_row += '<td style="text-align:center;"><input type="checkbox" class="entry_checkbox" data-link="posts" data-id="' + item.id + '" data-isVisible="' + item.isVisible + '" name="isVisible" '+(item.isVisible ? 'checked' : '')+'></td>';
                            posts_row += '</tr>';
	
					        $('.entry_table_container[data-link=' + linked_entry + ']').append(posts_row);
                        });
								
			              
                    },
			
			        error: function (data){
                        var errors = data.responseJSON;
                        console.log(errors);
                    }
				
		        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

然后当检测到复选框状态时,我发送 POST 请求:

$(document).on('change', '.entry_checkbox', function() {
        console.log('Checkbox state changed');
        
        linked_entry = $(this).attr("data-link");
        console.log(linked_entry);
        
        
        $.ajaxSetup({
            headers: { 'X-CSRF-Token' : $('meta[name=csrf-token]').attr('content') }
        });
        

        switch(linked_entry) {
            
            case "posts":
            
            
                var formData = new FormData();
                formData.append('id', $(this).attr("data-id"));
                formData.append('isVisible', $('.entry_checkbox[data-link=' + linked_entry + ']').is(':checked') ? 1 : 0);
            
                $.ajax({
        
                    async: true,
                    cache: false,
                    url: '/posts-update-visibility',
                    type: 'POST',
                    data: formData,
                    dataType: 'JSON',
                    processData: false,
                    contentType: false,
            
                    success: function (data) { 
                        console.log(data.success);
                        console.log(data.visibility);
                    },
            
                    error: function (data){
                        var errors = data.responseJSON;
                        console.log(errors);
                    }
                });

            break;
                    
            default: 
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我更新 isVisible 的控制器方法(它实际上并没有更新任何内容,并且总是返回 1,$visibility 和 isVisible)。

public function updateVisibility(Request $request)
    {
        $id = $request->id;
        $post = Post::findOrFail($id);
        $post->isVisible = $request->isVisible;
        $post->save();
        
        $visibility = $post->isVisible;
        
        return response()->json([
        
            'success' => 'Publicación actualizada correctamente',
            'post' => $post,
            'visibility' => $visibility,
        ]);
    }

这是 js 控制台提要:Checkbox state changed posts Publicación actualizada Correctamente 1

JSON Response post {…} id 2 title Titulo del segundo post body 描述 del segundo post image img/posts/2.jpg isVisible 1 created_at null updated_at null visibility 1

标签: javascriptphpjquerylaravel

解决方案


推荐阅读