Самый эффективный способ вызова конечной точки PHP с помощью jQuery

Использование jQuery для вызова конечной точки и заполнения данных в интерфейсе является общей задачей. После поиска и использования нескольких решений ниже приведена моя текущая схема для любых вызовов ajax.

Как я могу улучшить следующее, чтобы быть быстрее и эффективнее? Я понимаю, что делать это в чистом javascript будет быстрее, но на этом этапе я предполагаю, что jQuery будет присутствовать.

Frontend – Javascript:

$(document).ready(function() { function callEndpoint( call_url, payload ){ return $.ajax({ url: call_url, type: 'GET', data: payload }); } $( '.get-endpoint' ).click( function() { sSelected = $( this ).text(); console.log( sSelected ); oRequest = callEndpoint( '/play/endpoint2.php', { 'type': sSelected } ); oRequest.done(function( sJson ) { aData = JSON.parse( sJson ); $( '.from-endpoint' ).text( aData.text ); }); }); });

Frontend – Html:

 <body> <button class="get-endpoint">Games</button> <button class="get-endpoint">Books</button> <button class="get-endpoint">Comics</button> <div class="from-endpoint">Coming soon...</div> </body>

Backend – PHP:

 $aReturn[ 'text' ] = ''; if( !empty( $_GET ) ) { if( $_GET[ 'type' ] == 'Games' ) { $aReturn[ 'text' ] = 'Text for games'; } else if( $_GET[ 'type' ] == 'Books' ) { $aReturn[ 'text' ] = 'Text for books'; } else if( $_GET[ 'type' ] == 'Comics' ) { $aReturn[ 'text' ] = 'Text for comics'; } } $sJson = json_encode( $aReturn, 1 ); header( 'Content-Type: application/json' ); echo $sJson;

Solutions Collecting From Web of "Самый эффективный способ вызова конечной точки PHP с помощью jQuery"

Я не думаю, что этот код может быть более эффективным в jQuery. Но у вас есть несколько вариантов, чтобы дать более эффективное чувство:

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

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

Похоже, ваши категории не будут меняться часто. Вы можете сэкономить некоторую пропускную способность, используя JavaScript localstorage или файлы cookie для кэширования данных. Если вы планируете подключиться к базе данных mysql в какой-то точке, вы можете использовать StoredProcedures, которые являются переменными прекомпилированными операторами.

Поскольку вы все равно собираетесь использовать JSON и jQuery, я бы посоветовал вам проверить метод getJSON для jQuery. Я чувствую, что это уменьшит некоторые строки кода, хотя я не уверен, что это поможет ему стать более эффективным. В любом случае getJSON – это просто сокращение AJAX, и я подумал, что должен предложить это.

Это может быть хорошим подходом для браузера браузера данных AJAX-> server->. Надеюсь, он удовлетворит ваши потребности.

JQuery

 $( function () { function fetch( data ) { var encoding = data.encoding, url = data.url, params = data.params, type = ( data.type ) ? : 'GET', cache = ( data.cache ) ? : 'false', async = ( data.async ) ? : 'true'; return $.ajax({ url: url, async: async, cache: cache, data: params, dataType: encoding, type: type }); } var options = { url: 'controller.php', params: { param_one: value_one, param_two: value_two, param_n: value_n }, encoding: 'json' }; // Get the JSON feed from the server $.when( fetch( options ) ).then( function ( response ) { // Is there anything in the pool? if ( response ) { // Store the response and use it in your code var data = response.data; console.log( data.responseOne ); console.log( data.responseTwo ); } }); });

Контроллер PHP

 // Set header to application/json header( 'Content-type: application/json' ); // Create the DB connection object $dbc = new mysqli( DB_HOST, DB_USER, DB_PASS, DB_NAME ); // Initialize parameters array $params = array(); // Store the query variables in an array $query_type = ( $_GET ) ? : $_POST; // Run foreach and store the values in an array foreach ( $query_type as $key => $value ) { $params[ $key ] = mysqli_real_escape_string( $dbc, $value ); } // Now you can access passed parameters like $params['param_name'] // This would be the data obtained from DB or some server array processing, whatever $response = array( 'data' => array( 'response_one' => 'some_value', 'response_two' => 'another_value' ) ); // Encode the result echo json_encode( $response );

Если вы не хотите использовать чистый javascript, вы можете улучшить свой код jQuery с лучшими селекторами

Например, вы можете добавить id в <div class="from-endpoint">

Вы можете добавить тег в селектор:

 $('button.get-endpoint')

Вы можете отказаться от метода getEndpoint и просто использовать метод $.get .

 $(document).ready(function() { $( '.get-endpoint' ).click( function() { sSelected = $( this ).text(); console.log( sSelected ); oRequest = $.get('/play/endpoint2.php', { 'type': sSelected }); oRequest.done(function( sJson ) { aData = JSON.parse( sJson ); $( '.from-endpoint' ).text( aData.text ); }); }); });