nodejs 从后台获取的json对象要如何填充到文本框中?

nodejs 从后台获取的json对象要如何填充到文本框中?,第1张

function getUser() {

    $.ajax({

        url: '/user/getUser',

        method: 'post',

        dataType:'JSON',

        contentType: 'application/json',

        success: function (res) {

            res = toJson(res)  //我觉得还是把返回的对象进行JSON转换

            if (200 === res.CODE) {

                var data = res.DATA//这边的data属性是object

                /*

                * 情况一:假如返回的JSON数据是这样的

                * {"status":"1", "msg":"success", "data": [{"accountName": "123"}]}

                * */

                $("#AccountName").val(data[0].AccountName) //这儿这么写就是设置内容

                /*

                 * 情况二:假如返回的JSON数据是这样的

                 * {"status":"1", "msg":"success", "data": [{"accountName": "123"},{"accountName": "123"},[n个...]]}

                 * */

                $.each(data, function(key, value){

                    //循环遍历,key在这里就是对应的"accountName",val在这里就是对应的"accountName"的值"123"

                })

            }else {

                def.resolve(null)

            }

        },

        error: function (err) {

            layer.alert("查询失败,请重试~", {icon: 5, title: '警告'})

            def.resolve(null)

        }

    })

}

function toJson(obj){

    if(Object.prototype.toString.call(obj) === '[object Object]') return obj

    return JSON.parse(obj)

}

nodejs把数据存到mongodb里方法:

首先,创建一个数据库保存用户信息。

在这个数据库中创建一个名为 users 的集合,并插入一条用户信息。当前没有 users 集合,mongodb 会直接创建它。

>db.users.insert( { "userId":1, "name":"tom", "email":"tom@nodejs.org" })

查找信息可以使用 find 或者 findOne,区别在于 findOne 只会返回一个结果。

db.users.findOne( {"userId": 1})

返回的结果:

{

"_id" : ObjectId("5413be6e9e1c9f9c4386756d"),

"userId" : 1,

"name" : "tom",

"email" : "tom@nodejs.org"

}

驱动程序

编辑 package.json, 添加对于 mongodb 的引用。

{

"name": "express-api",

"version": "0.0.1",

"dependencies": {

"express": "2.5.9",

"ejs": "0.4.2",

"mongodb": "1.4.1"

}

}

重新 npm install 安装 mongodb 的驱动。

使用 MongoDB 数据库

修改代码,首先 require mongodb 模块,然后连接到 mongodb 数据库。

var mongo = require("mongodb")

var express = require("express")

var app = express.createServer()

app.set("view engine", "ejs")

app.set("views", __dirname + "/views")

app.set("view options", { layout: false })

app.get("/", function (request, response) {

response.render("index")

})

app.get("/user/:id", function (request, response) {

var id = request.params.id

console.log(id)

app.users.findOne({ "userId": +id }, function (error, doc) {

if (error) return next(error)

response.json(doc)

})

})

// connect mongodb

var server = new mongo.Server("127.0.0.1", 27017)

var db = new mongo.Db("members", server, {safe:true }).open(function (error, client) {

if (error) throw error

console.log("\033[96m + \033[39m connected to mongodb")

app.users = new mongo.Collection(client, "users")

client.ensureIndex("users", "userId", function (error) {

if (error) throw error

console.log("\033[96m + \033[39m ensured index.")

console.log("Web Server listening ......")

app.listen(3000)

})

})

注意现在是到数据库中查找用户。id 前面的 + 用来将表单中的字符串类型数据转换为需要的数字类型。

app.users.findOne({ "userId": +id }, function (error, doc) {

if (error) return next(error)

response.json(doc)

})

一、JSON和JSONP

JSONP的全称是JSON with Padding,由于同源策略的限制,XmlHttpRequest只允许请求当前源(协议,域名,端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在相应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式成为JSONP。

由此我们可以看出两者的区别:

json: 一种轻量级的数据格式。

jsonp:为实现跨域,而采用的一种脚本注入方法。

备注:要了解更多json,可以参见我原先写的一篇介绍json的文章:《JSON那些事》

二、实现

为了简单起见,我们要读取数据都是

var data = {'name': 'jifeng', 'company': 'taobao'}

1. 服务器端代码:

var http = require('http')var urllib = require('url')var port = 10011var data = {'name': 'jifeng', 'company': 'taobao'}

http.createServer(function(req, res){ var params = urllib.parse(req.url, true)

console.log(params) if (params.query &&params.query.callback) {//console.log(params.query.callback)

var str = params.query.callback + '(' + JSON.stringify(data) + ')'//jsonpres.end(str)

} else {

res.end(JSON.stringify(data))//普通的json }

}).listen(port, function(){

console.log('server is listening on port ' + port)

})

2. 游览器端代码,为方便起见,我直接用了jquery的方法

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

</head>

<body>

<script type="text/javascript">

function get_jsonp() {

$.getJSON("http://10.232.36.110:10011?callback=?",

function(data) {

$('#result').val('My name is: ' + data.name)

})

}

</script>

<a href="javascript:get_jsonp()">Click me</a><br />

<textarea id="result" cols="50" rows="3"></textarea>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7953936.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存