Question

我在Win XP SP3上使用Node v.0.10.29。

我是Node / Express的新手。我试图通过复制现有的PHP项目来学习Node / Express。 http://stevenjsteele.com/database/

PHP项目允许用户构建项目列表从项目所需的材料，工具或设备表中，没有页面重新加载。

我很难（不明白）是：使用PHP项目，我可以使用select表更改表没有页面重新加载就下拉。这是通过PHP echo和：

完成的

xmlHttp.open("POST","getpage.php?tablename="+str,true);

我用以下内容初始化应用程序：

var express  = require('express'),
request    = require('request'),
requirejs  = require('requirejs'),
mysql      = require('mysql'), // node-mysql module
path        = require('path'),
bodyParser = require('body-parser'),   
app = express();

var mh_connection =  mysql.createConnection({
host : 'localhost',
user : 'root',
password: ''
});  

mh_connection.connect(); 

var materialhandler = router.route('/materialhandler');

materialhandler.get(function(req,res){

selecttools = 'tools';
selectelectrical = 'electrical';
selectequipment = 'equipment';   

mh_connection.query('use materialhandler');

var strQuery = 'SELECT * FROM materialhandler.tools ORDER BY item_id';

mh_connection.query( strQuery, function(err, rows){
if(err) {
throw err;
}else{

tablename='Tools';
res.render('materialhandler',{title:"page title",data:rows});            
res.end("");    
        }
    });                         
});

在我的node / express模板（html）中，我使用：

对于表单内的选择选项下拉列表，我使用：onchange="getData()"

<form id="theForm" action="/materialhandler">
<div class="tablepicker two-thirds column">                 
<select id="selectTable" onchange="getData()" class="selectpicker" name="selectpicker">  
<optgroup>
<option name="" value="">Select Table</option>
<option name="tools" value="tools"><%=selecttools%></option>
<option name="electrical" value="electrical"><%=selectelectrical</option>
<option name="equipment" value="equipment"><%=selectequipment%</option>  
</optgroup>
</select>                        
</div>
</form>

function getData() {
//console.log('begin');
var http = new XMLHttpRequest();
var selectedTable = selectTable.options[selectTable.selectedIndex].value;
http.open("POST", 'http://localhost:3000/materialhandler?selectpicker='+selectedTable, true);

http.setRequestHeader("Content-type", "application/x-www-form urlencoded");
http.onreadystatechange = function() {
    console.log('onreadystatechange');
    if (http.readyState == 4 && http.status == 200) {
        //alert(http.responseText);
    }
    else {
        console.log('readyState=' + http.readyState + ', status: ' + http.status);
    }
}

//console.log('sending...')
http.send(selectedTable);
console.log(selectedTable)
//console.log('end'); 
$('#theForm').submit(); 
}

在终端窗口中，console.log显示所选表格。

我试图在没有页面重新加载的情况下更改表格。

正如我在开始时所说，我才开始学习这种范式。任何帮助或指向正确的方向表示赞赏。

感谢。

Answer 1

$('#theForm').submit();导致您的网页重新加载，但不是这样做，您可以直接使用javascript发布您的帖子请求。 jQuery将是XMLHttpRequest的更好替代品。

您可以连接一些javascript来监听getData()更改，而不是您的select功能，并将其发布到您的服务器，如下所示：

$('#selectTable').on('change', function() {
    $.post("materialhandler?selectpicker=" + $(this).val());
}

Nodejs / Express noob更新页面视图无重新加载

1 个答案: