静态页面：

一、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. [Swift]LeetCode105. 从前序与中序遍历序列构造二叉树 | Construct Binary Tree from Preorder and Inorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  2. [Swift]LeetCode332. 重新安排行程 | Reconstruct Itinerary

    Given a list of airline tickets represented by pairs of departure and arrival airports [from, to], r ...

  3. 机器学习入门17 - 嵌套 (Embedding)

    原文链接:https://developers.google.com/machine-learning/crash-course/embeddings/ 嵌套是一种相对低维的空间,可以将高维矢量映射到 ...

  4. “吃人”的那些Java名词：对象、引用、堆、栈

    记得中学的课本上,有一篇名为<狂人日记>课文:那时候根本理解不了鲁迅写这篇文章要表达的中心思想,只觉得满篇的“吃人”令人心情压抑:老师在讲台上慷慨激昂的讲,大多数的同学同我一样,在课本面前 ...

  5. java代码之美（2）---Java8 Stream

    Stream 第一次看到Stream表达式就深深把我吸引,用它可以使你的代码更加整洁而且对集合的操作效率也会大大提高,如果你还没有用到java8的Stream特性,那就说明你确实out啦. 一.概述 ...

  6. 【java提高】---queue集合

    queue集合 什么是Queue集合? 答:Queue用于模拟队列这种数据结构.队列通常是指“先进先出(FIFO)”的容器.队列的头部保存在队列中存放时间最长的元素,尾部保存存放时间最短的元素. 新元 ...

  7. 在阿里云 ECS 搭建 nginx https nodejs 环境 (一、 nginx)

    首先介绍下相关环境.软件的版本 1.阿里云 ECS . ubuntu-14.04.5 LTS 2.nginx 版本 1.9.2 可能会遇到的问题: 一.在 ssh 服务器上的时候,提示 这个时候需要将 ...

  8. 从锅炉工到AI专家(3)

    剖析第一个例子 学习<机器学习>,很多IT高手是直接去翻看TensorFlow文档,但碰壁的很多.究其原因,TensorFlow的文档跨度太大了,它首先假设你已经对"机器学习&q ...

  9. JAVA集合类兄妹List和Set

    List 接口及其实现类 有序集合,集合中每个元素都有其对应的顺序索引,类似数组,索引也是从 0 开始,可以根据元素的索引,来访问元素. List 集合允许添加相同的元素,因为它是通过下标来取值的,不 ...

  10. 带着新人学springboot的应用02（springboot+mybatis+缓存 中）

    继续接着上一节,大家应该知道驼峰命名法吧!就是我们javabean中属性一般命名是lastName,userName这种类型的,而数据库中列名一般都是last_name,user_name这种的,要让 ...