2016-11-26 4 views
0

Это моя страница HTMLНе получая никакого ответа при использовании AJAX

<html> 
<head> 
    <title>Using AJAX</title> 
</head> 
    <script type="text/javascript" src="ajax.js"></script> 
<body> 
    <form action="searchItems.php" name="searchItem" method="post"> 
     Enter item name : <input type = "text" name = "itemName" id = "itemName" placeholder = "Enter item name" onblur="ajax()" /> 
     <input type = "submit" name="submit" id="submit" value="Search" /> 
     <input type = "reset" name = "reset" id= "submit" value = "Reset" /> 

     <div id="desc"></div> 
    </form> 
</body> 

Это страница PHP, когда форма была отправлена. Результаты ожидаются.

<?php 
include('dbconnect.php'); 
if (isset($_POST["submit"])) { 
    //echo "<pre>".print_r($_POST,1)."</pre>"; 
    $conn = db_connect(); 
    $name = $_POST['itemName']; 
    $query = "SELECT * FROM itemreceived where name = '" . $name . "'"; 
    $result = $conn->query($query); 
    if ($result->num_rows > 0) { 
     while ($row = $result->fetch_object()) { 
      echo $row->description; 
     } 
    } else { 
     echo "No result"; 
    } 
} 
?> 

Это страница dbconnect.php используется на странице searchItems.php

<?php 
function db_connect() 
{ 
    $conn  = null; 
    $servername = "localhost"; 
    $username = "root"; 
    $pwd  = ""; 
    $db_name = "ebay_db"; 
    $conn  = mysqli_connect($servername, $username, $pwd, $db_name); 
    if (!$conn) { 
     die("Connection failed :" . $conn->connect_error); 
    } 
    If ($conn) { 
     //echo '<script type="text/javascript"> alert("Connection successful"); </script>'; 
    } 
    return $conn; 
} 
?> 

Это функция Ajax() используется на странице HTML, чтобы получить результат в сНе «по алфавиту» ,

function ajax(){ 
var itemName = document.getElementById('itemName').value; 
console.log(itemName); 
var url="searchItems.php"; 
envelop = new XMLHttpRequest(); 
envelop.open("POST",url,true); 
envelop.onreadystatechange=displayResult; 
envelop.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
envelop.send('itemName='+itemName); 
alert("Calling ajax"); 

}

function displayResult(){ 
    if((envelop.readyState==4) &&(envelop.status==200)){ 
     document.getElementById('desc').innerHTML=envelop.responseText; 
     alert("Part 2"); 
    } 
} 

Когда я отправить форму, я получаю ожидаемый результат на странице searchItems.php Функция Ajax() не работает. Цель состоит в том, чтобы получить результат в div «desc», как только функция blur() активирована.

+0

Что значит неработать? Любые ошибки в консоли? –

+0

Нет, я не получаю никаких ошибок, но результат не отображается в div – Shaam

ответ

1

удалить Исеть ($ _ POST [ «отправить»]), потому что его просто только для завершения заполнения формы и возвращает Fals для функции Ajax!

+0

Мне нужно использовать только Javascript AJAX. Будет ли продолжаться работать? – Shaam

+0

уверен, что он будет работать – farhadamjady

+0

не работал :( – Shaam

-1

использовать jquery ajax вместо javascript ajax.

как этот

function ajax() { 
var itemName = $('#itemName').val(); 
$.ajax({ 
     type: "POST", 
     data: 'itemName='+itemName 
     url: 'searchItems.php', 
     success: function(response) { 
     console.log(response); 
     }); 
} 
+0

Мне нужно использовать javascript ajax ... – Shaam

0

Вы проверяете для readyState и status в функции обратного вызова ajax вызова envelop не доступна там, так как он объявлен в рамках функции ajax(). Выполните проверку на ajax(), а затем вызвать для displayResults()

function ajax(){ 
    var itemName = document.getElementById('itemName').value; 
    console.log(itemName); 
    var url="searchItems.php"; 
    envelop = new XMLHttpRequest(); 
    envelop.open("POST",url,true); 
    envelop.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    envelop.send('itemName='+itemName); 
    envelop.onreadystatechange = function() { 
     if (envelop.readyState === 4 && envelop.status === 200){ 
      displayResult(envelop.responseText) 
     } 
    }; 
    alert("Calling ajax"); 
} 

function displayResult(response){ 
    document.getElementById('desc').innerHTML=responseText; 
    alert("Part 2"); 
} 
+0

Я отредактировал код, чтобы вызвать функцию displayResult: 'code ' функция displayResult() { \t, если ((envelop.readyState == 4) && (envelop.status == 200)) { \t \t //document.getElementById('desc').innerHTML=envelop.responseText; \t \t document.getElementById ('desc'). InnerHTML = "Hello World"; \t \t предупреждение («Часть 2»); \t}} 'code' И я получаю текст«Hello World»в DIV«убывание» – Shaam

+0

сделать console.log (охваывает) внутри функции и проверьте ответ в консоли – phobia82

+0

сделал консоль. log (envelop), и это результат: 'code XMLHttpRequest {onreadystatechange: displayResult(), readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL:" http: // localhost/ebay/searchItems ,p ... ", статус: 200, statusText:" OK ", responseType:" ", response:" "}' – Shaam

Смежные вопросы