jquery ajax 跨域 java_(跨域)jquery.ajax提交请求并返回json数据 | 学步园

当我们在两个java项目之间互相调用接口时就会遇到跨域请求的问题,这次我开发系统的注册功能后台实现是调用的用户管理中心的接口,前台通过$.ajax请求并处理返回的json数据,其中注意一点就是如果出现中文的时候最好是转码传输到后台解码,要不然容易出现乱码问题。

前台jsp页面的代码:

$(document).ready(function(){

$("#submitBtn").click(function(){

var flag = validateForm();//数据校验

if (flag > 0) {

alert("您的注册信息填写不正确,请查看错误信息!");

return false;

}

if(!$("#checkbox_agree").is(':checked')){

alert("您还没有查看“用户使用协议”,请先下载查看!");

return false;

}

var url = "${url }";//获取请求地址,最好是从项目配置文件读取,容易维护

var userName = encodeURI($("#name").val());

var userPwd = $("#pwd").val();

var emailFalg = $("#email").val();

var fName = encodeURI($("#fullName").val());//中文转码,防止乱码

var orgCodeFlag = $("#orgCode").val();

var data = {name:userName,pwd:userPwd,email:emailFalg,orgCode:orgCodeFlag,fullName:fName};

$.ajax({

type : "get",

async : false, //同步请求

url : url,

data : data,

dataType : "jsonp", //跨域请求需要使用jsonp

contentType: "application/x-www-form-urlencoded; charset=utf-8",

timeout:1000,

success:function(json){

alert(json.messages); //请求成功前台给出提示

$("#pwd").attr("value","");

$("#pwdAffirm").attr("value","");

$("#orgCode").attr("value","");

window.location.href="${ctx}/item/getItem"; //跳转

},

error: function() {

alert("注册失败,请稍后再试!");

alert(XMLHttpRequest.status);

alert(XMLHttpRequest.readyState);

alert(textStatus);

}

});

});

});

注:后台java代码解码使用:

java.net.URLDecoder.decode(fullName,"utf-8");

总结:上面的跨域请求虽然能够完成注册功能,可以实现数据交换,如果是登录功能的话安全性能就差了一些,因为前台的js代码很容易被修改,那是不是还有别的办法既能解决安全问题还能跨域请求交换数据呢?答案是必须的,下一篇博客将介绍安全跨域请求。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery Ajax 跨域 POST 请求是一种通过 jQueryAjax 方法发送 POST 请求并处理跨域请求的方式。跨域请求是指在浏览器中,通过 JavaScript 代码向不同域名或端口发送请求的情况。 要实现跨域 POST 请求,可以使用以下步骤: 1. 在 HTML 文件中引入 jQuery 库: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. 使用 jQueryAjax 方法发送 POST 请求: ```javascript $.ajax({ url: 'http://example.com/api', type: 'POST', dataType: 'json', data: { key1: 'value1', key2: 'value2' }, success: function(response) { // 请求成功后的处理逻辑 console.log(response); }, error: function(xhr, status, error) { // 请求失败后的处理逻辑 console.log(error); } }); ``` 在上述代码中,`url` 参数指定了请求的目标地址,`type` 参数指定了请求的类型为 POST,`dataType` 参数指定了预期的响应数据类型为 JSON,`data` 参数指定了要发送的数据。 3. 在服务器端设置跨域请求的响应头: 为了允许跨域请求,服务器端需要设置响应头。具体的设置方法根据服务器端语言和框架而定。一种常见的设置方式是在响应头中添加以下内容: ``` Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST Access-Control-Allow-Headers: Content-Type ``` 上述代码中,`Access-Control-Allow-Origin` 允许所有域名进行跨域请求,也可以指定具体的域名。`Access-Control-Allow-Methods` 指定允许的请求方法为 POST,`Access-Control-Allow-Headers` 指定允许的请求头为 Content-Type。 注意:跨域请求需要服务器端的支持,如果服务器端没有正确设置响应头,浏览器会阻止跨域请求
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值