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