如何在laravel中不刷新页面的情况下发送数据？

Posted 2023-03-14

【中文标题】如何在laravel中不刷新页面的情况下发送数据？

【英文标题】：How to send data without refreshing page in laravel?

【发布时间】：2018-05-29 15:19:04

【问题描述】：

我需要在不刷新页面的情况下将数据发送到数据库。

家庭刀片：

<form class="chat" id="message" action="#" method="post">
    <input type="hidden" name="_token" id="_token" value=" csrf_token() ">
    <li>
        <div class="panel-footer">
            <div class="input-group">
                <input type="text" name="message" class="" placeholder="Type your message here..." />
                <span class="input-group-btn">
                    <button type="submit" class=" btn-success btn-sm searchButton" id="save" >
                    Send
                    </button>
                </span>
            </div>
        </div>
    </li>
</form>

控制器：

public function message(Request $data)

    $ins = $data->all();
    unset($ins['_token']);
    $store = DB::table("chatbox")->insert([$ins]);
    return Redirect('Users/home')->with('message',"success");

阿贾克斯：

<script>
$(document).on("click", ".save", function() 
    $.ajax(
        type: "post",
        url: '/Users/message',
        data: $(".message").serialize(),
        success: function(store) 

        ,
        error: function() 
        
    );
);
</script>

目前，当我发送数据时，它会自动刷新整个页面，但只需要刷新特定的表单。

【参考方案1】：

您必须在 javascript/jquery 表单 submit 函数中处理函数并使用 e.preventDefault() 停止 html 以提交表单。

在以下代码类型中尝试您的 ajax 代码。

$('#message').submit(function(e) 
    e.preventDefault();
    //your ajax funtion here
);

您可以在成功功能中重置/刷新表单

 $("#message").trigger("reset");

【参考方案2】：

您应该将按钮的类型从submit 更改为button，例如：

<button type="button" class=" btn-success btn-sm searchButton" id="save" >end</button>

或使用e.preventDefault(); 阻止默认操作（submit），例如：

$(document).on("click",".save",function()
    e.preventDefault(); //Prevent page from submiting
    ...
    ...
); 

注意：还请注意，您没有类 save 但 ID 为 save 的按钮，因此事件处理程序应如下所示：

$(document).on("click", "#save", function()
________________________^

【讨论】：

但是我们已经保存了id

不确定你的意思，但既然你有一个 id 保存选择器应该是 #save 作为我的答案点，但在你原来的帖子你有类选择器 .save 代替.. .

【参考方案3】：

您需要阻止默认的表单提交，并改用脚本

$(document).on("click", "#save", function(e) 

    e.preventDefault(); // Prevent Default form Submission

    $.ajax(
        type:"post",
        url: '/Users/message',
        data: $("#message").serialize(),
        success:function(store) 
            location.href = store;
        ,
        error:function() 
        
    );

);

而不是返回重定向，而是从控制器返回 url 并让脚本处理重定向

public function message(Request $data)

    $ins = $data->all();
    unset($ins['_token']);
    $store = DB::table("chatbox")->insert([$ins]);
    session()->flash('message', 'success');
    return url('Users/home');

【参考方案4】：

删除 return Redirect('Users/home')->with('message',"success"); 并返回一个类似

的数组

return ['message' => 'success'];