接下来写的都是我自己学习中的一点小经验,如果有不对的地方或者有什么好的建议或意见,请前辈们指点一下~
Ajax跨域和不跨域这个问题,几乎2个星期才搞出来,没办法,用到的知识全部自学的,只能百度一点点解决问题。
前端页面我是用html5+css3写的,引进jquery mobile,这个我也要百度慢慢学习。
大学四年白学习了,一直以为前端页面不能调式,每次写代码都是很认真,不敢出错,因为一旦出错,很难发现原因,以前少了一个逗号,我花了一天时间才找到,唉~
一、调试前端页面
在浏览器中运行页面,然后按“F12”,就可以对自己写的页面进行调试了。具体怎么调试,自己摸索一下就可以了,真得是方便多了,真恨自己没有早点知道。
二、Ajax不跨域
Ajax中的不跨域问题很好解决的,百度上有很多方法,但是对于新手来说,看了之后可能会一头雾水,现在给出我的具体解决方法。
在myEclipse中建一个web项目:html页面传参数到jsp页面,jsp页面返回值(注意:此处返回值是1或0,不是json数据类型)
rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" type="text/css">
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.0.js" type="text/javascript"></script>
<script type="text/javascript">
function check(){
var a_userid=$("#username").val();
//alert(a_userid);
var a_password=$("#password").val();
<------------------------------------------------------------------------------------------------------------------------------->
$.ajax({
url:"index.jsp",
type:"post",
async:false, //同步:意思是当有返回值以后才会进行后面的js程序。
dataType:'json',
data:{a_userid:a_userid,a_password:a_password}, //请求需要发送的处理数据
//data:"a_userid=a_userid&a_password=a_password",
success:function(data){
// debugger;
alert(data);
if(data==1){ //根据返回值进行跳转
alert('登陆成功!');
window.location.href = 'home.html';
}else{
alert('用户名或密码错误!');
}
}
});
<-------------------------------------------------------------------------------------------------------------------------------->
}
</script>
用户登录
index.jsp
三、Ajax跨域
<%@ page language="java" import="java.util.*" import="java.sql.*" import="javax.swing.*" contentType="text/html;charset=utf-8" pageEncoding="UTF-8"%>
<%@page import="javax.sound.midi.ShortMessage"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String a_userid=request.getParameter("a_userid");
String a_password=request.getParameter("a_password");
/** 获取jsonp的回调函数名 **/
//String callback = request.getParameter("callback");
request.setCharacterEncoding("UTF-8");
try{
String driverName="oracle.jdbc.driver.OracleDriver";
String url=""; //url地址
String user=""; //数据库用户名
String password=""; //数据库密码
// System.out.println(a_userid);
// System.out.println(a_password);
Class.forName(driverName);
//创建数据库连接
Connection conn=DriverManager.getConnection(url, user, password);
//创建Statement实例
Statement stmt=conn.createStatement();
String strSql=null;
ResultSet rs=null;
if(request.getParameter("a_userid")==""||request.getParameter("a_password")==""){
JOptionPane.showMessageDialog(null,"用户名或密码为空!");
}
else{
String sql="select count(1) e from ANDROID_TEST s where s.a_userid='"+a_userid+"' and s.a_password='"+a_password+"'";
PreparedStatement pstmt = conn.prepareStatement(sql);
ResultSet resultSet = pstmt.executeQuery();
resultSet.next();
int b =Integer.parseInt(resultSet.getString("e").toString());
// System.out.println(b);
if(b!=0){
1 // out.println(callback+"('1')"); //返回值1
}else{
0 // out.println(callback+"('0')"); //返回值0
}
}
}catch(ClassNotFoundException e){
e.printStackTrace();
}
catch (SQLException e){
e.printStackTrace();
}
%>
简单的跨域就这样实现了~
什么是跨域?我暂时是这样理解的,就是在
不同的域名下实现数据交互。现在我的userLogin.html 页面是放在Eclipse下的Android项目下的,index.jsp位置不
变。对跨域中两个页面稍作改变就可以解决跨域问题了。
1、userLogin.html页面中js部分做如下改变:
..................
function check(){
var a_userid=$("#username").val();
var a_password=$("#password").val();
if((a_userid==null||a_userid=="")||(a_password==null||a_password=="")){
alert('请输入用户名或密码!');
}else{
$.ajax({
url:"http://192.168.10.15:8080/webdemo/index.jsp", //加上自己的ip地址
type:"get",
async:false, //同步:意思是当有返回值以后才会进行后面的js程序。
data:{a_userid:a_userid,a_password:a_password}, //请求需要发送的处理数据
dataType:'jsonp', //此处类型要改为jsonp类型
jsonp:'callback',
success:function(data){
// alert(data);
if(data==1){ //根据返回值进行跳转
alert('登陆成功!');
window.location.href = 'welcome.html';
}else{
alert('用户名或密码错误!');
}
},
error:function(){
alert('出错');
}
});
}
}
...........................
2、index.jsp页面中修改两个地方就可以了
(1)加上这一句
..................................
/** 获取jsonp的回调函数名 **/
//String callback = request.getParameter("callback");
...............
(2)返回值的类型改成json类型,这个地方就是我一直没有成功的原因,后来百度知道了要将返回值改成json类型,也有人告诉我不是json类型也可以实现跨域,但是我没有成功。
.............
if(b!=0){out.println(callback+"('1')"); //返回值json类型}else{out.println(callback+"('0')"); //返回值json类型}............Ajax跨域的问题也就这样解决了。
希望大家多多指点~