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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/47831909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 17:06:53  来源:igfitidea点击:

How to send data without refreshing page in laravel?

javascripthtmlajaxlaravel

提问by Hemanth

I need send data to the database without refreshing page.

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

Home Blade :

家庭刀片:

<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>

Controller :

控制器 :

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

Ajax :

阿贾克斯:

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

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

At present when I send data it is automatically refreshing the whole page but only the particular form need to be refreshed.

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

回答by Zakaria Acharki

You should change the type of the button from submitto buttonlike :

您应该将按钮的类型从更改submitbuttonlike :

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

Or prevent the default action (submit) using e.preventDefault();like :

或者submit使用e.preventDefault();like阻止默认操作 ( ) :

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

NOTE :Note also that you don't have button with class savebut with id saveso the event handler should looks like :

注意:另请注意,您没有带 classsave但带 id 的按钮,save因此事件处理程序应如下所示:

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

回答by Paul

You have to handle function inside javascript/jquery form submitfuntion and use e.preventDefault()to stop HTML to submit the form.

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

Try your ajax code in the below code type.

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

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

You can reset/refresh your form in success function

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

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

回答by linktoahref

You need to prevent the default form submission, and use the script instead

您需要阻止默认表单提交,并使用脚本代替

$(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() {
        }
    });

});

and instead of returning a redirect, return the url from the controller and let the script handle the redirect

并且不返回重定向,而是从控制器返回 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');
}

回答by common sense

Remove return Redirect('Users/home')->with('message',"success");and just return an array like

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

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