4

我想创建一个小型数据库或项目集合——只有大约 30 个——你可以单独使用 JavaScript 进行搜索。

例如 - 假设我有 20 间房屋出租，我希望学生能够搜索他们有 4 或 5 个房间的房屋。

我可以像这样创建房屋对象：

function house(address, rooms, bathrooms){
this.address=address;
this.rooms=rooms;
this.bathrooms=bathrooms;
}

var property1 = new house("10 Park Way","4","1");
var property2 = new house("61 Park Avenue", "5","2");
var property3 = new house("585 Park Road", "3", "1");

我希望能够通过“房间”搜索此列表并显示地址、房间数量和浴室数量。

注意：我知道我编写它的方式不是数组，但我将使用数组，因此我可以使用 for 循环循环遍历属性并按以下方式评估它们：

if(property[i].rooms == roomquery){
    document.write('Address:' + property[i].address + '.<p>');        
    document.write('Address:' + property[i].rooms + '.<p>');
    document.write('Address:' + property[i].bathrooms + '.<p>');
}

简单吧？

除了我不知道如何将 roomquery 变量从我的表单传递到我的脚本。

该过程的顺序是：搜索页面 -> 结果页面 -> 详细信息页面

用户搜索并获得结果列表。可以选择在结果页面上更详细地查看属性，将数据从结果传递到页面以在详细信息页面上重新格式化。当然，数组中的每个属性都会有更多数据，我可以将这些数据提供给不可见标签的 id 或 value 属性，以便收集并重新提交到详细信息页面上的脚本。

我知道我可以用 PHP 做到这一点，而且我知道我可以通过将 roomquery 变量发送到同一页面上的脚本并在搜索页面上进行更改来做到这一点。

但我想做的是使用 GET 或任何其他方法将数据（只是一个数字）发送到结果页面上的脚本，因为这样我可以从将发送到搜索的任何页面运行搜索页。

我已经在互联网上搜索了这个，我没有想出任何东西。一定有办法的。

4

5 回答 5

2

为什么不使用 JSON，下面是一个示例：

var json = {
    "house": [{
            "address": "10 Park Way",
            "num1": 4,
            "num2": 1},
        {
            "address": "61 Park Avenue",
            "num1": 5,
            "num2": 2},
        {
            "address": "585 Park Road",
            "num1": 3,
            "num2": 1}]

};

var houses = json["house"];
for(var i=0; i < houses.length; ++i) {
    var houses_i = houses[i];
    if(houses_i["address"] == '10 Park Way') {
        alert('Found WAY!!!');
        break;
    }
}
于 2012-11-28T17:33:54.297 回答
1

由于您完全在客户端处理静态房屋列表，因此您可以使用少量基本 Javascript 在单个页面上完成此操作。无需提交表格。

  1. 设置您的基本 HTML 表单，并设置显示结果的位置：

    <form>
    <select name="rooms"></select>
</form>
<div id="results"></div>

  2. 编写一些 javascript 来监听 change 事件（此示例使用 jQuery），进行搜索并输出结果：

    var houses = [/* ... */]
$('select[name=rooms]').on('change', function () {
    var rooms = $('select[name=rooms]').val();

    $('#results').empty();

    for (var i = 0; i < houses.length; i++) {
        if (houses[i].rooms == rooms) {
            $('#results').append('<p>Address: ' + houses[i].address + '</p>');
        }
    }
});

你可以得到更多的花哨并添加比这更多的结构，但这应该涵盖基础知识。

如果您决定包含页面提交，则可以通过解析从查询字符串中检索参数window.location.search。我认为将其保留在一页上会更好。

于 2012-11-28T17:36:59.553 回答
0

您可以使用简单的函数（例如此处描述的函数）从请求查询字符串中解析值。

为了创建查询字符串，您可以拥有一个带有隐藏输入的表单：

<form action="myresultspage.html" method="get">
    <input type="hidden" id="property" name="property" value="" />
    <input type="submit" />
</form>

您的 JS 可以使用类似document.getElementByid('property').value = newValue. 提交此表单后，您将被重定向到 URL myresultspage.html?property=newValue。

于 2012-11-28T17:24:18.483 回答
0

不是一个完整的答案，但您是否考虑过使用 Web SQL？这允许您对已在 JavaScript 中导入的数据执行 SQL 查询。

于 2012-11-28T17:18:12.293 回答
0

您只需要从 onchange 事件中调用您的搜索功能：

<script type="text/javascript">
function search(roomquery) {
// put your for loop here
}
</script>

rooms: <select onchange="search(this.options[selectedIndex].text);">
    <option>1</option>
    <option>2</option>
</select>​

见小提琴：http: //jsfiddle.net/H9jkd/

于 2012-11-28T18:01:09.213 回答