您的位置：首页 > Web前端 > JQuery

用jquery.getJSON实现跨域提交

2010-03-11 16:18 627 查看

需求所至，实现跨域提交登录。早就听说jquery可以通过getJSON来实现跨域获取数据，今天刚好有时间测试了一下了，例子比较简单。

引用jquery1.3的中文api

“

在 jQuery 1.2 中，您可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

注意：此行以后的代码将在这个回调函数执行前执行。

”

Jsonp原理：

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

客户端：

<mce:script src="jsfolder/jquery-1.3.2.min.js" mce_src="jsfolder/jquery-1.3.2.min.js" type="text/javascript"></mce:script>
<mce:script  type="text/javascript"><!--
function  uLogin(){
$.getJSON("http://localhost:8080/SpringManager/userDeal.do?status=findKey&format=json&callback=?",
function(data){
alert(data[0]+"==="+data[1]);
});
}

// --></mce:script>
</head>
<body>
<form  method="post">
<input type="text" value=""/>
<input type="button" value="查询" onclick="uLogin();"/>
</form>

</body>

后台用struts处理

public ActionForward findKey(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws IOException {

List<String> alist=new ArrayList<String>();
alist.add(0,new String("apple"));
alist.add(1,new String("pear"));
JSONArray json=JSONArray.fromObject(alist);

String output = request.getParameter("callback") + "(" + json + ");";
PrintWriter out = response.getWriter();
out.println(output);
return null;
}

String output = request.getParameter("callback") + "(" + json + ");";

这里就是jsonp原理的体现。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航