html5 Ошибка подписи на холсте с xmlhttpRequest

Question

Я следую за этим сообщением: Can't get html5 Canvas signature pad to submit to database, и это отличный скрипт подписи, но у меня уже есть ошибка, когда я попытался сохранить его в БД ... консоль даст мне эту ошибку:

Error: Failed to construct 'XMLHttpRequest': Please use the 'new' operator, this DOM object constructor cannot be called as a function. 

Можете ли вы помочь мне с этой частью JavaScript, чтобы исправить это:

$("#saveSig").click(function saveSig() { 
    //encode URI 
    var sigData = encodeURIComponent(canvas.toDataURL("image/png")); 
    $("#imgData").html('Thank you! Your signature was saved'); 
    var ajax = XMLHttpRequest(); 
    ajax.open("POST", 'sign/signature.php'); 
    ajax.setRequestHeader('Content-Type', 'application/upload'); 
    ajax.send(sigData); 
    $('#debug').html(sigData); 
}); 

Answer 1

я уже нашел ответ!

это скрытый вход в холст:

<input type="hidden" value="<?php echo $user_id; ?>" name="user_id" id="user_id" /> 

вот код, который будет работать этот скрипт:

$("#saveSig").click(function saveSig() { 
    //encode URI 
    var sigData = canvas.toDataURL("image/png"); 
    var user_id = $("#user_id").val(); //here the id is showed, like 1, 2, etc 
    $("#firm").html("Thank you! Your signature was saved with the id: "+user_id); 
    $("#debug").html(sigData); 
    var ajax = new XMLHttpRequest(); 
    ajax.open("POST", "sign/signature.php",false); 
ajax.onreadystatechange = function() { 
    console.log(ajax.responseText); 
} 
ajax.setRequestHeader("Content-Type", "application/upload"); 
ajax.send("imgData="+sigData); 
    // ajax.send("user_id"+user_id); //here give me this error: InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED. 
}); 

DB соединение:

<?php 
    if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) 
    { 
    $session_id = $_SERVER['REMOTE_ADDR']; 
    // Get the data 
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA']; 

//$user_id = (isset($_POST['user_id'])) ? $_POST['user_id'] : ""; //not works 
//$user_id = $_POST['userId']; //not works 

$user_id = '1'; // when I put a number the id is saved 

// process your sigData here (e.g. save it in the database together with the user_id) 

    // Remove the headers (data:,) part. 
    // A real application should use them according to needs such as to check image type 
    $filteredData=substr($imageData, strpos($imageData, ",")+1); 

    // Need to decode before saving since the data we received is already base64 encoded 
    $unencodedData=base64_decode($filteredData); 

    //echo "unencodedData".$unencodedData; 
    $imageName = "sign_" . rand(5,1000) . rand(1, 10) . rand(10000, 150000) . rand(1500, 100000000) . ".png"; 
    //Set the absolute path to your folder (i.e. /usr/home/your-domain/your-folder/ 
    $filepath = "../signature/" . $imageName; 

    $fp = fopen("$filepath", 'wb'); 
    fwrite($fp, $unencodedData); 
    fclose($fp); 

    //Connect to a mySQL database and store the user's information so you can link to it later 

include_once("CONN/configs.php"); 
     try{ 
    $statement = $conn->prepare("INSERT INTO SIGNATURE (`session`, `user_id`, `signature`) VALUES (?, ?, ?)"); 
    if ($statement->execute(array($session_id, $user_id, $imageName))); 

     echo '<div class="alert alert-success"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button> 
     Firma con id: '.$user_id.' guardada correctamente.</div>'; 
    } 
    catch (Exception $e) 
    { 
     echo '<div class="alert alert-danger"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button> 
     Error al tratar de guardar la firma.</div>'; 
     die; 
    } 
} 
?> 

Я надеюсь, что кто-то это понадобится.

С уважением!

Answer 2

В сообщении об ошибке говорится, что вы должны делать: вы должны использовать оператор «new» для создания «XMLHttpRequest».

Где вы создаете свой АЯКС объект, изменить var ajax = XMLHttpRequest(); к var ajax = new XMLHttpRequest();

Поскольку вы используете JQuery в любом случае, вы можете использовать jquerys ajax method сделать запрос Ajax вместо того, чтобы иметь дело с browser specifics of XMLHttpRequest.

$("#saveSig").click(function saveSig() { 
    //encode URI 
    var sigData = encodeURIComponent(canvas.toDataURL("image/png")); 
    $.ajax({ 
    type: "POST", 
    url: 'sign/signature.php', 
    contentType: 'application/upload', 
    data: sigData, 
    success: function() { 
     $("#imgData").html('Thank you! Your signature was saved');  
    } 
    }); 
    $('#debug').html(sigData); 
}); 

Update В ответ на вас комментарии:

Вы должны понимать, что это Javascript и ... click(function saveSig() {...} выполняется в браузере. Поэтому вы не должны ставить php там, потому что php должен быть выполнен веб-сервером. Когда вы нажимаете на элемент «#saveSig», браузер выполняет эту функцию, и с вызовом $.ajax(...) он отправляет новый HTTP-запрос POST на веб-сервер в фоновом режиме, вызывая url 'sign/signature.php'. Данные ответа на этот запрос доступны для функции успеха. Ниже приведен пример того, как веб-сервер (php) и браузер (javascript) могут работать вместе.

знак/signature.php

<?php 
// read the request data: 
$sigData = (isset($_POST['data'])) ? $_POST['data'] : ""; 
$user_id = (isset($_POST['UserId'])) ? $_POST['userId'] : ""; 

// process your sigData here (e.g. save it in the database together with the user_id) 

//generate the response: 
echo "Successfully saved signature for user id: ".$user_id."."; 
?> 

JavaScript:

$("#saveSig").click(function saveSig() { 
    //encode URI 
    var sigData = encodeURIComponent(canvas.toDataURL("image/png")); 
    $.ajax({ 
    type: "POST", 
    url: 'sign/signature.php', 
    contentType: 'application/upload', 
    data: { 
     data: sigData, 
     user_id: $('#user_id').val() // this get's the value from the hidden user_id input 
    }, 
    success: function (responseData) { 
     $("#imgData").html('Thank you!' + responseData); 
    } 
    }); 
    $('#debug').html(sigData); 
}); 

Может AJAX Introduction по W3Schools Вам интересно