• 系统前端基本文件+ajax部分理解


    静态页面:

    一、static:

    css

    dist

    fonts

    images

    js

    model

    二、templates:

    html

    ajax搜索操作:

    <html>
    <head>
    <script type="text/javascript">
    function showHint(str)
    {
    var xmlhttp;
    if (str.length==0)
      { 
      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","/ajax/gethint.asp?q="+str,true);//获取asp文件,注意q参数
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <h3>请在下面的输入框中键入字母(A - Z):</h3>
    <form action=""> 
    姓氏:<input type="text" id="txt1" onkeyup="showHint(this.value)" />
    </form>
    <p>建议:<span id="txtHint"></span></p> 
    
    </body>
    </html>

    下面是asp文件代码

    <%
    response.expires=-1
    dim a(30)
    '用名字来填充数组
    a(1)="Anna"
    a(2)="Brittany"
    a(3)="Cinderella"
    a(4)="Diana"
    a(5)="Eva"
    a(6)="Fiona"
    a(7)="Gunda"
    a(8)="Hege"
    a(9)="Inga"
    a(10)="Johanna"
    a(11)="Kitty"
    a(12)="Linda"
    a(13)="Nina"
    a(14)="Ophelia"
    a(15)="Petunia"
    a(16)="Amanda"
    a(17)="Raquel"
    a(18)="Cindy"
    a(19)="Doris"
    a(20)="Eve"
    a(21)="Evita"
    a(22)="Sunniva"
    a(23)="Tove"
    a(24)="Unni"
    a(25)="Violet"
    a(26)="Liza"
    a(27)="Elizabeth"
    a(28)="Ellen"
    a(29)="Wenche"
    a(30)="Vicky"
    
    '获得来自 URL 的 q 参数
    q=ucase(request.querystring("q"))
    
    '如果 q 大于 0,则查找数组中的所有提示
    if len(q)>0 then
      hint=""
      for i=1 to 30
        if q=ucase(mid(a(i),1,len(q))) then
          if hint="" then
            hint=a(i)
          else
            hint=hint & " , " & a(i)
          end if
        end if
      next
    end if
    
    '如果未找到提示,则输出 "no suggestion"
    '否则输出正确的值
    if hint="" then
      response.write("no suggestion")
    else
      response.write(hint)
    end if
    %>

    也可以用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;
    ?>

    所学项目相关:

    编辑用户:

     $(".userEdit").click(function(){
            var username = $(this).parents("tr").children('td').eq(1).text();
            var ChineseName = $(this).parents("tr").children('td').eq(2).text();
            var role =$(this).parents("tr").children('td').eq(3).text();
            console.log(ChineseName,role)
            $('#usernameSpan').text(username)
            $('#newChineseNameEdit').val(ChineseName)
            if (role=='超级管理员'){
                $('#selectRoleEdit').val('superlUser')
            }else {
                $('#selectRoleEdit').val('normalUser')
                }
        });
  • 相关阅读:
    【美团面试题】——图遍历
    ubuntu15.04 + ROS jade
    3P(PS、PR、PDF编辑器Acrobat)中的基基本操作(三)
    谈谈你对组件的看法
    Web开发中跨域的几种解决方案
    JS事件模型
    zepto的clone方法于textarea和select的bug修复
    SASS使用总结
    git用法总结
    去除inline-block元素间间距
  • 原文地址:https://www.cnblogs.com/qq946487854/p/10129592.html
Copyright © 2020-2023  润新知