jquery中$.getJSON 的使用方法

jQuery.getJSON(url, [data], [callback])

 

通过 HTTP GET 请求载入 JSON 数据。

参数:
url,[data],[callback]                          String,Map,Function V1.0

url : 发送请求地址。

data : 待发送 Key/value 参数。

callback : 载入成功时回调函数。

 

getJson的使用方法 jQuery.getJSON(url,[data],[callback])
要获得一个json文件的内容,就可以使用$.getJSON()方法,这个方法会在取得相应文件后对文件进行处理,并将处理得到的JavaScript对象提供给代码.

回调函数提供了一种等候数据返回的方式,而不是立即执行代码,回调函数也需要一个参数,该参数中保存着返回的数据。这样我们就可能使用jQuery提供的另一个全局函数(类方法).each()来实现循环操作,将.getJSON函数返回的每组数据循环处理。

 
提供一个servlet写的小例子:
package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

import net.sf.json.JSONArray;

import com.entity.City;

/**
 * @author Administrator
 * 返回json字符串
 * 
 * 这里是用传统方法做的一个简单列子!
 * 整合struts,这种写法也能实现,但struts2已经实现了json,比这个写法方便
 * 
 */
public class GetJsonServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		
		PrintWriter out = response.getWriter();
		/*返回一个list集合来绑定下拉框*/
		List<City> list = new ArrayList<City>();
		list.add(new City(1,"AAAA"));
		list.add(new City(2,"BBBB"));
		list.add(new City(3,"CCCC"));
		list.add(new City(4,"DDDD"));
		//获取集合的json字符串
		JSONArray json = JSONArray.fromObject(list);
		System.out.println(json.toString());
		//打印结果:
		//[{"id":1,"name":"AAAA"},{"id":2,"name":"BBBB"},{"id":3,"name":"CCCC"},{"id":4,"name":"DDDD"}]
		out.print(json.toString());
		out.flush();
		out.close();
	}

}

jsp页面代码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>My JSP 'index.jsp' starting page</title>
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript">
  	//初始加载页面时    
$(document).ready(function(){
	alert("加载..............");
	var city=$("#city");//下拉框 
	$.getJSON("GetJsonServlet",function(data){ 
		//通过循环取出data里面的值       
   		$.each(data,function(i,value){
   			var tempOption = document.createElement("option");   
	        tempOption.value = value.id;
	        tempOption.innerHTML  = value.name;   
	        city.append(tempOption);          
	    });    
  	});
});
  </script>
  </head>
  <body>
  <select id="city">
  	<option>==选择==</option>
  </select>
  </body>
</html>


实体类就俩属性:

private Integer id;
private String name;


以上能实现在页面加载的时候,把内容绑定到下拉框!

 

通过打印流,是ajax常用的方法!

 

需要的代码的可以下载    getJson Download   下载代码 

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

以上为自己上网找的代码,下面是自己的代码,也是关于$.getJSON()方法的使用:

Struts.xml配置:

 <package name="josn_default" namespace="/" extends="json-default">
  <action name="loginAction" class="cn.bdqn.demo.action.UserAction"  method="execute">
   <!--<result>的type属性指定为“json”,将返回序列化的JSON格式数据-->
   <result type="json">
    <!--参数root指定要序列化的根对象,默认将序列化当前Actin中所有有返回值的getter方法的值-->
    <param name="root">result</param>
    <!--参数includeProperties指定要序列化根对象中的哪些属性,多个属性以逗号分隔-->
    <param name="includeProperties">msg,flag,user,user.name</param>
    <!--参数excludeProperties指定将要从根对象中排除的属性,排除属性将不被序列化-->
    <param name="excludeProperties">user.password</param>
    <!--参数excludeNullProperties指定是否序列化值为空的属性-->
    <param name="excludeNullProperties ">true</param>
   </result>
  </action>
 </package>

JSP代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>用户登录</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
  function doLogin(){
   var name =  $('#loginName').val();
   var password =  $('#loginPassword').val();
   var data ={'user.name':name,'user.password':password};
   $.getJSON('loginAction.action',data,function(mdata){
    if(mdata.flag){
     $('#topLoginDiv').html("");
     $('#demo').html("当前用户:"+mdata.user.name+"     "+mdata.msg);
    }else{
     $('#demo').html(mdata.msg);
    }
   });
  }
 </script>
  </head>
  <body>
     <div id="topLoginDiv">
   用户名:<s:textfield name="user.name"  id="loginName" required="true" size="15"/>
   &nbsp;密码:<s:password name="user.password" id="loginPassword" required="true" size="15"/>
   <label class="ui-green">
    <input type="button" name="loginButton"  value="登录" οnclick="doLogin();" />
   </label>
  </div>
     <div id="demo" style="display: inline"></div>
     <s:debug></s:debug>
  </body>
</html>

java代码:

package cn.bdqn.demo.action;

import java.util.HashMap;
import java.util.Map;

import cn.bdqn.demo.bean.User;

import net.sf.json.JSONObject;

public class UserAction {
 private User user;
 private JSONObject result;

 public JSONObject getResult() {
  return result;
 }

 public void setResult(JSONObject result) {
  this.result = result;
 }

 public User getUser() {
  return user;
 }

 public void setUser(User user) {
  this.user = user;
 }
 public String execute() {
  
  System.out.println("**********");
  
  boolean flag = false;
  String msg = "";
  if ("admin".equals(user.getName())) {
   if ("0000".equals(user.getPassword())) {
    flag = true;
    msg = "<font color='green'>登录成功</font>";
   } else {
    msg = "<font color='red'>密码错误!</font>";
   }
  } else {
   msg = "<font color='red'>用户名错误!</font>";
  }
  
  System.out.println(msg+"&&&&"+flag);

  Map<String, Object> list = new HashMap<String, Object>();
  list.put("flag", flag);
  list.put("msg", msg);
  if (flag) {
   list.put("user", user);
  }

  System.out.println("%%%%%%%%%%");
  result = JSONObject.fromObject(list);
  
  System.out.println(result);

  return "success";
 }

}

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
$.getJSON和ajax都是用于发送HTTP请求和获取服务器数据的方法,它们在实现上有一些区别。 1. 语法:$.getJSONjQuery的一个方法,用于发送GET请求并自动解析返回的JSON数据。它的语法是`$.getJSON(url, data, success)`,其url是请求的URL地址,data是发送给服务器的数据,success是请求成功后执行的回调函数。 而ajax是JavaScript提供的一种通用的发送HTTP请求的方法,它的语法是`$.ajax(settings)`,其settings是一个包含各种请求参数的对象,包括url、type(请求类型,如GET、POST等)、data(发送给服务器的数据)、success(请求成功后执行的回调函数)等。 2. 数据类型:$.getJSON方法默认解析服务器返回的JSON数据,并将解析后的对象作为参数传递给success回调函数。而ajax可以处理多种数据类型,包括JSON、XML、HTML等。 3. 自动解析:$.getJSON方法会自动解析返回的JSON数据,并将解析后的对象作为参数传递给success回调函数。而ajax需要手动处理服务器返回的数据,可以通过设置dataType参数指定返回数据的类型,然后在success回调函数进行处理。 4. 请求类型:$.getJSON方法只能发送GET请求,无法发送POST请求。而ajax可以发送各种类型的请求,包括GET、POST、PUT、DELETE等。 综上所述,$.getJSON方法是ajax的一个简化版本,专门用于发送GET请求并自动解析返回的JSON数据。而ajax是更通用的方法,可以处理各种类型的请求和返回数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值