`

jquery跨域Ajax请求

阅读更多

关键:ajax的dataType为jsonp,并且在请求的url中加上"?jsoncallback=?"

前台代码:

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript">
    function RegisterRequest2() {
        /* getJSON method is ok also... 
        $.getJSON("http://192.168.1.154:7087/ClusterServer/Rigister?jsoncallback=?", { pwd: '123', username: 'tl' }, function(json) { alert(json.name); }); 
        */
         
        $.ajax({
            url: "http://192.168.1.154:7087/ClusterServer/Rigister?jsoncallback=?",
            type: "GET",
            data: { pwd: '123', username: 'tl' },
            dataType: "jsonp",
            success: function(data) {
                alert(data.name);
            },
            error: function(a, b, c) {
                alert("error==" + b);
            }

        }); 
    }  
</script>
<input type="button" onclick="RegisterRequest2();"  value="StartRequest" />

 

后台Servlet代码:

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Rigister extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException { 
		String pwd = req.getParameter("pwd");
		String username =req.getParameter("username");
		System.out.println("get=="+username+"  ==="+pwd);
		 
		String callback = req.getParameter("jsoncallback"); 
		resp.getWriter().write(callback + "({name:'tzy',phone:'123'})"); //参数为json格式
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException { 
		String pwd = req.getParameter("pwd");
		String username =req.getParameter("username");
		System.out.println("post=="+username+"  ==="+pwd);
		 
		String callback = req.getParameter("jsoncallback"); 
		resp.getWriter().write(callback + "({name:'tzy',phone:'123'})"); 
	}

}

 

后台返回前台的时候取出jsoncallback回调函数名,将json格式的数据作为函数的参数,整个以字符串的形式返回给前台。。

分享到:
评论

相关推荐

    Jquery跨域Ajax请求测试

    本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...

    jquery的ajax跨域请求原理和示例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决...

    Jquery跨域Json请求处理

    ### Jquery跨域Json请求处理详解 #### 一、跨域问题概述 在现代Web开发中,跨域问题是一个常见的技术挑战。简单来说,当一个网页尝试从不同的源(源可以理解为协议、域名或者端口号)加载资源时,就会遇到跨域限制...

    asp.net jquery 跨域提交请求数据

    在开发过程中,我们经常会遇到跨域(Cross-Origin Resource Sharing,CORS)的问题,尤其是在进行Ajax请求时。跨域是浏览器为了安全而实施的一种策略,阻止了JavaScript从一个源(Origin)向另一个源发送请求,除非...

    jquery跨域请求示例分享(jquery发送ajax请求)

    尤其在AJAX请求方面,jQuery提供了便捷的方法,使得跨域请求成为可能。跨域请求是指在不同域名下的网页之间的HTTP请求,由于安全原因,浏览器限制了网页只能访问与自身同源的资源。 首先,跨域请求问题源于同源策略...

    JQuery跨域访问解决方案

    在上面的例子中,`$.ajax()`方法用于发起跨域请求,`dataType: 'jsonp'`指定使用JSONP模式。`jsonp: 'jsoncallback'`参数指定了回调函数名的查询字符串参数名。`success`回调函数会在数据成功返回后执行,处理服务器...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    ajax 跨域请求问题 jquery jsonp

    在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在需要跨域获取数据时就会遇到问题。为了解决...

    juery mobile使用ajax跨域请求服务器的小实例

    在jQuery中,我们可以使用`$.ajax()`方法来发起Ajax请求。对于跨域请求,我们需要设置`xhrFields`中的`withCredentials`为`true`,并且在服务器端开启CORS(Cross-Origin Resource Sharing)支持。 以下是一个简单...

    jQuery跨域请求,获取返回值

    jQuery中的`$.ajax()`方法是进行跨域请求的主要工具。要开启跨域,需要设置`xhrFields`选项中的`withCredentials`属性为`true`,并设置`crossDomain`为`true`。例如: ```javascript $.ajax({ url: '...

    ajax处理跨域请求

    在jQuery中,使用$.ajax()方法发起AJAX请求时,可以设置`crossDomain`参数为`true`来开启跨域请求。例如: ```javascript $.ajax({ url: 'http://example.com/api/data', // 跨域的URL type: 'GET', crossDomain...

    ajax跨域请求WebService.asmx

    【Ajax跨域请求WebService.asmx】是一个常见的Web开发技术应用场景,主要涉及到JavaScript的Ajax技术、C#编程语言以及ASP.NET的WebService组件。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的...

    Ajax +jquery跨域获取JSON

    这里的"Ajax + jQuery跨域获取JSON"是一个典型的Web开发技术应用场景,主要用于解决Web应用程序中不同源之间的数据共享问题。在本案例中,开发者成功地实现了跨域请求以获取JSON数据,并将这些数据用于展示天气预报...

    Jquery跨域请求的实现

    在jQuery的AJAX请求中,可以通过设置`xhrFields`或`crossDomain`参数来启用CORS。 ```javascript $.ajax({ url: 'http://example.com/api', type: 'GET', xhrFields: { withCredentials: true }, crossDomain: ...

    jquery跨域调用 js跨域调用

    jQuery跨域调用主要是通过JSONP(JSON with Padding)和CORS(Cross-Origin Resource Sharing)这两种机制来实现的。JSONP是一种非官方的跨域数据交互协议,而CORS是W3C标准,允许服务器声明哪些来源可以访问其资源...

    jquery ajax跨域html前台 php后台

    1. **jQuery的Ajax设置**:在使用Ajax进行跨域请求时,我们需要在`$.ajax()`方法中设置`dataType: 'jsonp'`。这告诉jQuery我们期望服务器返回JSON格式的数据,并通过JSONP机制来处理。 2. **JSONP原理**:JSONP的...

    Java通过jQuery实现ajax异步请求

    综上所述,"Java通过jQuery实现ajax异步请求"的示例工程涵盖了客户端与服务器端的交互流程,包括使用jQuery发起AJAX请求、Java后端处理请求并返回数据,以及数据格式的转换和错误处理。了解并掌握这些知识点,对于...

    ajax跨域请求demo.zip

    前端通常使用JavaScript库如jQuery来实现Ajax请求。jQuery的`$.ajax()`方法是进行异步请求的主要工具。在这个示例中,它可能包含以下关键配置: 1. `type`: 指定请求类型,通常是'GET'或'POST'。 2. `url`: 需要...

    通过jquery的ajax请求本地的json文件方法

    通常情况下,ajax请求会涉及到跨域问题,但当请求本地的文件资源时,这种问题不会发生。文章中使用了相对于HTML文档的路径 "./data/shuju.json" 来指定JSON文件的位置。 3. dataType为json: 在ajax请求中,...

Global site tag (gtag.js) - Google Analytics