Question

这是我的html页面

<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";
    }
}
?>

这是searchItems.php页面中使用的dbconnect.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;
}
?>

这是html页面中使用的ajax（）函数，用于在div“desc”中获取结果。

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（）函数不起作用。目标是在函数blur（）被激活后立即将结果输入div“desc”。

Answer 1

删除isset（$ _ POST [“submit”]）因为它只是用于提交表单而且它为你的ajax函数返回fals！

Answer 2

您正在检查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"); }

$( "#data" ).val([ "100", "101" ]);

Answer 3

使用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);
      });
 }

使用AJAX时没有得到任何响应

3 个答案: