关于Node.js 的Express框架介绍,推荐看菜鸟教程的Express框架,很适合入门,这里不再赘述,这里主要讲一下Express框架与html之间如何进行数据传递

我采用的是JQuery的Ajax()向后台传参方式(url传参)

1、Type属性为Get时:

(1)第一种方法:(通过url传参)

functionGetQuery(id) {if (id ==1||id==7) {var name = "语文";

$.ajax({

url:"../ajaxHandler/ChartsHandler.ashx?id="+id+"&name="+name +"",

type:"get",

success:function(returnValue) {

$("#cId").val(returnValue);

},

error:function(returnValue) {

alert("对不起!数据加载失败!");

}

})

}

}

View Code

(2)第二种方法:(通过data传参)

functionGetQuery(id) {if (id ==1||id==7) {var name = "语文";

$.ajax({

url:"../ajaxHandler/ChartsHandler.ashx",

type:"get",//获取某个文本框的值

//data: "id=" + id + "&name=" + $("#name").val(),

data: "id=" + id + "&name=" +name,//或者(注意:若参数为中文时,以下这种传参不会造成后台接收到的是乱码)

//data: {

//"id": id,

//"name": name

//},

success: function(returnValue) {

$("#cId").val(returnValue);

},

error:function(returnValue) {

alert("对不起!数据加载失败!");

}

})

}

}

View Code

(2)后台获取参数:(.ashx一般处理程序)

public voidProcessRequest(HttpContext context)

{

string 科目Id= context.Request.QueryString["id"];

string 科目名称= context.Request.QueryString["name"];

}

View Code

2、Type属性为post时:

(1)第一种方法:(通过url传参)

functionGetQuery(id) {if (id ==1||id==7) {var name = "语文";

$.ajax({

url:"../ajaxHandler/ChartsHandler.ashx?id="+id+"&name="+name +"",

type:"post",

success:function(returnValue) {

$("#cId").val(returnValue);

},

error:function(returnValue) {

alert("对不起!数据加载失败!");

}

})

}

}

View Code

能看到无论是post还是get它们的方法都大同小异,ajax中传递的参数不止这些,还可以有很多具体参见博客http://blog.csdn.net/ailo555/article/details/48577721

二、接下来说一下express框架和ajax

我采用的是“通过url传参”,dataType为“json”

具体示例如下:

functionquery(myData, successFunc, isAsync) {

$.ajax({

dataType:"json",

url:"http://localhost:8081/",

type:"POST",

data: {"y1":myData.getNorthWest().lng,"y2":myData.getSouthEast().lng,"x1":myData.getSouthEast().lat,"x2":myData.getNorthWest().lat},

async: isAsync,

success: successFunc,

error:function(xhr, status, error) {

console.log(‘Error: ‘ +error.message);

$(‘#lblResponse‘).html(‘Error connecting to the server.‘);

}

});

}

相对应的后台的处理方式是:

//此为部分代码,无关内容略去

let express = require(‘express‘);

let app=express();

let bodyParser= require(‘body-parser‘);//创建 application/x-www-form-urlencoded 编码解析

var urlencodedParser = bodyParser.urlencoded({ extended: false});

app.use(require(‘body-parser‘).urlencoded({limit: ‘5mb‘, extended: true}));

app.post(‘/‘,function(req,res,next) {  //此处对应 urlhttp://localhost:8081/ 如果是 http://localhost:8081/apple.htm 则应该是 app.get(‘/apple.htm‘,function(){……});

db.query(req.body,res,client); });  //req.body就是传来的data,上面的body-parser一定要添加

html间数据传送,Express框架与html之间如何进行数据传递(示例代码)相关推荐

  1. 8086CPU指令系统——数据传送类指令

    数据传送(Data Transfer)类指令是指令系统中用的最多的一类指令,也是条数最多的一类指令,常用于将原始数据.中间运算结果.最终结果及其它信息在CPU(中央处理器)的寄存器和存储器之间进行传送 ...

  2. 计算机组成原理xchg,8088数据传送指令-计算机组成原理与汇编语言-电子发烧友网站...

    3.2.1 数据传送指令 1. MOVOPRD1,OPRD2 MOV是操作码,OPRD1和OPRD2分别是目的操作数和源操作数.该指令可把一个字节或一个字操作数从源地址传送到目的地址. 源操作数可以是 ...

  3. 【汇编语言】通用数据处理指令——数据传送类指令

    通用数据处理指令--数据传送类指令 文章目录 通用数据处理指令--数据传送类指令 一.MOV指令 1.数据长度 2.传送方式 3.常见错误 二.XCHG指令 1.数据长度 2.空操作指令NOP(no- ...

  4. 计算机组成原理学习笔记————计算机指令,MIPS指令集,存储器操作数,数据传送指令,取数存数指令

    计算机语言 现在计算机编程常用的语言是C,C++,Java等高级语言,但计算机第层是将高级编程语言的代码编译成二进制代码形式的指令才能执行.所以计算机语言中的基本单词是二进制形式的指令,一台计算机的全 ...

  5. asp后台调用产品数据_后台产品经理,需掌握这些数据交互知识

    人们每天都在接收信息和发送信息,在传递信息的过程中,明白对方要表达的意思.数据也是如此,在系统交换数据的过程中,就伴随着数据交互.本篇文章将为大家具体分析前端和后台的数据交互与协议. 本文所说的&qu ...

  6. sex 无需下载_js读取本地json格式文件数据的几种实现方法,内有vue读取json示例代码。...

    方法一:通过getJSON实现 getJSON是jquery提供的读取json格式文件的方法 首先我们将html中引入jquery,可以通过百度CDN引入,代码如下: 然后就可以在script中使用g ...

  7. Node.js Express 框架 Express

    Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express 可以快速 ...

  8. opengl顶点数据传送和着色器处理(vao,vbo)

    OpenGL学习脚印: 顶点数据传送和着色器处理1 写在前面 本节内容翻译和整理自<Learning Modern 3D Graphics Programming>Chapter1内容.作 ...

  9. 【Computer Organization笔记26】总线 bus :多个部件之间进行数据传送的共享通道,总线设计 - 总线仲裁、数据传输模式、提高总线性能

    本次笔记内容: P51 计算机组成原理(51) P52 计算机组成原理(52) 我的计组笔记汇总:计算机组原理成笔记 视频地址:计算机组成原理 清华大学刘卫东 全58讲 国家精品课程 1080P 更完 ...

最新文章

  1. Clubhouse 本土化之后干得过“顶流”抖音快手吗? | 极客视频
  2. 【编程题目】输入一个单向链表,输出该链表中倒数第 k 个结点
  3. 拷贝Python对象、浅拷贝、深拷贝
  4. 【5分钟搞定】如何将py打包成exe可执行文件
  5. C#垃圾回收机制(GC)
  6. 【转】04.Dicom 学习笔记-DICOM C-Move 消息服务
  7. 作者:肖戎(1974-),女,广东省地方税务局高级工程师、副处长。
  8. iOS学习笔记11 多线程入门
  9. indesign拖进去颜色变灰_在 InDesign 中管理颜色
  10. 华为matepad使用鸿蒙系统,首发鸿蒙系统!华为MatePad采用骁龙+麒麟双芯片版本,哪款更香?...
  11. Cookie、Session、Token、RefreshToken
  12. Stata12文件转码为Stata15格式解决办法
  13. 阿狸html浪漫代码,index.html
  14. JAVAFX输入法的实现
  15. 全国计算机等级证书和职业资格证书(计算机)哪个好
  16. oracle cogs 科目,OM模块关于COGS的生成
  17. 浏览器网页怎么实现文档、小票自动静默打印?【深度】
  18. RK3568J edp屏幕点亮 时序调试总结
  19. jpg怎么压缩大小?jpg图片如何压缩大小kb?
  20. vmware安装虚拟机加配置虚拟机网卡

热门文章

  1. 记录腾讯云中矿机病毒处理过程(重装系统了fu*k)
  2. Hadoop之Flume详解
  3. 数据特征分析:2.对比分析
  4. VUE2第五天学习---自定义指令
  5. 【Spring学习笔记-MVC-17】Spring MVC之拦截器
  6. 自己动手,实现一种类似ListT的数据结构(二)
  7. 坐地铁的好心MM们小心啊,周末刚经历了一个地铁新骗术
  8. DBlink的创建与删除
  9. thinkCMF----导航高亮显示
  10. 移动硬盘提示无法访问设备硬件出现致命错误,导致请求失败的资料寻回方案