插件介绍:众所周知,使用ajax直接发起请求存在跨域无权限访问的问题,这时候,需要使用jsonp协议(非官方的协议)处理,jQuery中的
.ajax方法也直接支持使用该协议进行跨域访问。下面首先介绍使用jQuery的
.ajax方法进行跨域访问,然后再介绍使用其它jQuery插件(jQuery-JSONP)实现样的功能。
1、js页面
code>
function login(){
var ip="http://192.168.31.6:8080/HTML_ht";
$.ajax({
type:"GET",
url:ip+"/login.jsp",
crossDomain: true,
data:{
username:'admin',
password:'123',
},
dataType:'JSONP',
jsonp:"callback",
async:true,
success:function(data){
var username = data.username;
var password = data.password;
if(username=="admin" && password=="123"){
alert("登陆成功");
}else{
alert("登陆失败");
2、h5页面
<code>
<div class="container">
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
<input type="button" value="Login" onclick="login()"/>
</div>
3、后台处理
public void testjson(HttpServletRequest request, HttpServletResponse response) {
String callback = (String)request.getParameter("callback");
String jsonData = "{\"id\":\"3\", \"name\":"zhangsan", \"telephone\":"13612345678"}";//为了演示效果,json数据是写死的
String retStr = callback + "(" + jsonData + ")";
response.getWriter().print(retStr);
}