为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 PHP ajax请求

PHP ajax请求

标签：
PHP

这里讲的是原生的ajax数据请求，也是比较基础的，适合新手去看

一.效果图


webp

1-1



webp

1-2

HTML：

<!DOCTYPE>

<html>

<head>

<title>实时更新</title>


    <link href="style.css" rel="stylesheet" type="text/css" media="all"/>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="Flat Search Box Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />


    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>


    <style type="text/css">

body {

background:url(5.jpg)no-repeat;

background-size:cover;

font-family:'Open Sans',sans-serif;

font-size:100%;

}

</style>

</head>

<body>

<script type="application/javascript">

function showHint(str)

{

if (str.length==0)

{

document.getElementById("txtHint").innerHTML="";

return;

}

if (window.XMLHttpRequest)

{

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码

           xmlhttp=new XMLHttpRequest();

}

else

           {

//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","ajaxphp.php?q="+str,true);

xmlhttp.send();

}

</script>


<div class="search">

<i></i>

<div class="s-bar">

<form>

<input type="text" onkeyup="showHint(this.value)" value="Search Template" onfocus="this.value ='';" onblur="if (this.value =='') {this.value ='Search Template';}">

<input type="submit"  value="Search"/>

</form>

</div>

</div>

<br>

<br>

<p style="color:white;margin-left:30%">返回值:<span id="txtHint"></span></p>

</body>

</html>

这里的html基本上所有的基础的ajax请求都一样

1.获取字符串

2.进行浏览器的兼容

3.进行判断

4.发送url请求。


PHP：


/**

* Created by PhpStorm.

* User: lck

* Date: 2018/9/22 0022

* Time: 16:17

*/

////把模拟的数据放入到数组中

$a[]="Anna";

$a[]="Brittany";

$a[]="Cinderella";

$a[]="Diana";

$a[]="Eva";

$a[]="Fiona";

$a[]="Gunda";

$a[]="Hege";

$a[]="Inga";

$a[]="Johanna";

$a[]="Kitty";

$a[]="Linda";

$a[]="Nina";

$a[]="Ophelia";

$a[]="Petunia";

$a[]="Amanda";

$a[]="Raquel";

$a[]="Cindy";

$a[]="Doris";

$a[]="Eve";

$a[]="Evita";

$a[]="Sunniva";

$a[]="Tove";

$a[]="Unni";

$a[]="Violet";

$a[]="Liza";

$a[]="Elizabeth";

$a[]="Ellen";

$a[]="Wenche";

$a[]="Vicky";

//从请求URL地址中获取 q 参数

$q=$_GET["q"];

//查找是否由匹配值， 如果 q>0

if (strlen($q)>0)

{

    $hint="";

    for ($i=0;$i<count($a);$i++)

{

        ////判断转换成小写后,遍历截取长度，一个个去判断

        if (strtolower($q)==strtolower(substr( $a[$i],0,strlen($q))))

{

              if ($hint=="")

{

                  $hint=$a[$i];

}

              ////如果没有则没有如果则不断的累加上来

              else

                  {

                      $hint=$hint.",".$a[$i];

}

}

}

    // 如果没有匹配值设置输出为 "no suggestion"

    if ($hint == "")

{

        $response="没有您要的结果！";

}

    else

    {

        $response=$hint;

}

    echo $response;

}

?>

这里的思路也很简单：

1.接受前段传来的值并判断是否为空

2.把数组里面的每一个词进行遍历，然后看看哪一个是先符合条件的并显示出来，如果有第二个字符也匹配的就进行字符串的拼接。

3.如果没有匹配的就输出没有建议


二.效果图

webp

2-1


webp

2-2


1.HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>下拉搜索数据库</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script>

function showSite(str)

{

if (str=="")

{

document.getElementById("txtHint").innerHTML="";

return;

}

if (window.XMLHttpRequest)

{

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

                xmlhttp=new XMLHttpRequest();

}

else

            {

// 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","mysql_search.php?q="+str,true);

xmlhttp.send();

}

</script>

<style type="text/css">

body {

background:url(searchbg.jpg)no-repeat;

background-size:cover;

font-family:'Open Sans',sans-serif;

font-size:100%;

}

</style>

</head>

<body>

<form style="margin-left:20%;margin-top:20%">

<select name="users" onchange="showSite(this.value)">

<option value="">选择一个网站:</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

</form>

<br><br><br><br><br><br><br>

<div id="txtHint" style="margin-left:20%;"><b>个人信息显示在这里……</b></div>

</body>

</html>

思路其实和前面一样，变得只是PHP文件



2.PHP


/**

* Created by PhpStorm.

* User: lck

* Date: 2018/9/22 0022

* Time: 18:03

*/

$servername="localhost";

$usename="root";

$password="";

$dbname="myDB";

$q=isset($_GET["q"])?intval($_GET["q"]):"";

if (empty($q))

{

    echo "请进行选择！";

    exit;

}

$conn=new mysqli("$servername","$usename","$password","$dbname");

///防止编码错误

mysqli_set_charset($conn,"utf8");

$sql="SELECT * FROM MyGuests WHERE id = '".$q."'";

$reuslt=mysqli_query($conn,$sql);

echo "

Id

姓氏

名字

</tr>";

while ($row=mysqli_fetch_array($reuslt))

{

    echo "<tr>";

    echo "<td>" . $row['id'] . "</td>";

    echo "<td>" . $row['firstname'] . "</td>";

    echo "<td>" . $row['lastname'] . "</td>";

    echo "</tr>";

}

echo "</table>";

mysqli_close($conn);

?>


思路：

1.获取前端传来的值，并判断其是否为空。

2.打开数据库，根据传来的值讲数据以html形式展示。


三.效果图


webp

3-1



webp

3-2




1.html:

<html>

<head>

<title>实时搜索</title>

<script>

function showResult(str)

{

if (str.length==0)

{

document.getElementById("livesearch").innerHTML="";

document.getElementById("livesearch").style.border="0px";

return;

}

if (window.XMLHttpRequest)

{// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行

                xmlhttp=new XMLHttpRequest();

}

else

            {// IE6, IE5 浏览器执行

                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 &&xmlhttp.status==200)

{

document.getElementById("livesearch").innerHTML=xmlhttp.responseText;

document.getElementById("livesearch").style.border="1px solid #A5ACB2";

}

}

xmlhttp.open("GET","livesearch.php?q="+str,true);

xmlhttp.send();

}

</script>

</head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<body>

<form>

<input type="text" size="30" onkeyup="showResult(this.value)">

<div id="livesearch"></div>

</form>

</body>

</html>


2.PHP

/**

* Created by PhpStorm.

* User: lck

* Date: 2018/9/23 0023

* Time: 15:58

*/

$xmldoc=new DOMDocument();

$xmldoc->load("links.xml");

$x=$xmldoc->getElementsByTagName("link");

////获取到url里面的q值

$q=$_GET["q"];

if (strlen($q)>0)

{

   $hint="";

   for ($i=0;$i<$x->length;$i++)

{

     $y=$x->item($i)->getElementsByTagName("title");

     $z=$x->item($i)->getElementsByTagName("url");

     if ($x->item(0)->nodeType==1)

{

// 找到匹配搜索的链接

         if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))

{

             if ($hint=="")

{

                 $hint="<a href='" .

                     $z->item(0)->childNodes->item(0)->nodeValue .

                     "' target='_blank'>" .

                     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";

}

             else

             {

                 $hint=$hint . "<br /><a href='" .

                     $z->item(0)->childNodes->item(0)->nodeValue .

                     "' target='_blank'>" .

                     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";

}

}

}

}

}

// 如果没找到则返回 "no suggestion"

if ($hint=="")

{

    $response="no suggestion";

}

else

{

    $response=$hint;

}

// 输出结果

echo $response;

////https://blog.csdn.net/swimming_in_it_/article/details/78489053

///

/// 封装后的ajax请求



作者：九尾74
链接：https://www.jianshu.com/p/55eec31e76d0


点击查看更多内容
发表于 2019.01.06 13:17， 共 1317 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

慕虎7371278

手记
篇
粉丝
201
获赞与收藏
871

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消