zoukankan      html  css  js  c++  java
  • 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;
    ?>

  • 相关阅读:
    Django框架第九篇--Django和Ajax、序列化组件(serializers)、自定义分页器、模型表choice参数
    Django框架之第五篇(模板层) --变量、过滤器(|)、标签(% %)、自定义标签、过滤器、inclusion_tag,模板的继承、模板的注入、静态文件
    Django框架学习易错和易忘点
    守护线程
    Thread其他属性和方法
    进程与线程的区别
    开启线程
    关闭屏幕输出分屏显示
    生产者消费者模型
    队列
  • 原文地址:https://www.cnblogs.com/Greenzgz/p/4498116.html
Copyright © 2011-2022 走看看