1. 程式人生 > >Express框架與html之間如何進行數據傳遞

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

enc end 加載 context 菜鳥 添加 如果 post lose

關於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之間如何進行數據傳遞