Ajax .load отправляет мне ссылку вместо загрузки html в div - PullRequest
0 голосов
/ 09 мая 2020

Итак, я недавно начал новый проект laravel и нахожусь на странице профиля пользователя, эта страница будет иметь боковую панель (со ссылками, такими как Портфолио, Настройки учетной записи и т. Д. c ..).
то, что я пытаюсь сделать, - это загрузить каждую страницу в div при нажатии ссылки на боковой панели, и вместо загрузки страниц она просто действует как обычная ссылка <a>, она перенаправляет меня на ссылку, указанную в href. (Я уже предотвратил дефолт)
Вот код:

@extends('layouts.app')

@section('content')

<!-- The sidebar -->
<div id="sideCont" class="sidebar">
    <a class="active" href="#home">Profile</a>
    <a href="{{ asset('page1.html') }}">News</a>
    <a href="#contact">Portfolio</a>
    <a href="#about">About</a>
  </div>

  <!-- Page content -->
  <div id="contentCont" class="content1">

    @if (\Session::has('success'))
        <div class="alert success">
          <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>  
          <p>{{\Session::get('success')}}</p>
        </div>
        @elseif (count($errors) > 0)
        <div class="alert">
          <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>  
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{$error}}</li>
            @endforeach
          </ul>
        </div>   
        @endif

        <h3>Contributor details</h3>
            <table class="table table-borderless">
              <tbody>
                  <tr>
                    <th>ID</th>
                      <td>{{$contributor->id}}</td>
                      <td></td>
                  </tr>
                  <tr>
                    <th>Display Name</th>
                      <td>{{$contributor->display_name}}</td>
                      <td><span id='clickableAwesomeFont'><i class="fas fa-user-edit" onclick="openForm_DisplayName()"></i></span></td>
                  </tr>

                  <tr>
                    <th>Email</th>  
                      <td>{{Auth::user()->email}}</td>
                      <td><span id='clickableAwesomeFont'><i class="fas fa-user-edit" onclick="openForm_Email()"></i></span></td>
                  </tr>
              </tbody>
          </table>
  </div>


@endsection

, а вот js:

<script>
  $(function () {
        $('#sideCont a').on('click', function (e) {
            e.preventDefault();
            var page = $(this).attr('href');
            $('#contentCont').load(page);
        });
    });
</script>

Скрипт, который я включил:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> --Ajax purpose--

Я много чего пробовал, но я все еще застрял, поэтому, если бы вы могли мне помочь, было бы здорово, спасибо.

Ответы [ 3 ]

1 голос
/ 09 мая 2020

Я полагаю, это потому, что ваши href не настоящие ссылки - это всего лишь хэши местоположения, которые не передаются на целевой сервер. Если бы ваша навигация была такой:

<div>
  <a id='home' href="#home">Profile</a>
  <a id='about' href="/about">About</a>
</div>

На основе кода обработчика кликов, если вы нажмете «Домой», вы в конечном итоге фактически вызовете

$('#contentCont').load('');

. be

$('#contentCont').load('/about');

Итак, замена хэшей на косые черты в качестве базового уровня должна приблизить вас к тому месту, где вы хотите быть.

0 голосов
/ 10 мая 2020

Хорошо, проблема заключалась в том, что мой js был загружен до jquery. теперь работает! спасибо вам всем

0 голосов
/ 09 мая 2020

Похоже, ваш javascript перезагружает страницу.

Вы включили ajax js, но я не вижу звонков Ajax. Самый простой способ - заставить PHP прослушивать AJAX запросы и ТОЛЬКО выдавать JSON перед выходом. поэтому перед включением заголовков, возможно, после некоторых основных файлов, которые перенаправляют только в том случае, если не вошли в систему, но убедитесь, что они ничего не выводят на обслуживаемое устройство, или запрос ajax завершится неудачно с указанием недопустимого json полученного..страница. php:

page.php:
$passwordhash= '$2y$10$dklsjfkljklsdjlkfjdksljflkjdslf.kjdhfjkdshkjfhkjdshfkjshfkjhkjdskdfhkjdshkjf';
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['AJAX']) && password_verify($_POST['SECRET'], $hash)) {
    $results = someSQLquery();
    echo json_encode(results);
    exit;
}
include('header.php';
<button onclick="morePlease();">More</button>
<script>
function morePlease(){
    var dataToSubmit = $('#myform').serializeArray();
//a secret/key might be enough, but setting ajax reminds me not to have DOM elements up there.

    dataToSubmit.push({name: "secret", value: $("input[name=secret]").val()});
    dataToSubmit.push({name: "AJAX", value: true});
    $.ajax({
        type: 'POST',
        data: dataToSubmit
        //url: anotherMachine.php 
    })
    .done(function(response){

        console.log('Submitted form successfully. Response:');
        console.log(response == null ? "Null response." : response);
        JSON.parse(response);
    })
    .fail(function() {
        console.log('Failed submitting form.');
    });
}
</script>

Вы также можете просто обойти весь процесс и предоставить данные до того, как переменная увидит EOL, никаких квестов, кроме того, который вы обслуживаете.:

javascript на обслуживаемой странице PHP:

<script>
var wtf = JSON.parse( <?= $thinAir ?>; );
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...