JavaScript — PHP получить значение кнопки отправки
Попытка заставить PHP вернуть значение кнопки. Не уверен, что пошло не так, но он возвращает эти ошибки:
«Примечание: неопределенный индекс: данные в /storage/ssd4/271/3416271/public_html/ajaxTest.php в строке 2
Примечание: неопределенный индекс: данные в /storage/ssd4/271/3416271/public_html/ajaxTest.php в строке 5 «
Когда я print_r ($ get), он возвращает пустой массив. HTML-код выглядит хорошо, так что я думаю, что я испортил AJAX?
(заранее благодарю за любую помощь!)
Вот мой HTML, JS и PHP для справки:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ajaxTest.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>AJAX test</title>
</head>
<body>
<div id="area">
<h2>Sending Data to the Server</h2>
<form action="" method="GET">
<button type="submit" name="data" value="1" onclick="getData('ajaxTest.php', 'moreText')">1</button>
<button type="submit" name="data" value="2" onclick="getData('ajaxTest.php', 'moreText')">2</button>
</form>
<br />
<p id="moreText">The fetched message should appear here.</p>
</div>
</body>
</html>var XMLHttpRequestObject = false;
if(window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject){
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID) {
if(XMLHttpRequestObject){
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send();
}
}<?php
if ($_GET["data"] == "1") {
echo 'The server got a value of 1';
}
if ($_GET["data"] == "2") {
echo 'The server got a value of 2';
}
?>
Решение
Хорошо, после переписывания, это будет правильный способ сделать это:
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- JS -->
<script type="text/javascript" src="ajaxTest.js"></script>
<script type="text/javascript">
function getData(dataSource, divID, data){
var xhr = new XMLHttpRequest();
data = encodeURIComponent(data);
ele = document.getElementById(divID);
xhr.open('GET', dataSource + '?data=' + data, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
alert('PHP Returned: ' + xhr.responseText);
ele.innerHTML = xhr.responseText;
}
else if (xhr.status !== 200) {
alert('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send(null);
}
</script>
<title>AJAX test</title>
</head>
<body>
<div id='area'>
<h2>Sending Data to the Server</h2>
<button type="button" value="1" onclick="getData('ajaxTest.php', 'moreText', this.value)">1</button>
<button type="button" value="2" onclick="getData('ajaxTest.php', 'moreText', this.value)">2</button>
<p id="moreText">The fetched message should appear here.</p>
</div>
</body>
</html>
Я удалил форму, потому что все, что вы делаете, это нажимаете кнопки. Вы не отправляете форму вообще. Таким образом, вам не нужно предотвращать действие формы по умолчанию.
Я также немного изменил ваш PHP, чтобы он возвращал то, что получает, а не просто догадывался об этом:
<?php
if(!empty($_GET['data'])){
echo 'The server got a value of: '. $_GET['data'];
}
?>
Я сам проверил код, и он работает нормально, конечно.
Другие решения
Я понимаю, что вы пытаетесь научиться кодировать, поэтому я не собираюсь критиковать разумность вашего кода.
Вот что вам не хватает:
Вы не включаете GET коляски в URL. Предполагается, что вы добавите параметры в конце URL-адреса следующим образом:
ajaxTest.php?data=1
Вот почему вы получаете неопределенный индекс.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ajaxTest.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>AJAX test</title>
</head>
<body>
<div id="area">
<h2>Sending Data to the Server</h2>
<form action="" method="GET">
<button type="button" name="data" value="1" onclick="getData(this.value,'ajaxTest.php', 'moreText')">1</button>
<button type="button" name="data" value="2" onclick="getData(this.value,'ajaxTest.php', 'moreText')">2</button>
</form>
<br />
<p id="moreText">The fetched message should appear here.</p>
</div>
</body>
</html><script>
var XMLHttpRequestObject = false;
if(window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject){
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(value,dataSource, divID) {
if(XMLHttpRequestObject){
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource+"?data="+value,false);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send();
}
}
</script>
- Изменить тип кнопки Отправить в кнопка.
- Передайте значение на страницу ajax.
Попробуйте это, я думаю, что это может работать для вас.
detector