前端学习(1429):ajax封装四

ajax.js

// 引用expess框架
const express = require('express');
// 处理路径
const path = require('path');const bodyParser = require('body-parser');
const fs = require('fs');// 创建网站服务器
const app = express();
app.use(bodyParser.json());
app.get('/first', (req, res) => {res.send('hello geyao')
})
app.get('/responsdate', (req, res) => {res.status(400).send({ "name": "geyao" })
})
app.post('/post', (req, res) => {res.send(req.body);
})
app.get('/get', (req, res) => {res.send(req.query);
})
app.post('/json', (req, res) => {res.send(req.body);
})
app.get('/readystate', (req, res) => {res.send('hello');
})
app.get('/error', (req, res) => {res.status(400).send('not ok');
})
app.get('/geyao', (req, res) => {res.send('hello geyao')
})
app.get('/cache', (req, res) => {fs.readFile('./text.txt', (err, result) => {res.send(result);});
})
app.use(express.static(path.join(__dirname)));
// 监听端口
app.listen(3000);
console.log('网站服务器启动成功, 请访问localhost')

ajax10.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function ajax(options) {//创建ajax对象var xhr = new XMLHttpRequest();var params = '';//循环用户的参数for (var attr in options.data) {params += attr + '=' + options.data[attr] + '&'}params = params.substr(0, params.length - 1);if (options.type == 'get') {options.url = options.url + '?' + params;}console.log(params);//配置ajax对象xhr.open(options.type, options.url);//发送请求if (options.type == 'post') {var contentType = options.header['Content-Type'];xhr.setRequestHeader('Content-type', options.header['Content-Type']);if (contentType == 'application/json') {xhr.send(JSON.stringify(options.data))} else {xhr.send(params);}} else {xhr.send();}//触发xhr.onload = function() {//状态码分开if (xhr.status == 200) {console.log(xhr.responseText, xhr);options.success('hah');} else {options.error(xhr.responseText, xhr);}}}ajax({type: 'get',data: {name: 'geayo',age: 20},url: 'http://localhost:3000/responsdate',success: function(data) {console.log('这里是成功函数' + data);},error: function(data, xhr) {console.log('这里是失败函数' + data);console.log(xhr);},header: {'Content-Type': 'application/json'}})</script>
</body></html>

ajax1.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>//1创建ajax对象var xhr = new XMLHttpRequest();//请求方式xhr.open('get', 'http://localhost:3000/responsdate');//发送请求xhr.send();//获取数据xhr.onload = function() {/* console.log(xhr.responseText); */var res = JSON.parse(xhr.responseText);console.log(res);var str = '<h2></h2>'document.body.innerHTML = str;}</script>
</body></html>

运行结果

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/420038.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oracle表分区失效14400,Oracle11g:分区表数据操作出现ORA-14400异常处理详解

Oracle11g&#xff1a;分区表数据操作出现ORA-14400异常处理问题&#xff1a;当对已分区的表数据进行操作(例如新增&#xff0c;修改)&#xff0c;出现异常提示&#xff1a;ORA-14400: 插入的分区关键字未映射到任何分区分析&#xff1a;意思说的是插入的数据没有相对应的分区来…

java中对map使用entrySet循环

根据JDK5的新特性,用For循环Map,例如循环Map的Key 123for(String dataKey : paraMap.keySet()) { System.out.println(dataKey ); }注意的是,paraMap 是怎么样定义的,如果是简单的Map paraMap new HashMap ();那前面的String就只能换成Object了.循環整個map的k…

oracle查询表字段和备注,Oracle 查询表信息(字段+备注)

获取表字段&#xff1a;select *from user_tab_columnswhere Table_Name‘用户表‘order by column_name获取表注释&#xff1a;select *from user_tab_commentswhere Table_Name‘用户表‘order by Table_Name获取字段注释&#xff1a;select *from user_col_commentswhere Ta…

前端学习(1430):ajax封装五

ajax.js // 引用expess框架 const express require(express); // 处理路径 const path require(path);const bodyParser require(body-parser); const fs require(fs);// 创建网站服务器 const app express(); app.use(bodyParser.json()); app.get(/first, (req, res) &…

VM虚拟机不能上网的问题解决

VM虚拟机不能上网的问题解决 源文&#xff1a;http://www.360doc.com/content/13/0827/13/1001775_310226875.shtml转载于:https://www.cnblogs.com/xiaohaizhuimeng/p/VM.html

前端学习(1431):ajax封装六

ajax.js // 引入express框架 const express require(express); // 路径处理模块 const path require(path); const bodyParser require(body-parser); const fs require(fs); // 创建web服务器 const app express();app.use(bodyParser.json());// 静态资源访问服务功能 …

c# 操作oracle数据库,C#连接oracle数据库增删改查实例

【实例简介】C#连接oracle数据库&#xff0c;增删改查实例&#xff0c;OracleParameter防Sql注入等&#xff0c;适用于新手学习【实例截图】【核心代码】5868e8be-414a-4138-8390-2fbbf9a1d530└── CS1├── CS1│ ├── app.config│ ├── bin│ │ ├── Debu…

毫秒级百万数据分页存储过程

然后创建分页存储过程;这个是基于SQL 2005 的ROW_NUMBER的, SQL 2000 不适用; SQL 2008 我没有安装,所以也没有测试过!估计应该可以运行. 2种算法可以选择 1. 使用 BETWEEN ; 2. TOP ; 代码中已经注释了. 我测试了一下2种方法基本没有什么区别;代码如下: 123456789101112…

oracle11连12c报权限错误,关于Oracle12c连接报错的问题

关于Oracle12c连接报错的问题这段时间因为项目原因&#xff0c;接触到了Oracle12C&#xff0c;其实问题很简单&#xff0c;就是pl/sql developer能够访问数据库服务端即可&#xff0c;却碰到了奇奇葩葩的问题&#xff0c;现分享一下。1、在java端报Ora-12505错误&#xff0c;即…

前端学习(1433):vue是什么

#### 1.1 Vue是什么> Vue.JS是优秀的前端 JavaScript 框架 > > react/angular/vue库和框架的区别:- 库(如jQuery)库是工具. 提供大量API&#xff0c;体现了封装的思想、需要自己调用这些API- 框架框架提供了一套完整解决方案,使用者要按照框架所规定的某种规范进行开发…

oracle10客户端tnsname,连接Oracle RAC 的tnsname.ora设置

由于Oracle数据库通常需要在不同地方被访问&#xff0c;所以Oracle开发人员必须搞清楚数据库性能如何被网络通讯所影响。由Oracle提供的TNS(Transparent Network Substrate)允许不同数据库之间的分布式通讯。作为一种分布式协议的TNS&#xff0c;允许远距离的系统之间的透明数据…

【100亿次的挑战】之春晚控制后台故事分享

讲师&#xff1a;freyli 项目历程简介在介绍控制后台部分之前&#xff0c;先简单回顾下项目的时间线&#xff1a; 10月25日&#xff0c;意向、调研、策划、沟通 11月24日&#xff0c;第一次技术初审 12月7日&#xff0c;互动形态框架确定&#xff0c;时间轴初现 12月15日&#…

前端学习(1434):为什么学习vue

#### 1.2 为什么要学习 Vue传统开发模式: JQueryRequireJS/SeaJSartTemplateGulp/Grunt随着项目业务场景的复杂,传统模式已无法满足需求就出现了Angular/React/Vue等框架- 企业需求 - 主流框架之一(React Angular Vue) - 易用、灵活、高效

oracle 如何创建job,oracle创建job

一、基本语法与MysqL的event事件类似&#xff0c;用来创建数据库的定时任务。DBMS_JOB.SUBMIT(job OUT BINARY_INTEGER,what IN VARCHAR2,NEXT_DATE IN DATE DEFAULTSYSDATE,interval IN VARCHAR2 DEFAULT NULL,no_parse IN BOOLEAN DEFAULT FALSE,instance IN BINARY_INTEGER …

如何简单快速调试高大上的谷歌浏览器

上一篇我们简单的将了在Ubuntu上编译chromium&#xff0c;android content_shell_apk的编译&#xff0c;一切顺利的就能生成apk。但是我们仅仅只是照搬了人家google开源的东西&#xff0c;作为一个开发者我们应带着探索的精神&#xff0c;都说它稳定&#xff0c;速度快。它为什…

前端学习(1435):vue能做什么

#### 1.3 Vue 能做什么- 最大程度上解放了 DOM 操作 - 单页web项目(SinglePageApplication项目,例如[Worktile官网](https://worktile.com/))开发 - 传统网站开发

linux下proc目录,Linux /proc目录详解

3. 例子3.1 /proc/linuxidc.comlinuxidc:~$ ls /proc/1 16819 21242 2180 2494 8768 interrupts partitions116 16820 21244 2181 2524 885 iomem sched_debug11740 17901 21245 21810 2525 acpi ioports scsi1174…

前端学习(1436):vue特点

#### 1.4 核心特性- 双向数据绑定- vue(借鉴了react的虚拟DOM,借鉴了angular双向数据绑定) - 通过 **指令** 扩展了 HTML&#xff0c;通过 **表达式** 绑定数据到 HTML - 解耦视图与数据 - 可复用**组件** - 虚拟DOM - M-V-VM - 数据驱动视图

集合排序求平均

static void Main(string[] args) { ArrayList al new ArrayList(); //定义一个集合Console.Write("请输入人数:"); int n Convert.ToInt32(Console .ReadLine ()); …