如何在添加书签时防止页面重新加载？答案

【问题标题】：How to prevent page reload while bookmarking it?如何在添加书签时防止页面重新加载？
【发布时间】：2019-10-21 21:27:07
【问题描述】：

我正在使用 laravel 制作图书图书馆网站。我正在尝试添加书签功能。我试过在点击书签按钮时做类似的事情，页面号被发送到数据库并且它正在工作。问题是从控制器页面返回时重新加载导致书回到第 1 页。有没有什么方法可以在不重新加载页面的情况下将数据发送到数据库？我知道 ajax 可以做到这一点，但我在我的应用程序中使用 JavaScript，我尝试用它部署 ajax 但没有运气。我正在显示我的代码。任何好的建议都将受到高度赞赏。

我的javascript函数：

function bookmark()
{
    book = '<?php echo $book->id ?>';

        $.ajax({
            type: "post",
            url: "save_bookmark",
            data: {b_id:book, p_no:count},

            success: function(response){
                 console.log(response);
            },
            error: function(error){
                 console.log(error);
            }
        });
    });

}

count 在脚本中定义。

我的路线：

Route::post("save_bookmark/{b_id}/{p_no}",'BookmarkController@create')->name('save_bookmark');

我的控制器：

public function create($b_id, $p_no)
{
    $b=new bookmark;           
    $b->u_id=Auth::user()->id;
    $b->book_id=$b_id;
    $b->p_no=$p_no;
    $b->save();  
    return response()->json([
        'status'     => 'success']);   
}

我的html：

 <li><a id="bookmark" onclick="bookmark()" >Bookmark</a></li>

注意：有一个导航栏，书签是其中的一部分。没有表单提交。

【问题讨论】：

我只是猜测一下，说你有一个<form> 元素，在那个表单元素中你有一个按钮。如果该按钮不是type="button"，它将默认提交表单。你的表格有动作吗？因此，当您尝试进行 ajax 调用时，页面会重新加载。我相信当您单击按钮以保存页码时表单正在提交。
什么叫“书签”？而且您的路线似乎表明参数应该在 URL 中，但是（除非我弄错了）这不是您的 JS 正在做的事情。
每本书都有bookmark 功能吗？ book = '<?php echo $book->id ?>'; 似乎是错误的（很可能）。你能分享更多你的前端代码吗？如果你有一个按钮，你可以给它一个数据属性（<button data-book="<?= $book->id ?>">Bookmark</button> 然后你的 javascript 可以访问这个数据属性。

标签： php laravel pdf.js

【解决方案1】：

try this: use javascript to get the book id

$("#btnClick").change(function(e){

        //console.log(e);
        var book_id= e.target.value;

        //$token = $("input[name='_token']").val();
        //ajax
        $.get('save_bookmark?book_id='+book_id, function(data){
        //console.log(data);

        })
    });

//route
Route::get("/save_bookmark",'BookmarkController@create');

【讨论】：

【解决方案2】：

您需要添加事件来运行并添加 preventDefault

<button class="..." onclick="bookmark(event)">action</button>

在js中：

function bookmark(e)
{
    e.preventDefault();
    book = '<?php echo $book->id ?>';

        $.ajax({
            type: "post",
            url: "save_bookmark",
            data: {b_id:book, p_no:count},

            success: function(response){
                 console.log(response);
            },
            error: function(error){
                 console.log(error);
            }
        });
    });

}

在你需要的控制器中使用它：

use Illuminate\Http\Request;
...
...
public function create(Request $request)
{
    $b=new bookmark();           
    $b->u_id=Auth::user()->id;
    $b->book_id=$request->get('b_id');
    $b->p_no=$request->get('p_no');
    $b->save();  
    return response()->json([
        'status'     => 'success']);   
}

在路线中使用它：

Route::post("save_bookmark/",'BookmarkController@create')->name('save_bookmark');

【讨论】：

嘿伙计！！感谢回复。我部署了您所说的内容，但出现错误：未捕获的 TypeError: e.preventDefault is not a function
对不起，我有错误。您需要使用它只需将其更改为 event
它工作了.. 你能看看我的控制器功能，因为数据没有保存在数据库中
你在哪里得到count var？数据：{b_id:book, p_no:count} 我在你的 js 代码中没有看到它
这些是在脚本中定义的。他们得到了正确的价值观。我已经检查过了

【解决方案3】：

好吧，假设您的bookmark() JavaScript 函数在表单提交时被调用，我想您只需要阻止表单提交即可。所以你的 HTML 代码看起来像这样：

<form onsubmit="event.preventDefault(); bookmark();">

显然，如果您在 script.js 中处理事件，它会看起来像这样：

HTML

<form id="bookmark" method="POST">
  <input type="number" hidden="hidden" name="bookmark-input" id="bookmark-input" value="{{ $book->id }}"/>
  <input type="submit" value="Bookmark this page" />
</form>

JavaScript

function bookmark(book_id, count) {  
  $.ajax({
    type: "post",
    url: "save_bookmark",
    data: {
      b_id: book_id,
      p_no: count
    },
    success: function (response) {
      console.log(response);
    },
    error: function (error) {
      console.log(error);
    }
  });
}

let form = document.getElementById('bookmark');
let count = 1;

console.log(form); //I check I got the right element

form.addEventListener('submit', function(event) {
  console.log('Form is being submitted');
  let book_id = document.getElementById("bookmark-input").value;
  bookmark(book_id, count);
  event.preventDefault();
});

另外，我建议您尽可能避免在 JavaScript 代码中插入 PHP 代码。它很难维护，也不能清楚地阅读......起初它似乎是一个好主意，但事实并非如此。你应该总是找到更好的选择:)

例如，您还可以使用 data-* 通过 PHP (more about data-* attributes) 将数据传递给 HTML 标记。

【讨论】：