Question

我正在使用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);
            }
        });
    });

}

计数是在脚本中定义的。

我的路线：

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>

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

Answer 1

您需要添加事件以起作用并添加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');

Answer 2

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');

Answer 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标记。

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

3 个答案: