jquery异步请求返回json串

本文介绍了一个使用JavaScript发起AJAX请求从Java后台获取JSON格式数据的示例。前端通过jQuery库发送同步POST请求到Java服务器端,服务器端通过json-lib库将Java对象转换为JSON字符串并返回给前端,前端再解析该JSON字符串获取具体数据。

JS部分:

function getData(){
	var url = "getData.action";
	 jQuery.ajax({
		   type: "POST",
		   url: url,
		   async: false,
		   success: function(data) {
				var user = eval("(" + data + ")");
				alert(user.userId);
				alert(user.userName);
			}
	});
}

JAVA部分:

         需要引入 json-lib-2.4-jdk15 jar包的 net.sf.json.JSON 类
         import net.sf.json.JSON;

public String getData() {
		JSONObject jsonobject = new JSONObject();
		User  u = new User();
		u.setUserId("01");
		u.setUserName("海洋");
		JSONObject jo = jsonobject.fromObject(u);//利用JSONObject直接格式化现有VO创建json对象

		/*//或者也可以这样创建json对象
		JSONObject jsonobject = new JSONObject();
		jsonobject.put("userId", "02");
		jsonobject.put("userName", "海洋");
		String jsonStr = jsonobject.toString();
		*/
		
		String jsonStr = jo.toString();
		getResponse().setCharacterEncoding("utf-8");
		getResponse().setContentType("text/html;charset=utf-8");
		PrintWriter out;
		try {
			out = getResponse().getWriter();
			out.print(jsonStr);
			out.close();
			out.flush();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}


<think>我们根据提供的引用内容,用户想了解如何使用jQuery进行异步AJAX请求并处理返回JSON数据。引用[1]提到两种方法:一种是服务器返回JSON数据,另一种是在AJAX请求中设置dataType为'jsonp'或'json'。引用[2]则提到在PHP异步返回JSON数据时,有时需要使用eval来解析,并且注意success和complete回调的区别。根据这些信息,我们将分为以下几个步骤说明:1.基本AJAX请求设置(使用$.ajax方法)2.处理返回JSON数据(在success或done回调中处理)3.处理跨域请求JSONP)4.注意点:如使用eval的情况(现在一般用JSON.parse,但jQuery会自动转换)我们将使用代码示例来说明。</think> ### 如何使用 jQuery 实现异步 AJAX 请求并处理 JSON 数据 在 jQuery 中实现异步 AJAX 请求并处理 JSON 数据的核心方法是使用 `$.ajax()` 方法,以下是具体步骤和示例: --- #### 一、基础实现流程 1. **发起请求** 使用 `$.ajax()` 配置请求参数: ```javascript $.ajax({ url: 'your_api_url', // 请求地址 type: 'GET', // 请求类型(GET/POST) dataType: 'json', // 声明接收JSON格式(关键参数) // data: { key: value }, // 可选:发送到服务器的数据 success: function(response) { // 请求成功时处理返回JSON数据 console.log(response); }, error: function(xhr, status, error) { // 请求失败处理 console.error("Error:", error); } }); ``` 设置 `dataType: 'json'` 后,jQuery 会自动将返回JSON 字符解析为 JavaScript 对象。 2. **处理 JSON 数据** 在 `success` 回调中直接使用解析后的对象: ```javascript success: function(data) { // 访问JSON对象属性 $("#result").text(data.username + "的邮箱是:" + data.email); } ``` --- #### 二、跨域请求处理(JSONP) 当遇到跨域限制时,使用 JSONP 格式: ```javascript $.ajax({ url: 'https://跨域地址/api', dataType: 'jsonp', // 关键修改为jsonp jsonpCallback: 'handleResponse', // 可选:自定义回调函数名 success: function(data) { console.log("跨域数据:", data); } }); ``` > 提示:JSONP 仅支持 GET 请求[^1] --- #### 三、替代方法:`.getJSON()` 简化版 ```javascript // 专门针对JSON请求的简化方法 $.getJSON('your_api_url', {page: 1}, function(data) { data.items.forEach(item => { console.log(item.id, item.name); }); }); ``` --- #### 四、常见问题解决 1. **解析异常** 若返回数据不规范导致自动解析失败,需手动解析: ```javascript $.ajax({ dataType: 'text', // 先接收原始文本 success: function(rawData) { const jsonData = JSON.parse(rawData); // 手动解析 // 或使用:const jsonData = eval("(" + rawData + ")"); } }); ``` 2. **回调函数选择** - `success`:请求**成功且HTTP状态码为2xx**时触发 - `complete`:请求**无论成功失败都会触发**(包含网络错误) ```javascript complete: function(xhr) { const rawData = xhr.responseText; // 在此处处理原始数据 } ``` --- **注意事项** 1. 确保服务器返回**标准JSON格式**,例如: ```json {"name": "John", "age": 30} // 正确 ``` 而非: ```json {name: "John"} // 错误:键未加引号 ``` 2. 跨域请求需服务器支持 CORS 或 JSONP
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值