0

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

html

<div id="my">
    <a href="#" name="button1" class="button1 clet">кнопка</a>
    <a href="#" name="button2" class="button2 clet">кнопка</a>
    <a href="#" name="button3" class="button3 clet">кнопка</a>
    <a href="#" name="button4" class="button4 clet">кнопка</a>
</div>
<span id="results"></span>

JS

$(document).ready(function(){                       
  $('#my').on('click', '.clet', function() {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        data: { id : $(this).data('num')},
        url: 'index.php',
        success: function(jsondata){
            $('.button1').html(jsondata.name1);
            $('.button2').html(jsondata.name2);
            $('.button3').html(jsondata.name3);
            $('.button4').html(jsondata.name4);
            $('.button1').attr('data-num', jsondata.num1); 
            $('.button2').attr('data-num', jsondata.num2); 
            $('.button3').attr('data-num', jsondata.num3); 
            $('.button4').attr('data-num', jsondata.num4); 
            $('#results').html(jsondata.error);
        }
    });          
})
});

1 ответ 1

1

Можно занести ajax запрос отдельно в функцию вот так

function ajaxRequest() {
    $.ajax({
        dataType: 'json',
        data: { id : $(this).data('num')},
        url: 'index.php',
        success: function(jsondata){
            $('.button1').html(jsondata.name1);
            $('.button2').html(jsondata.name2);
            $('.button3').html(jsondata.name3);
            $('.button4').html(jsondata.name4);
            $('.button1').attr('data-num', jsondata.num1); 
            $('.button2').attr('data-num', jsondata.num2); 
            $('.button3').attr('data-num', jsondata.num3); 
            $('.button4').attr('data-num', jsondata.num4); 
            $('#results').html(jsondata.error);
        }
    });    
}

И вызвать там, где надо:

<script>
    $(document).ready(function(){                       
      $('#my').on('click', '.clet', function() {
          ajaxRequest();
      })
    });

    ajaxRequest();
</script>

Так как присутствует внутри $(this).data('num') то функцию надо сделать принимающей на вход 1 параметр, допустим num. При этом при загрузке странице определить какое-то дефолтное значение. в итоге общий javascript код будет таким:

var DEFAULT_NUM = 999;  

$(document).ready(function(){                       
  $('#my').on('click', '.clet', function() {
      ajaxRequest($(this).data('num'));
  })
});

ajaxRequest(DEFAULT_NUM);


function ajaxRequest(num) {
    $.ajax({
        dataType: 'json',
        data: { id : num},
        url: 'index.php',
        success: function(jsondata){
            $('.button1').html(jsondata.name1);
            $('.button2').html(jsondata.name2);
            $('.button3').html(jsondata.name3);
            $('.button4').html(jsondata.name4);
            $('.button1').attr('data-num', jsondata.num1); 
            $('.button2').attr('data-num', jsondata.num2); 
            $('.button3').attr('data-num', jsondata.num3); 
            $('.button4').attr('data-num', jsondata.num4); 
            $('#results').html(jsondata.error);
        }
    });    
}
7
  • только с $(this).data('num') надо что-то сделать
    – user176262
    4 дек 2015 в 21:07
  • есть предложения? 4 дек 2015 в 21:08
  • Сделать дефолтный data-num. например. DATA_NUM_DEFAULT = 1 и делать проверку, что-то типа data: { id : $(this).data('num') || DATA_NUM_DEFAULT } Соответственно если неопределен будет $(this).data('num') будет браться дефолтное значение 4 дек 2015 в 21:11
  • А можно вообще сделать так $(".clet").first().click(); при загрузке. Если это конечно не плохо)) А то фиг потом вспомнишь зачем это надо) 4 дек 2015 в 21:17
  • Все работает отлично, а вот с data('num'), вообще беда или отправляет постоянно 1, или ничего не отправляет 4 дек 2015 в 21:23

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.