Ajax jquery mysqli update

Question

Я пытаюсь сделать демо-версию Ajax, чтобы научить себя концепции, но я просто не могу заставить ее работать.

Образец, который я пытаюсь получить, состоит в том, чтобы взять переменную на первой странице (в этом случае зеленый цвет), и если щелкнуть зеленую кнопку, используйте ее на странице обработки ajax, чтобы каким-либо образом записать зеленую кнопку (в настоящее время в журнале ошибок, затем я перейду на ее хранение в базе данных).

В идеале я хотел бы иметь возможность повторно использовать один и тот же фрагмент, чтобы изменить переменную на красный, и сообщить отчет об ошибке, что красная кнопка была нажата.

Я использовал location.reload и случайное число, чтобы доказать себе, что выполняется javascript, и что страница отличается от каждой загрузки.

Я вообще не парень из javascript, вы можете сказать. Нужно ли сначала объявлять переменную или что-то еще?

uglytest.php

<script src="https://code.jquery.com/jquery-2.2.3.js"></script> 
<!-- jQuery Ajax --> 
<script type="text/javascript"> 
function clickyes(a) { 
$.ajax({ 
     type: "POST", 
     url: "./ajax.php", 
     data: {"test":a}, 
     success: function (response) { 
     default = $("#default").val(); 
     }); 
    location.reload(); 
} 
</script> 

<script type="text/javascript"> 
function clickno() { 
    location.reload(); 
} 
</script> 


<? 
echo mt_rand(0,99); 
$result = "green"; 

echo "<p><form>here's a $result button. Do you want click on it?</p>"; 
echo "<button onclick=\"clickyes(" . $result . ")\" style=\"background-color: $result; \">Yes</button>"; 
echo "<button onclick=\"clickno()\">No</button></form>"; 

?> 

ajax.php

<? 
    $test = $_POST['test']; 
    error_log($test, 0); 
?> 

Answer 1

изменения здесь:

function clickyes(a) { 
$.ajax({ 
     type: "POST", 
     url: "./ajax.php", 
     data: {test:a}, 
     success: function() { 
      location.reload(); 
     } 
     }); 
} 

и здесь:

echo "<p><form>here's a $result button. Do you want click on it?</p>"; 
echo "<button onclick=\"clickyes('$result')\" style=\"background-color: $result; \">Yes</button>"; 
echo "<button onclick=\"clickno('$result')\">No</button></form>"; 

сделал его работу. Ура!

Answer 2

Здесь location.reload будет называться, не дожидаясь запроса AJAX, поскольку Ajax является функцией асинхронной. Это может быть проблемой. Продолжайте перезагружать успех ajax-ответа.

function clickyes(a) { 
$.ajax({ 
     type: "POST", 
     url: "./ajax.php", 
     data: {"test":a}, 
     success: function (response) { 
     default = $("#default").val(); 
     location.reload(); 
     }); 

} 


Also Change this: 
echo "<button onclick=\"clickyes('" . $result . "')\" style=\"background-color: $result; \">Yes</button>"; 

Answer 3

<script src="https://code.jquery.com/jquery-2.2.3.js"></script> 
<form><p id="color-info">here's a button. Do you want click on it?</p> 
    <button color="" id='yesbutton'>Yes</button> 
    <button >No</button></form> 

<script type="text/javascript"> 
setColor(); 
// this code will be invoked when #yesbutton is clicked and this is called dedication method 
$(document).on('click','#yesbutton',function(e){ 
    e.preventDefault(); 
    $.ajax 
    ({ 
    type: "POST", 
    url: "./ajax.php", 
    data: {"test":$('#yesbutton').attr('color')}, 
    success: function (response) { 
     //default = $("#default").val(); 
     //change color after success 
     setColor(); 

    } 


    }); 

}); 

// function first determine rgb color to create composite color 
function setColor() 
{ 
    //redcolor code 
    $redcolor=Math.random()*255; 
    // green color code 
    $greencolor=Math.random()*255; 

    //blue color code 
    $bluecolor=Math.random()*255; 
    //this will set the background color for first time 
    $rgb=parseInt($redcolor)+','+parseInt($greencolor)+','+parseInt($bluecolor); 
    $('#color-info').text("here's a rgb("+$rgb+") button. Do you want click on it?"); 
    $('#yesbutton').css("background",'rgb('+$rgb+')'); 
    //this will set the color attribute for first time 
    $('#yesbutton').attr('color',$rgb); 


} 

</script>