发表于: 2016-10-04 23:58:39
6 2526
今天完成的事情:
用JQuery的AJAX完成task5学生报名和查询功能;
明天计划的事情:
陆续完成任务5、6,文档所有功能
遇到的问题:
纯html表单可以直接与服务器交互数据,因为浏览器的同源策略(不用代理:JSONP、WebSocket、CORS),AJAX涉及到跨域问题,不需要服务器配合设置的情况下,用Nginx反向代理欺骗浏览器,对Ngnix的认识仅停留在CSS时照着教程设置的阶段,到task5时才了解了一下Nginx基本配置的问题;
1、Nginx设置:
配置虚拟服务器
sever {
....
location xxxxxx { //代理地址路径
proxy_pass http://http://115.29.203.53:10013/; //设置被代理服务器的端口或套接字,以及URL
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
以上三行,目的是将代理服务器收到的用户的信息传到真实服务器上
}
......
}
2、js文件设置url:
3、访问设置(必须为Nginx设置的root文件夹内;不能用本机的绝对地址,如:E:/XX/XXX,)
昨天配置和代码已经设置好了,但是这一步没注意,老习惯直接右键后用浏览器打开html文件,不论怎么改都报错
如果不使用Nginx访问项目文件,依然会跨域,解决方法:
ip+(root文件夹内)项目文件相对地址,如:192.168.1.114/javascript/taskx.html;
只能在本机上生效,传上云虚机之后没有Nginx监听
收获:
JQ AJAX:
$.ajax(url,[setting]) 底层ajax
数据类型 : data(请求发送数据内容)/dataType(服务器返回的数据处理后类型:xml;html;script;json;jsonp;text);
发送类型:get(默认)/post/(put)/(delete)部分浏览器支持;
回调函数:
success(请求成功后调用,传入返回数据+成功代码字符串);
error(请求出错调用函数,三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象)
- beforeSend (在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。)
- dataFilter (在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。)
- complete (当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。)
- $.post/get(url,[data],[callback],[type]) 失败时不能执行函数
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
评论