Архив метки: Jquery

PHP

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

10.02.2021 Павел Грибов Оставить комментарий

Технически задача выглядит так: на клиенте пользователь нажимает галочку «Я не робот» (описание от 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;

}

WEB

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

24.04.2019 Павел Грибов Оставить комментарий

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

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

});

PHP, WEB

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

18.12.2018 Павел Грибов Оставить комментарий

Задача: сохранить файл на сервер без обновления страницы. Т.е. при помощи 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";

};

WEB

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

21.09.2018 Павел Грибов Оставить комментарий

А именно 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);

console.log(jQuery.fn.jquery);

console.log($.ui.version);

console.log($.jgrid.version);

console.log(jQuery.mmenu.version);

console.log($.fn.tooltip.Constructor.VERSION);

WEB

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

30.08.2018 Павел Грибов Оставить комментарий

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

$("#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' }

}

});

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				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

ЖЗГ

Архив метки: Jquery

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

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

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

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

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

Жизнь замечательных грибов