使用jQuery调用PHP端点的最有效方法

使用jQuery调用端点并在前端填充数据是一项常见任务。 在搜索并使用多个解决方案后，以下是我目前任何ajax调用的蓝图。

如何才能提高速度和效率？ 我意识到在纯javascript中做它会更快，但在这一点上我假设jQuery将存在。

前端 – 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 ); }); }); }); 

前端 – Html：

  Games Books Comics 
Coming soon...
  

后端 – 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; 

Answer 1

我不认为这个代码在jQuery中更有效。 但是你有一些选择可以提供更有效的感觉：

• 您可以使用分页来每次获取部分数据。 该
  加载的数据越少，获得的速度越快。 你的申请将是
  更能响应用户的行为。 这个解决方案对于用户来说是一个技巧，因为它实际上需要比以前更多的时间来加载所有数据。
• 您可以保留以前加载的数据，这样当您单击按钮时，它将不会再次加载数据。 但是，只有在每次点击之间数据不会发生太大变化时，才能使用此function。 第一次点击按钮时，它将需要与之前相同的时间，但下一次，它将立即进行。

请注意，加载的HTML代码越多，启动JavaScript行为所需的时间就越多。

Answer 2

看起来您的类别不会经常更改。 您可以使用JavaScript localstorage或cookie来缓存数据，从而节省一些带宽。 如果您计划在某个点连接到mysql数据库，则可以使用StoredProcedures，它是可变的预编译语句。

Answer 3

既然你无论如何都要使用JSON和jQuery，我建议你查看jQuery的getJSON方法。 我觉得它会减少一些代码行，但我不确定它是否会帮助它变得更有效率。 无论如何getJSON只是AJAX的简写，我想我应该建议这个。

Answer 4

对于AJAX数据传输浏览器 – >服务器 – >浏览器，这可能是一个很好的方法。 希望它满足您的需求。

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

Answer 5

如果您不想使用纯javascript，可以使用更好的选择器来改进您的jQuery代码

例如，您可以在

添加id

您可以在选择器中添加标签，如下所示：

 $('button.get-endpoint') 

Answer 6

1. 您可以删除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 ); }); }); });