Javascript Ajax Mysql查询_Javascript_Php_Jquery_Mysql_Ajax

Javascript Ajax Mysql查询

javascript php jquery mysql ajax

Javascript Ajax Mysql查询,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,我可能是个十足的白痴，看不到这里的大局。我正试图写一个ajax的小东西，可以从数据库中提取信息，但我似乎无法让事情继续下去。。。请告诉我我做错了什么我通过以下几个在线教程将代码组合在一起，我不是ajax天才。我的ajax技术很可能会引发下一次世界大战这是我的密码。如果我错过了一些小东西，请随时告诉我我是个白痴 <html> <head> <script> function showDetail(str) {

我可能是个十足的白痴，看不到这里的大局。我正试图写一个ajax的小东西，可以从数据库中提取信息，但我似乎无法让事情继续下去。。。请告诉我我做错了什么

我通过以下几个在线教程将代码组合在一起，我不是ajax天才。我的ajax技术很可能会引发下一次世界大战

这是我的密码。如果我错过了一些小东西，请随时告诉我我是个白痴

     <html>
<head>
    <script>
        function showDetail(str) {
            if (str=="") {
                document.getElementById("txtHint").innerHTML="";
                return;
            }
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","process.php?q="+str,true);
            xmlhttp.send();
        }
    </script>
</head>
<body>

<form>
    Wallet Number : <input type="text" name="wallet01" id="wallet01"  />
    <br />
    <input type="submit" id="submit" name="submit" onsubmit="showDetail(wallet01)">


</form>
<br>
<div id="txtHint"><b>Kit info will be listed here.</b></div>

</body>
</html>


功能显示详细信息（str）{
如果（str==“”）{
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
}
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”、“process.php？q=“+str，true”）；
xmlhttp.send（）；
}
钱包号码：




套件信息将在此处列出。

这是我的php

<?php
$q = $_GET['q'];

$con = mysqli_connect('10.1.75.131','markdv','qwerty123','MTNAutomation');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"MTNAutomation");
$sql="SELECT serialNumber FROM Kit_T WHERE serialNumber = '$q'";
$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>Wallet Number</th>
</tr>";

while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['serialNumber'] . "</td>";

    echo "</tr>";
}
echo "</table>";

mysqli_close($con);
?>

您的HTML中有一个错误。您放置了“onsubmit=”showdeail（wallet01）”，但“wallet01”不是javascript变量

我建议将其改为：

<form onsubmit="return showDetail()">
    Wallet Number : <input type="text" name="wallet01" id="wallet01"  />
    <br />
    <input type="submit" id="submit" name="submit">
</form>

或者您可以使用jQuery中的ajax，这更简单。请参见此处的示例

    function showDetail() {
        var str = $('#wallet01').val();

        if (str=="") {
            document.getElementById("txtHint").innerHTML="";
            return false;
        }

        var jqxhr = $.ajax( {
                url: "example.php",
                type: "GET", 
                data: {q: str}
            }).done(function(data, textStatus, jqXHR ) {
                alert( "success" );
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert( "error" );
            }).always(function( ) {
                alert( "complete" );
            });

        return false;
    }

见

您还可以使用“beforeSend”功能启动gif“加载”。

您是否在浏览器控制台中看到任何错误？我如何添加处理gif或类似内容，以便向用户指示正在检索内容/loaded@JayBlanchard没有得到任何错误。表中显示的是标题，但没有其他信息。您是否自行运行PHP以确保它返回表？@JayBlanchard刚刚这样做了，是的，它确实返回表和所有正确的信息，只是没有从ajax函数获取输入来检索相同的infoplease请查看您的地址，以便我可以用啤酒支付您的费用！！！你是摇滚明星。。非常感谢你的帮助！你好，斯特罗斯。哇！啤酒总是很好的…哈哈哈。很高兴知道这对你有用。：）

    function showDetail() {
        var str = $('#wallet01').val();

        if (str=="") {
            document.getElementById("txtHint").innerHTML="";
            return false;
        }

        var jqxhr = $.ajax( {
                url: "example.php",
                type: "GET", 
                data: {q: str}
            }).done(function(data, textStatus, jqXHR ) {
                alert( "success" );
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert( "error" );
            }).always(function( ) {
                alert( "complete" );
            });

        return false;
    }