Express框架與html之間如何進行數據傳遞

關於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("對不起！數據加載失敗！");
             }
         })
     }
}

(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("對不起！數據加載失敗！");
             }
         })
     }
}

(2)后台獲取參數：（.ashx一般處理程序）

public void ProcessRequest(HttpContext context)
        {
            string 科目Id = context.Request.QueryString["id"];
            string 科目名稱 = context.Request.QueryString["name"];
            }

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("對不起！數據加載失敗！");
             }
         })
     }
}

能看到無論是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一定要添加