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

PHP

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

Оставить комментарий

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

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;
}
WEB

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

Оставить комментарий

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

html:

<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!"
    });
});
PHP, WEB

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

Оставить комментарий

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

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

 $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

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

Оставить комментарий

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

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