Имеем такой код: HTML: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#stop").hide(); $("#test").submit(function(e) { $("#go").hide(); $("#stop").show(); /*$('#submit2').click( function() { //$("#submit2").hide(); $(this).hide(); //$('#submit').show(); }); */ e.preventDefault(); // замена отправки по умолчанию. var form = $(this); var url = "server.php"; $.ajax({ type: "GET", url: url, data: form.serialize(), // serializes the form's elements. success: function(data) { alert('Успех!'); // show response from the php script. } }); }); }); </script> </head> <body> <form id="test" action=""> <button type="submit" id="go">Запись</button> <button type="submit" id="stop">Покинуть</button> </form> </body> </html> Код (Javascript): $(document).ready(function(){ $("#stop").hide(); $("#test").submit(function(e) { $("#go").hide(); $("#stop").show(); /*$('#submit2').click( function() { //$("#submit2").hide(); $(this).hide(); //$('#submit').show(); }); */ e.preventDefault(); // замена отправки по умолчанию. var form = $(this); var url = "server.php"; $.ajax({ type: "GET", url: url, data: form.serialize(), // serializes the form's elements. success: function(data) { alert('Успех!'); // show response from the php script. } }); }); }); Помогите решить 2 задачи: 1. После нажатия на кнопку "го", она должна исчезнуть ,а кнопка "стоп" появится - это мне сделать удалось. А вот как сделать аналогичный еффект, в противоположной ситуации. Т.е по нажатию кнопки "стоп" она должна пропасть, и появится "го". 2. По нажатию кнопки "го" в базу данных, в нужный столбец должно записаться любое слово в формате json. А по нажатию кнопки "стоп" это же слово должно удалится от туда. И очень желательно методом пост. По 1 задаче я в тупике. По 2 задаче не понятно, как мне в файле server.php поставить условие, и проверить была ли нажата одна из кнопок. Условие if ( isset() ) браузер игнорирует. И такой вопрос, соединятся с базой и записывать туда что либо, нужно в файле server.php или в ajax ? У меня все остальные соединения иду как раз в этом пшп файле, потому хотелось бы соединяться с бд в server.php.
а методом гет нельзя?)) HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Go go button!</title> </head> <body> <button id="go">Запись</button> <button id="stop" style="display: none">Покинуть</button> <script> (function() { var go = document.getElementById('go'), stop = document.getElementById('stop'); go.onclick = function(){ stop.style.display = 'inline'; this.style.display = 'none'; } stop.onclick = function(){ go.style.display = 'inline'; this.style.display = 'none'; } })() </script> </body> </html>
Можно и ГЕТ, но работа с базой же будет, ушлые ребзя могут просечь это дело и добавлять в базу что-либо, через адресную строку. Пасибо за 1 задачку.
с post можно сделать абсолютна тоже самое вот тебе функция для гет запроса: Код (Javascript): function getAjax(url, success) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState>3 && xhr.status==200) {success(xhr.responseText);} if (xhr.status==500) { console.log(xhr.responseText); } }; xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send(); return xhr; } использовать так: Код (Javascript): var test = 'приветик'; getAjax("test.php?test="+test, function(data){ console.log(data); });
Погоди, у меня с 1 задачей не все хорошо. При нажатии на кнопку ничего не происходит, мне общую функцию следовало вставить внутрь $(document).ready(function(){ ? Или другая библиотека требуется ?
https://ru.wikipedia.org/wiki/JQuery --- Добавлено --- Если до сих пор непонятно. Вот есть у тебя яблоко, назовем его javascript. И у тебя есть нож, назовем его jquery. Ты можешь съесть яблоко без ножа? А в данном твоем случае тебе нож не нужен.
Тогда, если я правильно понял, в целом это должно быть так: Код (Javascript): (function() { var go = document.getElementById('go'); var stop = document.getElementById('stop'); function getAjax(url, success) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState>3 && xhr.status==200) {success(xhr.responseText);} if (xhr.status==500) { console.log(xhr.responseText); } }; xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send(); return xhr; } go.onclick = function() { stop.style.display = 'inline'; this.style.display = 'none'; var test = 'Hello'; getAjax("test.php?test="+test, function(data){ console.log(data); }); } stop.onclick = function() { go.style.display = 'inline'; this.style.display = 'none'; var test = 'Bye'; getAjax("test.php?test="+test, function(data){ console.log(data); }); } })() А уже в пшп файле, проверять условием на наличие слов Bye и Hello, через if ( $_GET['Bye'] ) ?
В скрипте заменил test.php на server.php, и на этой странице условие $_GET['test'] почему-то не выполняется. п.с А в логе, выводит слово привет и пока по 2 раза почему-то.
у вас задача стоит оправлять что то на сервер, а потом удалять это же самое с сервера, вы научились?)
Только не на сервер, по нажатию на кнопки должна в базу записываться информация. Вот если условие $_GET[''] выполняется, тогда соединяемся с базой и записываем/удаляем. Сейчас в папке лежит 2 файла, index.php(тут html и JS код) и server.php. Вот в файле server.php у меня и не выполняется условие.
а у меня почему работает? HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Go go button!</title> </head> <body> <button id="go">Запись</button> <button id="stop" style="display: none">Покинуть</button> <script> (function() { var go = document.getElementById('go'), stop = document.getElementById('stop'); go.onclick = function(){ stop.style.display = 'inline'; this.style.display = 'none'; var test = 'приветик'; getAjax("server.php?test="+test, function(data){ console.log(data); }); } stop.onclick = function(){ go.style.display = 'inline'; this.style.display = 'none'; } function getAjax(url, success) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState>3 && xhr.status==200) {success(xhr.responseText);} if (xhr.status==500) { console.log(xhr.responseText); } }; xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send(); return xhr; } })() </script> </body> </html> PHP: <?php if(isset($_GET['test'])){ echo $_GET['test']; }else{ echo 'нет такого параметра'; } ?>
Так вот в том-то и дело, что какая бы не была нажата кнопка, всегда выводит "иначе", т.е это - нет такого параметра
Код тот же, я только название файла пшп сменил: Код (Javascript): (function() { var go = document.getElementById('go'); var stop = document.getElementById('stop'); function getAjax(url, success) { //var url = "server.php"; var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState>3 && xhr.status==200) {success(xhr.responseText);} if (xhr.status==500) { console.log(xhr.responseText); } }; xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send(); return xhr; } go.onclick = function() { stop.style.display = 'inline'; this.style.display = 'none'; alert("you are join!"); var test = 'Hello'; getAjax("server.php?test="+test, function(data){ console.log(data); }); } stop.onclick = function() { go.style.display = 'inline'; this.style.display = 'none'; alert("you are left!"); var test = 'Bye'; getAjax("server.php?test="+test, function(data){ console.log(data); }); } })()
Вот: PHP: //echo "<pre>"; print_r( $_REQUEST ); echo "</pre>"; /*if ( isset($_GET['test']) ) { echo $_GET['test']; $ag = $_GET['test']; echo $ag; echo $test; } */ if ( isset($_GET['test']) ) { echo $_GET['test']; } else { echo 'нет такого параметра'; }
Во всех случаях, всегда выводит : Array ( ) п.с А на странице ,где сама кнопка ,в логе(консоле) выводит вроде правильно: Array ( [test] => Hello )