Express架構與html之間如何進行資料傳遞

標籤：.ajax   function   url   post   pos   建立   value   介紹   splay   

關於Node.js 的Express架構介紹，推薦看菜鳥教程的Express架構，很適合入門，這裡不再贅述，這裡主要講一下Express架構與html之間如何進行資料傳遞

我採用的是JQuery的Ajax()向後台傳參方式 （url傳參）

一、首先先講一下jQuery的Ajax()向後台傳參（參考http://blog.csdn.net/ailo555/article/details/48859425）

1、Type屬性為Get時：

(1)第一種方法：（通過url傳參）

function GetQuery(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傳參）

function GetQuery(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 void ProcessRequest(HttpContext context)        {            string 科目Id = context.Request.QueryString["id"];            string 科目名稱 = context.Request.QueryString["name"];            }

View Code

2、Type屬性為post時：

(1)第一種方法：（通過url傳參）

function GetQuery(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”

具體樣本如下：

function query(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) {　　//此處對應 url http://localhost:8081/  如果是 http://localhost:8081/apple.htm 則應該是 app.get(‘/apple.htm‘,function(){……})；

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

 

Express架構與html之間如何進行資料傳遞