AJAX中不跨域和跨域问题的解决方法

最新推荐文章于 2022-09-06 22:32:08 发布

不想写代码的女程序猿

最新推荐文章于 2022-09-06 22:32:08 发布

阅读量5.4k

点赞数 3

本文链接：https://blog.csdn.net/u012354540/article/details/47753657

版权

接下来写的都是我自己学习中的一点小经验，如果有不对的地方或者有什么好的建议或意见，请前辈们指点一下~

Ajax跨域和不跨域这个问题，几乎2个星期才搞出来，没办法，用到的知识全部自学的，只能百度一点点解决问题。

前端页面我是用html5+css3写的，引进jquery mobile，这个我也要百度慢慢学习。

大学四年白学习了，一直以为前端页面不能调式，每次写代码都是很认真，不敢出错，因为一旦出错，很难发现原因，以前少了一个逗号，我花了一天时间才找到，唉~

一、调试前端页面

在浏览器中运行页面，然后按“F12”，就可以对自己写的页面进行调试了。具体怎么调试，自己摸索一下就可以了，真得是方便多了，真恨自己没有早点知道。

二、Ajax不跨域

Ajax中的不跨域问题很好解决的，百度上有很多方法，但是对于新手来说，看了之后可能会一头雾水，现在给出我的具体解决方法。

在myEclipse中建一个web项目：html页面传参数到jsp页面，jsp页面返回值（注意：此处返回值是1或0，不是json数据类型）

userLogin.html



  
	 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

<%@ 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();
       }
%>

简单的跨域就这样实现了~

三、Ajax跨域

什么是跨域？我暂时是这样理解的，就是在不同的域名下实现数据交互。现在我的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跨域的问题也就这样解决了。
    
    
    
    
     
     

    
    
    
    
     
     希望大家多多指点~