Архивы Jquery

Установка капчи reCAPTCHA v2 на сайт без отправки формы

10.02.2021 Павел Грибов PHP

Технически задача выглядит так: на клиенте пользователь нажимает галочку «Я не робот» (описание от Google), по нажатии какойто кнопки — проверяем деймтвитель но ли капча пройдена.

Html (клиент):

<script type="text/javascript">
              var onloadCallback = function() {
                grecaptcha.render('capcha_element', {
                  'sitekey' : 'ключ сайта',
                   hl : "ru"
                });
              };
</script>
<div class="border border-light p-5" id="RegistrationDiv">
    <p class="h4 mb-4 text-center">Регистрация</p>        
    <input type="email" name="RegisterFormEmail" id="RegisterFormEmail" class="form-control mb-4" placeholder="E-mail">    
    <input type="password" name="RegisterFormPassword" id="RegisterFormPassword" class="form-control" placeholder="Пароль" aria-describedby="RegisterFormPasswordHelpBlock">
    <small id="RegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">Минимальная длина 8 симоволов</small>

    <div id="capcha_element"></div>    

    <button id="RegistrationStartButton" onclick="RegistrationStart()" class="btn btn-success my-4 btn-block">Зарегистрироваться</button>
</div>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script>
function GetCapchaData(){
if (typeof grecaptcha.getResponse=="function") {
return grecaptcha.getResponse(); 
} else {
return ""; 
};
}
function RegistrationStart(){ 
$.post("registration.php", {
capcha: GetCapchaData()
})
.done(function( data ) {
});
}
</script>

var onloadCallback = function() {

grecaptcha.render('capcha_element', {

'sitekey' : 'ключ сайта',

hl : "ru"

});

};

</script>

<p class="h4 mb-4 text-center">Регистрация</p>

<small id="RegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">Минимальная длина 8 симоволов</small>

<button id="RegistrationStartButton" onclick="RegistrationStart()" class="btn btn-success my-4 btn-block">Зарегистрироваться</button>

</div>

function GetCapchaData(){

if (typeof grecaptcha.getResponse=="function") {

return grecaptcha.getResponse();

} else {

return "";

};

}

function RegistrationStart(){

$.post("registration.php", {

capcha: GetCapchaData()

})

.done(function( data ) {

});

}

</script>

PHP (сервер)

<?php
        $res=GetResponseCapcha($capcha);
        if (isset($res->success)):
           if ($res->success==true):
                  // капча пройдена, чтото делаем дальше
               else:
		 // это робот - пишем ошибку
           endif;
        endif;

function GetResponseCapcha($capcha){
    $ch = curl_init("https://www.google.com/recaptcha/api/siteverify");                
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        $js["secret"]="секретный ключ сайта";
        $js["response"]=$capcha;
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $js);
        $res= json_decode(curl_exec($ch));    
   return $res;
}

<?php

$res=GetResponseCapcha($capcha);

if (isset($res->success)):

if ($res->success==true):

// капча пройдена, чтото делаем дальше

else:

// это робот - пишем ошибку

endif;

function GetResponseCapcha($capcha){

$ch = curl_init("https://www.google.com/recaptcha/api/siteverify");

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$js["secret"]="секретный ключ сайта";

$js["response"]=$capcha;

curl_setopt($ch, CURLOPT_POST, 1);

curl_setopt($ch, CURLOPT_POSTFIELDS, $js);

$res= json_decode(curl_exec($ch));

return $res;

}

Оставить комментарий google+, Jquery, php, reCAPTCHA

Пишем свой плагин для Jquery

24.04.2019 Павел Грибов WEB

На примере самого примитивного действа — вывести при помощи плагина текст в определенное место.

html:

<div id="capcha" name="capcha"></div>

1	<div id="capcha" name="capcha"></div>

javascript:

jQuery.fn.Capcha = function(options) {      
            // воспользуемся расширением extend чтобы иметь "настройки по умолчанию"
            var settings = $.extend( {
                  'caption'         : 'Заголовок по умолчанию'                  
                }, options);    
            console.log(settings);              
            // не посредственно работа плагина
            this.html(settings.caption);         
            return this;
   
};

$(function() {      
    $("#capcha").Capcha({
       caption: "Hello World!"
    });
});

jQuery.fn.Capcha = function(options) {

// воспользуемся расширением extend чтобы иметь "настройки по умолчанию"

var settings = $.extend( {

'caption' : 'Заголовок по умолчанию'

}, options);

console.log(settings);

// не посредственно работа плагина

this.html(settings.caption);

return this;

};

$(function() {

$("#capcha").Capcha({

caption: "Hello World!"

});

Оставить комментарий Jquery, plugin, плагин

Простая загрузка файла на сервер используя JQUERY

18.12.2018 Павел Грибов PHP, WEB

Задача: сохранить файл на сервер без обновления страницы. Т.е. при помощи ajax

Решение:

Клиентская часть:

<h1>Отправка сообщения в техподдержку</h1>
    <div id="snd">
        <form id="data" method="post" enctype="multipart/form-data">
            <textarea id="tehtxt" name="tehtxt" class="form-control" rows="3" placeholder="Сообщение для техподдержки"></textarea>
            <br/>
            <input name="image" type="file" />
            <br/>
            <button class="btn btn-success" id="buttonsendteh">Отправить сообщение</button>
        </form>
    </div>
    <br/>
    <script>
        $("form#data").submit(function(e) {
                e.preventDefault();    
                var formData = new FormData(this);
                $("#buttonsendteh").hide();
                $.ajax({
                    url: "index.php?route=/controller/server/sendtoteh.php",
                    type: 'POST',                  
                    data: formData,
                    success: function (data) {
			$("#snd").html(data);    
			ListSbssMessages();
			$("#buttonsendteh").show();
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
        });
    </script>

<h1>Отправка сообщения в техподдержку</h1>

<br/>

<br/>

<button class="btn btn-success" id="buttonsendteh">Отправить сообщение</button>

</form>

</div>

<br/>

$("form#data").submit(function(e) {

e.preventDefault();

var formData = new FormData(this);

$("#buttonsendteh").hide();

$.ajax({

url: "index.php?route=/controller/server/sendtoteh.php",

type: 'POST',

data: formData,

success: function (data) {

$("#snd").html(data);

ListSbssMessages();

$("#buttonsendteh").show();

cache: false,

contentType: false,

processData: false

});

</script>

Серверная часть:

 $tehtxt=mysqli_real_escape_string($sqlcn->idsqlconnection,$_POST["tehtxt"]);
 $prc="";  
  if (isset($_FILES['image'])==true){
    $orig_file = $_FILES['image']['name']; 
    $userfile_name = GetRandomId(8) . '.' . pathinfo($orig_file, PATHINFO_EXTENSION);
    $src = $_FILES['image']['tmp_name'];    
    $res = move_uploaded_file($src, WUO_ROOT."/files/".$userfile_name);     
    $prc="Прикрепленный файл: $userfile_name";
  };

$tehtxt=mysqli_real_escape_string($sqlcn->idsqlconnection,$_POST["tehtxt"]);

$prc="";

if (isset($_FILES['image'])==true){

$orig_file = $_FILES['image']['name'];

$userfile_name = GetRandomId(8) . '.' . pathinfo($orig_file, PATHINFO_EXTENSION);

$src = $_FILES['image']['tmp_name'];

$res = move_uploaded_file($src, WUO_ROOT."/files/".$userfile_name);

$prc="Прикрепленный файл: $userfile_name";

};

Оставить комментарий form, javascript, Jquery, загрузка файла

Как узнать версии скриптов используемых на сайте.

21.09.2018 Павел Грибов WEB

А именно Jquery, Bootstrap, JqGrid и т.п. Ну например так:

console.log(jQuery.fn.jquery);
console.log($.ui.version);
console.log($.jgrid.version);
console.log(jQuery.mmenu.version);
console.log($.fn.tooltip.Constructor.VERSION);

Update для поисковика: как узнать версию Jquery

Оставить комментарий bootstrap, jqgrid, jQuerUI, Jquery, mmenu, version, версия

JQuery tablesorter не правильно сортирует число

30.08.2018 Павел Грибов WEB

Казалось бы, что тут такого? В таблице строго число, разделенное точкой, а сортирует.. Какие-то колонки нормально, какие-то не пойми как. Проблема решается только если четко сказать плагину, какие колонки числа. Например так:

$("#sortable_table").tablesorter({
     headers: {
         1: { sorter: 'digit' }, 
         2: { sorter: 'digit' }, 
         3: { sorter: 'digit' }, 
         4: { sorter: 'digit' }, 
         5: { sorter: 'digit' },
         6: { sorter: 'digit' },
         7: { sorter: 'digit' },
         8: { sorter: 'digit' },
         9: { sorter: 'digit' },
         10: { sorter: 'digit' },
         11: { sorter: 'digit' } 
     }
 });

$("#sortable_table").tablesorter({

headers: {

1: { sorter: 'digit' },

2: { sorter: 'digit' },

3: { sorter: 'digit' },

4: { sorter: 'digit' },

5: { sorter: 'digit' },

6: { sorter: 'digit' },

7: { sorter: 'digit' },

8: { sorter: 'digit' },

9: { sorter: 'digit' },

10: { sorter: 'digit' },

11: { sorter: 'digit' }

}

});

Оставить комментарий Jquery, tablesorter, сортировка чисел, таблица

1 2 3 … 6 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31