Как использовать JavaScript для изменения значения контента?

0

В настоящее время я разрабатываю систему, в которой пользователь может просматривать только имя с символом начала.

Ниже приведен пример:

Изображение 174551

Когда я нажимаю на ссылку "A", в приведенной ниже таблице будет указано имя, начинающееся с "A", и не будет отображаться остальная часть записей.

Я пытаюсь использовать href для передачи операции на мой php, но это не является гибким для этого. Поэтому я ищу javascript, чтобы помочь мне пройти через это. Я хочу, чтобы страница не обновлялась и будет изменять контент при нажатии на ссылку A ~ Z.

Это мой HTML-код:

<li><a href="alumni-listing.php?op=a">A</a></li>
<li><a href="alumni-listing.php?op=b">B</a></li>
<li><a href="alumni-listing.php?op=c">C</a></li>
<li><a href="alumni-listing.php?op=d">D</a></li>
<li><a href="alumni-listing.php?op=e">E</a></li>
<li><a href="alumni-listing.php?op=f">F</a></li>

Это моя php-страница, которая выполняет данные из таблицы:

        $rsa = array();
        $sqladded = false;
        $appliedfilter = array();
        if($_REQUEST['op'] = ''){
        $record = 'A';
        }
        else{
        $record = $_REQUEST['op'];
        }
        $stmt = $getuser->getuser($record);     

        if ($rs = $db->Execute($stmt))
        {
            $arrResult = array();
            while($rsa = $rs->FetchRow())
            {               
                array_push($arrResult, array(
                    "name" => $rsa['name'],
                    "mobile_no" => $rsa['mobile_no'],
                    "email" => $rsa['email'],
                    "address" => $rsa['address'],
                    "current_professional" => $rsa['current_professional'],
                    "others" => $rsa['others']
                    ));
            }           
            $tpl->display("alumni-listing.html");
        }

И это мой оператор SQL:

function getuser($record)
    {
        global $db;
        $arrResult = array();

        $stmt = "SELECT * FROM "._CONST_TBL_ALUMNI." WHERE name LIKE ".$record."%";

        if($rs = $db->Execute($stmt))
        {
            $arrResult = $rs->GetArray();           
        }           
        return $arrResult;
    }

Надеюсь, кто-нибудь может мне помочь. Заранее спасибо.

  • 1
    Сделайте отдельные div для каждого из них, установите для всех div показ ни одного. После нажатия на конкретную ссылку установить отображение: заблокировать соответствующий div
  • 0
    @shadow: как я могу сделать, на котором можно вернуть значение, которое я хочу?
Теги:

3 ответа

0

В любом случае вы должны использовать вызовы на странице PHP.

Если нет, вы можете сделать первый вызов, загрузив все данные (AZ), а затем отобразите соединения одним щелчком. Но тогда ваш 1-й вызов будет большим, и потребуется больше времени для загрузки, если данные больше.

Вы можете использовать Ajax-вызовы.

Структурируйте свой HTML таким образом.

<li><a href="#" class='ajaxCaller>A</a></li>
<li><a href="#" class='ajaxCaller>B</a></li>
<li><a href="#" class='ajaxCaller>C</a></li>
<li><a href="#" class='ajaxCaller>D</a></li>
<li><a href="#" class='ajaxCaller>E</a></li>
<li><a href="#" class='ajaxCaller>F</a></li>

Вызов Ajax должен быть

  $('a.ajaxCaller').click(function(event){
     event.preventDefault();
     var x=$(this).text();
     $.ajax({
       url: "alumni-listing.php",
       data: {op:x}
       }).done(function() {
           // You can have your code to set the returned page, to the specific div.
      });
 });
  • 0
    Я не очень знаком с использованием AJAX. но у меня есть вопрос, чтобы спросить, что в строке "data: {op: x}". Это значение передается со страницы HTML? Еще немного, внутри "function () {}" код, который я могу написать внутри, является оператором sql или другим?
  • 0
    Этот код вызовет страницу PHP «alumni-list.php» и передаст параметр «op». «op» будет иметь значения «A», «B», которые вы нажимаете. Затем эта страница выполнит оператор sql и вернет вам HTML-эквивалент этой страницы. Это код на стороне клиента, здесь нельзя использовать SQL-операторы.
Показать ещё 2 комментария
0

Таким образом, я вижу это, ваша проблема сводится к динамическому запросу базы данных на Dom-событие (т.е. Через javascript), а не переходу на другую страницу. Что повезло, потому что AJAX был разработан в значительной степени для этого - меньшие "обновления".

Используйте JS для запуска запроса php и проанализируйте возврат

Проверьте сообщение jQuery. Я уверен, что это может быть выполнено без, поэтому, пожалуйста, отредактируйте вопрос, если jQuery - нет-нет. Если вы измените вашу php-страницу, чтобы просто отследить JSON результата и вызвать, если из JS, вы можете проанализировать JSON и отобразить его на странице html.

HTML

<li><a class="listing-filter" href="alumni-listing.php?op=a">A</a></li> <li><a class="listing-filter" href="alumni-listing.php?op=b">B</a></li> <li><a class="listing-filter" href="alumni-listing.php?op=c">C</a></li> <li><a class="listing-filter" href="alumni-listing.php?op=d">D</a></li> <li><a class="listing-filter" href="alumni-listing.php?op=e">E</a></li> <li><a class="listing-filter" href="alumni-listing.php?op=f">F</a></li>

Javascript

$('.listing-filter').click(function (e) {
  var $filter = $(e.currenttarget),
      filterValue = $filter.html();

  RefreshPageWithData(filterValue);
});

function RefreshPageWithData( filterBy ) {
 var data =  {
  op: filterBy,
 };
 $.post(pathname-on-server.php, data, function (response)  {
  //Parse the response
  var results = JSON.parse(response);

  //Construct the DOM
  var newHtml;

  //Append it to existing element
  $('#container').html(newHtml);
 });

Обратите внимание, что все, что вы эхо на php-странице, это ответ, полученный обратно на обратный вызов JS. Таким образом, простой идеей может быть echo json_encode($arrResult). Я предлагаю иметь один index.php, который обслуживает файл, как вы делаете выше, и другой, который выполняет аналогичные задачи, но перекликается с извлеченными данными. Это позволяет избежать двухсерверного запроса для главной страницы.

0

Я сделал много проектов, как тот, который вы просите. Изучение jQuery - это наилучшее решение для решения задачи. jQuery сделал процесс ajax очень простым, используя jQuery.post().

  • 0
    Я не ясно и не знаком с JQuery. Можете ли вы предоставить мне пример кода?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню