基于Ajax的搜索PHP

时间:2015-02-09 07:06:39

标签: php jquery mysql ajax

我正在尝试在PHP中创建基于AJAX的搜索。我到目前为止编写的代码现在似乎没有起作用。任何建议都会有很大的帮助。提前致谢。这是我的代码。

的index.php     

<head>
<script src = "http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>

<input type="text" name="text" id="text" autocomplete="off" onkeyup="showHint(this.value)"/>


<div id="inner"></div>
<script type="text/javascript">

function showHint(str) {
        if(str.length == 0) {
            document.getElementById('inner').innerHTML = "search";
            return;
        }

        if(window.XMLHttpRequest) {
            xmlhttp = XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if(xmlhttpreadystate == 4 && xmlhttp.status == 200) {
                document.getElementById('inner').innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open("REQUEST", "search.php?text"+str, true);
        xmlhttp.send();

    }

</script>

</body>

</html> 

的search.php

<?php

    $host = 'localhost';
    $user = 'root';
    $password= 'root';
    $db = 'demo';

    @$conn = mysql_connect($host, $user, $password) or die(mysql_error());
    mysql_select_db($db, $conn);

    /*if($result) {
        echo "success";
    } else { echo "fail"; }
    */



$text = $_REQUEST['text'];
$text = preg_replace('#[^a-z0-9]#i', '', $text);

$query = "SELECT * FROM users where first_name LIKE '%$text%' OR last_name LIKE '%$text%'";

$action = mysql_query($query);
$result = mysql_num_rows($action);

while($res = mysql_fetch_array($action)) {
  $output .= $res['first_name']. ' '.$res['last_name'];
  echo $output;
}


?>

4 个答案:

答案 0 :(得分:1)

你错过了index.php。

中脚本中的等号(在文本之后)

xmlhttp.open(“REQUEST”,“search.php?text =”+ str,true);

答案 1 :(得分:0)

为什么你要做这个漫长的过程,你也可以尝试这个jQuery ajax,

$.ajax({
      url: 'search.php',
      type: 'GET',
      data: 'text='+str,
      success: function(data) {
        //called when successful
        $('#inner').html(data);
      },
      error: function(e) {
        //called when there is an error
        console.log(e.message);
      }
    });

答案 2 :(得分:0)

我只是在search.php中获取输入。你能试试这些代码吗?

的index.html:

<html>
<head>
</head>
<body>
<input type="text" name="text" id="text" autocomplete="off" onkeyup="showHint(this.value)"/>
<div id="inner"></div>
<script type="text/javascript">
function getHttpRequest()
{
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function showHint(str)
{
var xmlhttp; 
if (str=="")
  {
  document.getElementById('inner').innerHTML = "search";
            return;
  }

if (window.XMLHttpRequest)
  {   
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
                document.getElementById('inner').innerHTML = xmlhttp.responseText;
    }
  }  
xmlhttp.open("GET", "search.php?str="+str, true);

xmlhttp.send();
}
</script>
</body>
</html>

的search.php:

<?php
$text=$_GET["str"];
echo $text;
?>

答案 3 :(得分:0)

使用此:

$.ajax({
      url: 'search.php',
      type: 'GET',
      data: 'text='+str,
      success: function(data) {
        //called when successful
        $('#inner').html(data);
      },
      error: function(e) {
        //called when there is an error
        console.log(e.message);  
    alert(e.message); // if you dont know how to check console
      }
    });