Home >Web Front-end >JS Tutorial >Introducing the use of $.getJSON in jquery

Introducing the use of $.getJSON in jquery

巴扎黑Original: 2017-07-03 09:32:101456browse

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

Load JSON data via HTTP GET request.

Parameters:

url,[data],[callback] : Send request address.

data

: Key/value parameters to be sent.

callback

: Callback function when loading is successful.

How to use getJsonjQuery.getJSON(url,[data],[callback])

To get a json file content, you can use the $.getJSON() method. This method will process the file after obtaining the corresponding file, and provide the processed

JavaScript object to the code.
The callback function provides a way to wait for data to be returned instead of executing the code immediately. The callback function also requires a parameter, which stores the returned data. In this way, we may use another global function(class method).each() provided by jQuery to implement loop operations and loop through each set of data returned by the .getJSON function.

Provide a small example of writing a 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 code:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>My JSP &#39;index.jsp&#39; 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>

The entity class has only two attributes:

private Integer id;
private String name;

The above can bind the content to the drop-down box when the page is loaded. !

Printing stream is a common method of ajax!

You can download the code you need getJson Download Download code

The above is the detailed content of Introducing the use of $.getJSON in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation on the usage of jQuery.getJSON() functionNext article：Detailed explanation on the usage of jQuery.getJSON() function

See more

Introducing the use of $.getJSON in jquery

Related articles