静态页面：

一、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')

            }

    });

系统前端基本文件+ajax部分理解的更多相关文章

  1. 前端通信：ajax设计方案（四）--- 集成ajax上传技术 大文件/超大文件前端切割上传，后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  2. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  3. 前端通信：ajax设计方案（三）--- 集成ajax上传技术

    在此之前让我感慨一下现在的前端开发的氛围.我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了.其实我想问,东西都框架做了,那你 ...

  4. 关于Linux系统清理/tmp/文件夹的原理

    转自:http://www.opsers.org/base/clean-up-on-the-linux-system-tmp-folder-you-may-want-to-know.html 我们知道 ...

  5. Android系统的镜像文件的打包过程

    在前面一篇文章中,我们分析了Android模块的编译过程.当Android系统的所有模块都编译好之后,我们就可以对编译出来的模块文件进行打包了.打包结果是获得一系列的镜像文件,例如system.img ...

  6. x系统清理/tmp/文件夹的原理

    转自:http://www.opsers.org/base/clean-up-on-the-linux-system-tmp-folder-you-may-want-to-know.html§ 我们知 ...

  7. window 系统上传文件到linux 系统出现dos 格式换行符

    Windows里的文件在Unix/Mac下打开的话,在每行的结尾可能会多出一个^M符号,Unix/Mac系统下的文件在Windows里打开的话,所有文字会变成一行,所以为了避免这种情况的发生,我们可以 ...

  8. linux系统加快大文件的写入速度

    linux系统加快大文件的写入速度 setvbuf进行优化内存IO

  9. linux系统下修改文件夹目录权限

    linux系统下修改文件夹目录权限 文件夹权限问题 Linux.Fedora.Ubuntu修改文件.文件夹权限的方法差不多.很多人开始接触Linux时都很头痛Linux的文件权限问题.这里告诉大家如何 ...

随机推荐

  1. Win10U盘启动盘制作及Win10系统安装

    准备工具: 1:一个8GU盘 2:下载MediaCreationTool1803.exe程序 及参考文档. 启动盘制作步骤: 1:运行 2:按照截图步骤依次...... 3:制作完成后插拔一下U盘在看 ...

  2. [Swift]LeetCode54. 螺旋矩阵 | Spiral Matrix

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  3. [Swift]LeetCode495. 提莫攻击 | Teemo Attacking

    In LOL world, there is a hero called Teemo and his attacking can make his enemy Ashe be in poisoned ...

  4. Java连接数据库之SQLServer

    工具: eclipse Microsoft SQL Server SQL Server连接驱动:mssql-jdbc-6.4.0.jre8.jar SQL script代码 CREATE DATABA ...

  5. 关于 redis.properties配置文件及rule

    当你配置的 FinanceRlue 的path为/count/users时,redis.properties中就必须也配置一个/users=redis://localhost:6379/2?keyle ...

  6. scala查询dataFrame结构

    println(dataFrame.printSchema)

  7. Java核心技术及面试指南 设计模式部分的面试题总结以及答案

    8.6.4.1请实现一个线程安全的单例模式. 1      public class MailListReader { 2          private static MailListReader ...

  8. Openssh版本升级修复漏洞

    一.由于openssh版本过低当用扫描软件检测时会出现以下漏洞: 二.解决方案是升级高版本,下面是升级的步凑. 1.安装telnet工具,因为升级过程中怕失败或者重启ssh失败.我们直接yun安装即可 ...

  9. 『数组的最大代价 贪心优化DP』

    数组的最大代价(51nod 1270) Description 数组A包含N个元素A1, A2......AN.数组B包含N个元素B1, B2......BN.并且数组A中的每一个元素Ai,都满足1 ...

  10. .net core下使用FastHttpApi构建web聊天室

    一般在dotnet core下构建使用web服务应用都使用asp.net core,但通过FastHttpApi组建也可以方便地构建web服务应用,在FastHttpApi功能的支持下构建多人聊天室是 ...