2016-02-08 2 views
0

У меня есть веб-сайт с несколькими кнопками и camerastream, который показывает кофе-машину. с помощью php-функции я могу настроить включение/выключение устройства с помощью сообщений TCP/IP. Теперь я хотел бы отправлять команды вкл/выкл по кнопке без обновления веб-сайта. Прочитав некоторые подобные потоки, я узнал, что единственный способ - использовать AJAX.Выполнение PHP с помощью HTML-кнопки (jQuery)

После нажатия кнопки страница не обновляется, но кажется, что что-то сделано в фоновом режиме. Но моя строка «Test» не показывает шоу.

Кто-нибудь знает, что случилось с моим кодом? Спасибо заранее!

ajax.php

<?php 
if($_POST['action'] == 'call_this') { 
    echo 'TEST'; 
} 
?> 

buttonClick.js

function myAjax() { 
    $.ajax({ 
     type: "POST", 
     url: 'ajax.php', 
     data:{action:'call_this'}, 
     success:function(html) { 
     alert(html); 
     } 

    }); 
} 

index.php

<html> 
<head> 
    <script src="jquery-1.12.0.min.js"></script> 
    <script language="javascript" type="text/javascript" src="buttonClick.js"></script> 
</head> 
<body> 
.... 
.... 
<form> 
    <input type="submit" name="submit" value="SET ON" onClick="myAjax()"> 
</form> 
.... 
.... 
</body> 
</html> 
+0

'Echo' или' print' правильно, Комментарий выше неправильно, добавив мой ответ сейчас. –

ответ

2

Модифицированный Mouad Nejjari код, как показано ниже, и это работает

index.php

<html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> 
    </head> 
    <body> 
    <button id="btnTest">Click</button> 
    <script> 
    $(document).ready(function() { 
    $('#btnTest').click(function() { 
    $.ajax({ 
     type: "POST", 
     url: 'ajax.php', 
     data:{action:'call_this'}, 
     success:function(html) { 
     alert(html); 
     } 
    }); 
    })});  
    </script> 
    </body> 
    </html> 

ajax.php

<?php 
if($_POST['action'] == 'call_this') { 
    echo 'TEST'; 
} 
?> 
+0

после смены на сработало. Я не понимаю, потому что мой файл jquery находится в той же папке, что и все другие файлы. Большое спасибо – ryoga86

+0

Рад, что это помогло. Наличие последнего jquery может также решить вашу проблему (чтобы она была локальной). Кроме того, проверьте консоль, чтобы узнать, есть ли какая-либо ошибка (с вашим старым кодом), чтобы решить эту проблему. – Rajesh

0

Вы используете HTML е lement input с типом, установленным на submit, это означает, что при щелчке на странице предполагается, что вы хотите перенаправить на URL страницы обработки, обычно поставляемый в теге Form. Вы можете использовать javascript метод PreventDefault() или вы можете изменить элемент из формы submit на ссылку, подобную этой.

<html> 
<head> 
    <script src="jquery-1.12.0.min.js"></script> 
    <script language="javascript" type="text/javascript" src="buttonClick.js"></script> 
</head> 
<body> 
.... 
.... 
<a href="javascript: myAjax()">SET ON</a> 
.... 
.... 
</body> 
</html> 

Ссылка на javascript href не будет пытаться перенаправлять. Ваш пример оставил страницу перед ожиданием возврата php-скрипта.

+0

попытался использовать ваш пример, но не работает. сначала я предположил, что пробел в href был виноват, но это было не так. Угадайте, мне нужно взглянуть на функцию PreventDefault() – ryoga86

0

Попробуйте это, ajax.php:

<?php 
if($_POST['action'] == 'call_this') { 
    echo 'TEST'; 
} 
?> 

buttonClick.js:

$(document).ready(function() 
{ 
    $("#form1").submit(function (e) { 
      e.preventDefault(); 
      $.ajax({ 
      type: "POST", 
      url: 'ajax.php', 
      data:{action:'call_this'}, 
      success:function(html) { 
      alert(html); 
      } 
     }); 
    }) 
}) 

index.php:

<html> 
<head> 
    <script src="jquery-1.12.0.min.js"></script> 
    <script language="javascript" type="text/javascript" src="buttonClick.js"></script> 
</head> 
<body> 
.... 
.... 
<form id="form1"> 
    <input type="submit" name="submit" value="SET ON"> 
</form> 
.... 
.... 
</body> 
</html> 
Смежные вопросы