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

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

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

1、Type属性为Get时:

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

jia.gif

jian.gif

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传参)

jia.gif

jian.gif

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一般处理程序)

jia.gif

jian.gif

public voidProcessRequest(HttpContext context)

{

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

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

}

View Code

2、Type属性为post时:

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

jia.gif

jian.gif

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一定要添加

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

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

相关文章

数字图像去噪典型算法及matlab实现

图像去噪是数字图像处理中的重要环节和步骤。去噪效果的好坏直接影响到后续的图像处理工作如图像分割、边缘检测等。图像信号在产生、传输过程中都可能会受到噪声的污染,一般数字图像系统中的常见噪声主要有:高斯噪声(主要由阻性元器件内部产…

pat1100. Mars Numbers (20)

1100. Mars Numbers (20) 时间限制400 ms内存限制65536 kB代码长度限制16000 B判题程序Standard 作者CHEN, YuePeople on Mars count their numbers with base 13: Zero on Earth is called "tret" on Mars.The numbers 1 to 12 on Earch is called "jan, feb, …

【USACO1.1】Broken Necklace

题意 一个环形项链,有rbw三种珠子,r代表red,b代表blue,w代表white,从任意一个位置断开,两端分别取珠子,同一端取的珠子要相同颜色,w可以染成想要的颜色,即既可当作r也可以…

html+注释格式化,使用xml注释来生成格式化的html输出

我试图从我在xml文件中的注释中生成一个格式良好的html文档。目前我有一个xml文件,用于生成xml表格的html列表。为了让我添加有关表格的评论,我手动将注释添加到输出html文件中。使用xml注释来生成格式化的html输出我想如果可能将html代码放在xml文件中作…

图像增强-图像锐化

图像锐化主要影响图像中的低频分量,不影响图像中的高频分量。 图像锐化的主要目的有两个: 1.增强图像边缘,使模糊的图像变得更加清晰,颜色变得鲜明突出,图像的质量有所改善,产生更适合人眼观察和识别的图像…

[译]git revert

git revert git revert用来撤销一个已经提交了的快照. 但不是从项目历史中移除这个commit, 而是生成一个新的commit, 老的commit还是保留在历史项目里面的. 这样做的好处是防止了项目丢失历史. 用法 git revert <commit>生成一个新的commit, 撤销老的<commit>的所有…

图像二值化算法总结

****************************************************************************************************************************************** 红&#xff1a;数字图像处理视频教程&#xff08;两部&#xff09; {中科院版36讲视频教程 电子科大版70讲视频教程&#xff…

html 替换反斜杠,在URL直接替换反斜杠反斜杠

我们有一个系统&#xff0c;基于Moodle的平台&#xff0c;在这里的文件是这样引用&#xff1a;在URL直接替换反斜杠反斜杠的http&#xff1a;// [服务器] /file.php/3/LR4/info/ index.html的现在&#xff0c;这个伟大的工程&#xff0c;但是我们的一些老师错误地使用落后的斜杠…

VMware桥接模式无法连网

2019独角兽企业重金招聘Python工程师标准>>> #VMware桥接模式无法连网 在VMware上装了个CentOS7&#xff0c;使用桥接模式连网&#xff0c;开始使用的时候没有问题&#xff0c;可以正常上网。最近打开的时候发现上不了网了&#xff0c; 使用ifconfig查看也没有分配到…

Java 7 中 NIO.2 的使用——第四节 文件和目录

Files类提供了很多方法用于检查在于你真正实际去操作一个文件或目录。这些方法强烈推荐&#xff0c;也非常有用&#xff0c;也能避免很多异常的发生。例如&#xff0c;一个很好的习惯就是在你试着移动一个文件从一个地方到另一个地方的时候&#xff0c;先检查文件是否存在。 检…

计算机二级access知识点6,2019年计算机二级ACCESS考试知识点:关系数据模型

【导语】2019年计算机二级考试备考正在进行中&#xff0c;为了方便考生及时有效的备考&#xff0c;那么&#xff0c;无忧考网为您精心整理了2019年计算机二级ACCESS考试知识点&#xff1a;关系数据模型&#xff0c;欢迎大家的关注。如想获取更多计算机二级考试的备考资料&#…

乘方取模计算(模幂计算)

乘方取模计算也称为模幂计算&#xff0c;在密码系统中经常使用&#xff0c;是不可缺少的。 使用本程序可以解HDU2035&#xff0c;只需要考虑输入和输出。 /** 乘方取模** 已知给定的正整数a、n和m&#xff0c;计算x的值&#xff0c;a^n x (mod m)。** 二分法用在这里也很有效果…

Moldflow中文版注塑流动分析案例导航视频教程

http://item.taobao.com/item.htm?spma1z10.5.w4002-9510581626.18.30lDTO&id43054534418 QQ&#xff1a;2911984429 http://aidem.lingw.net/

Jaxb annotation使用

JAXB&#xff08;Java Architecture for XML Binding) 是一个业界的标准&#xff0c;是一项可以根据XML Schema产生Java类的技术。该过程中&#xff0c;JAXB也提供了将XML实例文档反向生成Java对象树的方法&#xff0c;并能将Java对象树的内容重新写到XML实例文档。从另一方面来…

湖北大学计算机袁云,暑期走访不停歇 远赴异地送关怀——学校慰问离退休教职工和校友...

不畏酷暑送清风&#xff0c;心常为老怀关爱。7月至8月&#xff0c;正值高温时节&#xff0c;校领导和各单位负责人根据学校党委的安排&#xff0c;赴深圳、广州、北京、上海等地走访慰问70岁以上离退休教职工和部分校友&#xff0c;把学校的问候和祝福送到他们身边。“对老同志…

MATLAB各类函数详细讲解 simulike系统仿真分析

http://item.taobao.com/item.htm?spma230r.1.14.40.yWjJFw&id43113292964&ns1&abbucket2&_uk10ekfuf6120#detail Matlab基本操作函数 SIMULINK仿真函数 插值与拟合函数视频教程 符号运算函数视频教程 概率统计函数视频教程 级数与微积分函数视频教程 矩阵运…

Github Coding Developer Book For LiuGuiLinAndroid

Github Coding Developer Book For LiuGuiLinAndroid 收集了这么多开源的PDF&#xff0c;也许会帮到一些人&#xff0c;现在里面的书籍还不是很多&#xff0c;我也在一点点的上传&#xff0c;才上传不到一半&#xff0c;没办法&#xff0c;库存太多了 觉得全部pull麻烦的话&…

#个人博客作业week2——结对编程伙伴代码复审

General 1.程序能够顺利地运行。程序通过命令行输入&#xff0c;能够向对应的文件中输出符合要求的题目和答案。程序能够根据用户的不同选择&#xff0c;进行题目的生产或答案的校验&#xff0c;生成出的题目符合参数要求和项目的查重等各种要求&#xff0c;答案校验准确迅速。…

Linux设备驱动程序(第三版)/深入理解计算机系统(原书第2版)/[Android系统原理及开发要点详解].(韩超,梁泉)百度云盘下载

文档下载云盘连接&#xff1a;http://pan.baidu.com/s/1dDD2sgT 更多其他资料&#xff0c;请关注淘宝&#xff1a;http://shop115376623.taobao.com/ http://item.taobao.com/item.htm?spma230r.1.14.3.ArS64K&id43025290175&ns1&abbucket2&_uk10ekfuf6187#d…

个人用户上网需要有计算机电话线,个人用户上网需要有计算机、电话线、用户账号和口令,以及______。...

_条形码按照使用目的可分为()、()和()。简述市场定位的步骤。植物、真菌、藻类和原核细胞的细胞外基质是用粪便隐血试验鉴别消化道良性与恶性肿瘤所致的出血&#xff0c;有价值的是从长期来看,在纸币制度下或纸币本位下,( )是决定汇率的基础。最常引起肺心病的疾病是从长期来看…