说明:在代码中已经做好了注释,细看理解再实践,这里用的后端是python,其他语言逻辑是一样的
1、版本one
前端(设置端口与后端不同,与后端不再一个频道~,跨域了):
<script> window.onload=function () { $.ajax({ url: 'http://127.0.0.1:9000/ajaxjupyter',//http://127.0.0.1:9000/ajaxjupyter?callbackfun=jsonpCallback&temp_result=temp_result type: 'get', dataType: 'jsonp', jsonp:"callbackfun",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,如果定义了就success:function(){}就失效 data: { temp_result:“123123123” }, }); } function jsonpCallback(data) {//处理返回信息的函数 console.log(data) } </script>
后端(端口9000,与前端不再一个频道~,跨域了):
class AjaxjupyterHandler(HomeHandler): def get(self): temp_result = self.get_argument("temp_result", "") callbackfun = self.get_argument("callbackfun", "") #接受callback的名字callbackfun=jsonpCallback res = dict() res["status"] = 0 res["info"] = "添加成功" res["temp_result"] = temp_result self.set_header("content-type", "application/json") data = json.dumps(res) self.write(''+callbackfun+'('+data+')')
2、版本two(简化版)
前端(与后端不再一个频道~,跨域了):
<script> window.onload=function () { $.ajax({ url: 'http://127.0.0.1:9000/ajaxjupyter', //http://127.0.0.1:9000/ajaxjupyter?callback=一串随机数就在不用关心是什么,这个随机数是用来调用success:function(){}的&temp_result=temp_result type: 'get', dataType: 'jsonp', data: { temp_result:“12312312312” }, success:function (data) { console.log(data) } }); } </script>
后端python版本(与前端不再一个频道~,跨域了):
class AjaxjupyterHandler(HomeHandler): def get(self): temp_result = self.get_argument("temp_result", "") callback_test = self.get_argument("callback", "") # 前端没定义jsonp的值,是默认的jsonp=callback,这里接收的参数叫callback就行,其值赋给callback_test是一串随机数 res = dict() res["status"] = 0 res["info"] = "添加成功" res["temp_result"] = temp_result self.set_header("content-type", "application/json") data = json.dumps(res) self.write(''+callback_test+'(' + data + ')')