- 第一种：jsonp
参看用nodejs实现json和jsonp服务 - 第二种：res.wirteHead
node部分
var http = require('http')
var url = require('url')
var querystring = require('querystring')
var port = 9000
var jsonData = { 'name': 'xiaohong', 'job': 'daboss' }
http.createServer(function (req, res) {
// var pathStr = url.parse(req.url)
res.writeHead(200, {
'Content-Type': 'application/json;charset=utf-8',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*'
})
var type = req.method;
if (type == 'GET') {
res.end(JSON.stringify(jsonData))
} else if (type == 'POST') {
var str = '';
req.on('data',function(chunk){
str += chunk;
})
req.on('end',function(){
var data = querystring.parse(str)
console.log(data)
if(data.name == "" || data.job == ""){
res.end(JSON.stringify({'success':true,msg:'填写有误'}))
}else{
res.end(JSON.stringify({'success':false,msg:'添加成功'}))
}
})
}
}).listen(port, function () {
console.log('server is runing at port ' + port)
})重点部分是添加响应头信息
res.writeHead(200, {
'Content-Type': 'application/json;charset=utf-8',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*' //可以是*，也可以是跨域的地址
})在ajax里不需要做任何特殊处理dataType仍旧是json
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a class="click" href="javascript:get_jsonp()">click me</a>
<p class="result"></p>
<label>姓名:</label>
<input class="name" type="text" />
<label>职位：</label>
<input class="job" type="text">
<a class="add" href = "javascript:add()">添加</a>
<p class="msg"></p>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function get_jsonp() {
$.ajax({
type: 'get',
dataType: 'json',
url: 'http://localhost:9000',
success: function (data) {
$('.result').html('my name is ' + data.name)
},
error: function (err) {
$('.result').html('出错了 ' + err.status)
}
})
}
function add(){
$.ajax({
type:'post',
url:'http://localhost:9000',
dataType:'json',
data:{
'name':$(".name").val(),
'job':$(".job").val()
},
success:function(data){
$('.msg').html(data.msg)
},
error:function(err){
$('.msg').html('出错了'+err.status)
}
})
}
</script>
</body>
</html>