В приведенном выше коде отсутствует элемент HTML с идентификатором show_vehi
, который используется обратным вызовом ajax для отображения результата. С учетом вышесказанного, способ, которым вы открываете объект XMLHttpRequest, а затем выполняете фактический запрос, кажется странным - я обычно ожидаю, что запрос XMLHttpRequest будет открыт по мере того, как и когда запрос должен быть выполнен, а не при загрузке страницы.
По сути, в вашем ajax ~, по-видимому, нет ничего принципиально неправильного: он работает, поэтому, возможно, это неправильное понимание различных этапов запроса XHR, которое вызвало обеспокоенность в отношении readyState
оставаясь на 1.
Следующее имеет некоторые небольшие изменения в вашем исходном javascript, чтобы указать информацию, которую вы, возможно, не заметили (ошибка обратного вызова на самом деле не является ошибкой) и, поскольку была вызвана тестовая страница ej1.php
запрос ajax здесь обрабатывается на той же странице путем отправки некоторого случайного текста в качестве ответа, а не фактического запроса в БД.
<?php
if( !empty( $_GET['q'] ) ){
exit('Some sort of response for the ajax callback to process...'.date(DATE_ATOM));
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="type" id="type">
<option value="Coche">Car</option>
<option value="Motocicleta">Cicle</option>
<option value="Barco">Ship</option>
</select>
<button id="btn_search">Search</button>
<button id="btn_search_alternative">Search (Alternative)</button>
<div class="List" id="List"></div>
<div id='show_vehi'></div>
<script>
var css={
red:'color:red',
green:'color:green',
blue:'color:blue'
}
function ajax( url, type, callback ){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( this.status==200 && this.readyState==4 ){
console.info( '%cAfter Response: %s', css.green, xhr.readyState );
callback( this.response );
}
};
console.info( '%cBefore Open: %s', css.red, xhr.readyState );
xhr.open('GET', url+'?q='+type,true );
console.info( '%cBefore Send: %s', css.blue, xhr.readyState );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( null );
}
document.getElementById('btn_search_alternative').addEventListener('click',function(e){
function callback(r){
document.getElementById('show_vehi').textContent=r;
}
ajax( 'ej1.php', document.getElementById('type').value, callback );
});
/* slightly modified original */
var xhreq=new XMLHttpRequest();
console.info('After Initialisation: %d',xhreq.readyState)
var btn_search=document.getElementById("btn_search");
var type=document.getElementById("type");
btn_search.addEventListener("click",find_veh);
function find_veh(event){
console.log("Before Open: Find_veh1-> onreadystate:"+xhreq.readyState);
xhreq.open("GET","Ej1.php?q="+type.value,true);
console.log("After Open, Before Change: Find_veh2-> onreadystate:"+ xhreq.readyState);
xhreq.onreadystatechange= show_veh;
xhreq.send(null);
console.log("After Send: Find_veh3-> onreadystate:"+ xhreq.readyState);
}
function show_veh(){
if((xhreq.readyState==4) && (xhreq.status==200)){
console.log("Response received: Show_veh correct")
document.getElementById("show_vehi").innerText=xhreq.responseText;
}else {
console.log("Error in show_veh: readyState=%d status=%d",xhreq.readyState,xhreq.status);
}
}
</script>
</body>
</html>
Однако - настоящая проблема заключается в вашем PHP коде , Оператор SQL полностью уязвим для инъекций SQL, поэтому я бы посоветовал узнать, как реализовать Prepared Statements
- я ценю, что в настоящее время он не работает из-за класса C IP-адреса для хоста базы данных, но теперь это время вносить изменения.
Вы можете попробовать что-то вроде этого (не проверено)
<?php
if( !empty( $_GET['q'] ) ){
$html=array();
$dbConn = new mysqli("192.168.1.62", "root", "pass", "AJAX");
$sql='select `id` from `vehiculos` where tipo=?';
$stmt=$dbConn->prepare( $sql );
$q=filter_input( INPUT_GET, 'q', FILTER_SANITIZE_STRING );
if( $stmt ){
$stmt->bind_param('s', $q );
$res=$stmt->execute();
if( $res ){
$stmt->store_result();
$stmt->bind_result( $id );
$html[]='<ul>';
while( $stmt->fetch() )$html[]=sprintf( '<li>%s</li>',$id );
$html[]='</ul>';
}
}
exit( implode( PHP_EOL, $html ) );
}
?>