当前位置: 代码迷 >> 综合 >> jsonp nodejs跨域传输
  详细解决方案

jsonp nodejs跨域传输

热度:36   发布时间:2023-12-13 23:03:26.0

Nodejs端代码:

这里是我整个的后端代码,前端只请求了一个 prodess_get,所以只要看那一部分代码即可。

var express = require('express');
var urlLib = require('url');
var app = express();app.use('/public', express.static('public'));app.get('/index.html', function (req, res) {res.sendFile( __dirname + "/" + "index.html" );
})
app.get('/login.html', function (req, res) {res.sendFile( __dirname + "/" + "login.html" );
})
app.get('/register.html', function (req, res) {res.sendFile( __dirname + "/" + "register.html" );
})
//数据库访问
app.get('/mysqlget', function (req, res) {})
//登录
app.get('/login_get', function (req, res) {console.log('--------------------------visit mysql----------------------------');var mysql  = require('mysql');  var connection = mysql.createConnection({     host     : 'localhost',       user     : 'root',              password : '123456',       port: '3306',                   database: 'test' }); connection.connect();var  sql = 'SELECT * FROM user where name = ? and pass = ?';var  addSqlParams = [req.query.first_name, req.query.last_name];//查connection.query(sql,addSqlParams,function (err, result) {if(err){console.log('[SELECT ERROR] - ',err.message);return;}if(result.length > 0){console.log('{ msg: "用户 "' + req.query.first_name + '"登陆成功" }');res.sendFile( __dirname + "/" + "index.html" );}else{console.log('{ msg: "用户 "' + req.query.first_name + '"登陆失败" }');}});connection.end();})
//账号注册
app.get('/register_get', function (req, res) {var mysql  = require('mysql');  var connection = mysql.createConnection({     host     : 'localhost',       user     : 'root',              password : '123456',       port: '3306',                   database: 'test' }); connection.connect();var  addSql = 'INSERT INTO user(name,pass) VALUES(?,?)';var  addSqlParams = [req.query.first_name, req.query.last_name];//增connection.query(addSql,addSqlParams,function (err, result) {if(err){console.log('[INSERT ERROR] - ',err.message);console.log('插入数据失败');return;}else{console.log('插入数据成功!');}        console.log('--------------------------INSERT----------------------------');//console.log('INSERT ID:',result.insertId);        console.log('INSERT ID:',result);        console.log('-----------------------------------------------------------------\n\n');  });connection.end();
})
app.get('/process_get', function (req, res) {console.log('--------------------------process_get----------------------------');var mysql  = require('mysql');  var connection = mysql.createConnection({     host     : 'localhost',       user     : 'root',              password : '123456',       port: '3306',                   database: 'test' }); connection.connect();var  sql = 'SELECT * FROM user';//var  addSqlParams = [req.query.name, req.query.pass];//查connection.query(sql,function (err, result) {if(err){console.log('[SELECT ERROR] - ',err.message);return;}var response = {"first_name":"diyunlong","last_name":"jdkal;fld"};var parms = urlLib.parse(req.url,true);console.log(parms);console.log(result);strResult =JSON.stringify(result);console.log(strResult);res.jsonp(strResult);// res.end(res.json(strResult));/* var strResult = {code:201,message:"执行失败额,玮哥哥"};strResult = JSON.stringify(strResult);res.json(strResult);*/});connection.end();// 输出 JSON 格式/*var response = {"first_name":req.query.first_name,"last_name":req.query.last_name};console.log(response);res.end(JSON.stringify(response));*/
})var server = app.listen(8081, function () {var host = server.address().addressvar port = server.address().portconsole.log("应用实例,访问地址为 http://%s:%s", host, port)})

前端代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>登录</title><script src="js/jquery-3.3.1.min.js"></script></head><body><p>登录</p><form action="http://127.0.0.1:8081/process_get" method="GET">First Name: <input id="name" type="text" name="first_name">  <br>Last Name: <input id="pass" type="text" name="last_name">  <br /><input type="submit" value="Submit"></form><button id="submit_btn"> 提 交 </button></body><script>function submitclick(){var name1 = document.getElementById("name").value;var pass1 = document.getElementById("pass").value;$.ajax({			async:true,	cache:false,		url: 'http://127.0.0.1:8081/process_get',			type: 'get',			dataType: 'jsonp',timeout: 5000,			 contentType: 'application/json; charset=utf-8',success:function(result){			
//					alert("succ")		var datas = JSON.parse(result);console.log(datas[0].name)},			  error:function(res){	console.log(res);alert("res")			}			});}document.getElementById("submit_btn").onclick = submitclick;</script>
</html>

这里推荐去看一篇文章:https://www.jianshu.com/p/3179631bd7bd

还有一篇:https://blog.csdn.net/dai_jing/article/details/46564627