Как предотвратить перезагрузку страницы при ее закладке? - PullRequest
Новая
       2

Как предотвратить перезагрузку страницы при ее закладке?

0 голосов
/ 06 июня 2019

Я делаю сайт библиотеки книг, используя 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>

Примечание: Существует панель навигации, частью которой является закладка. Форма для отправки отсутствует.

Ответы [ 3 ]

0 голосов
/ 06 июня 2019 
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');
0 голосов
/ 06 июня 2019

Что ж, если предположить, что ваша функция 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();
});

Также я бы порекомендовал вам избегать, насколько это возможно, вставки PHP-кода в ваш JavaScript-код. Его трудно поддерживать, он не дает четкого понимания ни тому, ни другому ... Сначала это может показаться хорошей идеей, но это не так. Вы всегда должны найти лучшую альтернативу:)

Например, у вас также есть data-* для передачи данных в тег HTML через PHP ( подробнее о data- * атрибутах ).

0 голосов
/ 06 июня 2019

вам нужно добавить событие в функцию и добавить warnDefault 

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