ajax开发短期班,一个简单的ajax 来mock数据

目录结构：

图片.png

index.html代码：

查询

var Oinput=document.querySelector("#username");

var Obtn=document.querySelector("#btn");

var Olist=document.querySelector(".list");

Obtn.addEventListener("click",function(){

var xhr=new XMLHttpRequest();

xhr.onreadystatechange=function(){

if(xhr.readyState===4&&(xhr.status===200||xhr.status===304)){

var firends=JSON.parse(xhr.responseText);

console.log(firends)

var htmls=render(firends);

Olist.innerHTML=htmls;

}

xhr.open("get","/loadMore?username="+Oinput.value,true)

xhr.send()

})

function render(arry){

var htmls='';

for (var i=0;i

htmls+="

"+arry[i]+"";

}

return htmls;

}

router.js代码：

app.get("/loadMore",function(req,res){

var username=req.query.username;

var firends

if(username==="yangliu"){

firends=["小明","小红"]

}else{

firends=["nobody"]

}

res.send(firends);

})

注意如果把ajax操作文件和router放到js文件夹下，需要设置public的文件夹是哪个文件夹

图片.png

把router所在的文件夹设置为静态文件夹：

图片.png

ajax开发短期班,一个简单的ajax 来mock数据相关推荐

一个简单的Ajax开发框架
根据Ajax与XMLHttpRequest对象一文的介绍,我们可以开发一个简单的Ajax框架供以后开发应用. 首先要知道Ajax的开发流程: 1:初始化XMLHttpRequest,这一步要考虑跨浏览 ...
ajax登陆返回值判断,一个简单的ajax用户登陆返回值问题？有代码
一个简单的ajax用户登陆返回值问题?有代码來源:互聯網 2009-11-13 11:55:56 評論分類: 電腦/網絡 >> 程序設計 >> 其他編程語言問題描述: ...
使用jQuery来实现一个简单的ajax请求
下面的程序使用ajax来实现一个简单的ajax请求 JSP页面代码 <%@ page language="java" import="java.util.*&quo ...
java swing课程表设计_javaswing.Shedule 这是一个简单的课程表设计，数据连接为oracle 238万源代码下载- www.pudn.com...
文件名称: javaswing.Shedule下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 57 KB 上传时间: 2014-10-28 下载次数: 2 提供 ...
ajax如何请求json文件,简单的ajax请求加载外部json文件
我在学习ajax ....我试图从json文件发出一个基本请求,它与我的index.html位于同一个文件夹中,但由于某种原因它说未定义:(我可以看到错误是可变的人,但我不能赶上为什么它未定义.... ...
java ajax无刷分页_简单实现Ajax无刷新分页效果
Ajax无刷新分页效果,如下代码实现 Ajax无刷新分页效果 function showpage(url) { var xhr = new XMLHttpRequest(); xhr.onreadys ...
怎样判断ajax请求,如何判断一个请求为ajax请求？
如何判断一个请求为ajax请求? 1.我们可以通过http协议头信息里的X-Requested-With进行判断 2.如果是使用jquery完成的ajax请求时,$_SERVER里会存在一个HTTP- ...
iPhone开发初试锋芒　一个简单的iPhone播放器 --紫枫凝潇烟
早就打算开始iPhone下的应用,最近才得以闲暇正式开始,先看了一本objective-c 2.0的书,然后动手写了一个简单的播放器熟悉一下iPhone开发.上几张截图留作纪念. Xcode是主要开发 ...
树莓派底层IO驱动开发示例（一个简单io口驱动的开发）
一.驱动代码的开发 1.树莓派寄存器的介绍点击查看:树莓派(bcm2835芯片手册) GPFSEL0 GPIO Function Select 0: 功能选择输入/输出 GPSET0 GPIO P ...

ajax开发短期班,一个简单的ajax 来mock数据

ajax开发短期班,一个简单的ajax 来mock数据相关推荐

最新文章

热门文章

ajax开发 短期班,一个简单的ajax 来mock数据

ajax开发 短期班,一个简单的ajax 来mock数据相关推荐

最新文章

热门文章

ajax开发短期班,一个简单的ajax 来mock数据

ajax开发短期班,一个简单的ajax 来mock数据相关推荐