zoukankan      html  css  js  c++  java
  • 系统前端基本文件+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')
                }
        });
  • 相关阅读:
    pycharm激活(JetBrains IDEA 系列产品通用xx方法(license server))
    纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val
    字符串替换
    jquery 倒计时效果
    js 数字前自动补零
    css 常用的绝对定位元素水平垂直居中的方法
    webapp中绝对定位/固定定位与虚拟键盘冲突的问题
    css 兼容各种iPhone
    使用 position:sticky 实现粘性布局
    jquery判断点击鼠标左、中、右键事件
  • 原文地址:https://www.cnblogs.com/qq946487854/p/10129592.html
Copyright © 2011-2022 走看看