ajax node.js

最新推荐文章于 2023-11-06 11:42:20 发布

ningto.com

最新推荐文章于 2023-11-06 11:42:20 发布

阅读量551

点赞数

分类专栏： node.js

本文为博主原创文章，转载请注明来源(泞途 - 泊客网 https://ningto.com)。

本文链接：https://blog.csdn.net/tujiaw/article/details/47701507

版权

node.js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

ajax通过一个编号请求对应的姓名。

node.js服务：

/**
 * Created by tujiaw on 15/8/14.
 */
var express = require('express');
var app = express();

app.use(express.static(__dirname));

var users = [
    {
        number:123456,
        name:"tujiaw"
    },
    {
        number:654321,
        name:"hello"
    },
];

app.get('/query', function(req, res) {
    var number = req.query.number;
    if (number) {
        var isFind = false;
        for (i in users) {
            if (users[i].number == number) {
                res.json(users[i]);
                isFind = true;
                break;
            }
        }
        if (!isFind) {
            res.json({errCode:1, errString:"not find"});
        }
    }
});

app.listen(3200);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <title>Ajax Demo</title>
    <style>
        body, input, button {
            font-size:30px;
            line-height:1.5;
        }

    </style>
</head>
<body>
<label>请输入编号</label>
<input type="text" id="keyword"/>
<button id="search">查询</button>
<p id="searchResult"></p>

<script>
    // ------ XMLHttpRequest ------
//    document.getElementById("search").onclick = function() {
//        var request = new XMLHttpRequest();
//        request.open("GET", "query?number=" + document.getElementById("keyword").value);
//        request.send();
//        request.onreadystatechange = function() {
//            var searchResult = document.getElementById("searchResult");
//            if (request.readyState === 4) {
//                if (request.status === 200) {
//                    searchResult.innerHTML = request.responseText;
//                } else {
//                    searchResult.innerHTML = "status:" + request.status;
//                }
//            } else {
//                searchResult.innerHTML = "read state:" + request.readyState;
//            }
//        }
//    };

    // ------ ajax jquery------
    $('#search').click(function(e) {
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 'query?number=' + $('#keyword').val()
        }).done(function(result) {
            if (result.number) {
                $('#searchResult').html('number:' + result.number + ", name:" + result.name);
            } else if (result.errCode) {
                $('#searchResult').html('errCode:' + result.errCode + ", errString:" + result.errString);
            } else {
                $('#searchResult').html('error');
            }
        })
    });
</script>
</body>
</html>