Question

使用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：

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

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

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，可以使用更好的selectors来改善您的jQuery代码

例如，您可以在id

中添加<div class="from-endpoint">

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

$('button.get-endpoint')

Answer 6

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

您可以使您的代码lint兼容。

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

使用成功代替完成＆amp;将回调移动到它自己的功能

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

使用$.getJSON代替$.get或$.ajax

$(document).ready(function()
{
    $( '.get-endpoint' ).click( function() {
        var sSelected = $( this ).text();
        console.log( sSelected );
        $.getJSON(
            '/play/endpoint2.php',
            { type: sSelected },
            insertData
        );
    });
});

function insertData( data ) {
    $( '.from-endpoint' ).text( data.text );
}

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

6 个答案: