• JQuery ajax()实例


    前端页面:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>搜索</title>
    </head>

    <body>
    <div class="zgz">请输入(A-Z):<input type="text" value="GET"></div>
    <div class="rep">姓名:</div><br><br>
    <div class="zgzB">请输入(A-Z):<input type="text" value="POST"></div>
    <div class="repB">姓名:</div>
    <script src="js/jquery.min.js"></script>
    <script>

    $(function(){

    var oBtn=$('.zgz input');
    var oDiv=$('.rep');

    var oBtnB=$('.zgzB input');
    var oDivB=$('.repB');

    oBtn.click(function(){$(this).val('')})

    oBtn.keyup(function(){

    $.ajax({

    type:"get",//ajax请求方式(只有两种:get/post)

    data:{q:oBtn.val()},//传给服务器的数据(json格式).

    url:"php1.php",//ajax请求地址(将data的数据发送给(php1.php),后台获得数据进行处理,处理完再返还给前台)

    success: function(dat){//对响应回来(后台返还回来)的数据进行处理

    oDiv.html("姓名:");
    oDiv.append(dat);

    }
    });
    });

    });

    </script>
    </body>
    </html>

    后台(php):

    <?php
    // 用名字来填充数组
    $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="no suggestion";
    }
    else
    {
    $response=$hint;
    }

    //输出响应
    echo $response;
    ?>

  • 相关阅读:
    C#中的扩展方法详解
    MVC Razor模板引擎 @RenderBody、@RenderPage、@RenderSection及Html.RenderPartial、Html.RenderAction
    @html.ActionLink的几种参数格式
    MVC session过期如何处理跳转
    LINQ to SQL和Entity Framework对比与关联
    ASP.Net 更新页面输出缓存的几种方法
    asp.net缓存
    ASP.NET应用程序与页面生命周期
    两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js
    测试入门知识
  • 原文地址:https://www.cnblogs.com/Greenzgz/p/4498116.html
Copyright © 2020-2023  润新知