Home > Article > Web Front-end > Usage of $.get, $.post, $.getJSON and $.ajax in jQuery

Usage of $.get, $.post, $.getJSON and $.ajax in jQuery

巴扎黑Original: 2017-07-03 09:41:201241browse

1. The $.get

$.get() method uses the GET method to make asynchronous requests. Its syntax structure is:

$.get( url [, data] [, callback] )

Explain the parameters of this function:

url: string type, The address of the ajax request.

data: optional parameter, object type, the key/value data sent to the server will be appended to the request URL as QueryString.

callback: optional parameter, function type, this function is automatically called when ajax returns successfully.

Finally write an example of $.get() for your reference:

$.post() method uses POST method To make asynchronous requests, its syntax structure is:

## $.get( "submit.aspx",

{ id: '123', name: 'Qingtengyuan', },

function(data,state){

#2、$.post()

$.post(url,[data],[callback],[type])

This method is the same as The usage of $.get() is similar, except that there is an additional type parameter, so we will only introduce the type parameter here. For other information, please refer to $.get() above.

type: type is the requested

data type

, which can be html, xml, json and other types. If we set this parameter to: json, then the returned format is json format. If not set, it will be the same as the format returned by $.get(), which is a string. Finally write an example of $.post() for your reference:

## $.post( "submit.aspx",

{ id: '123', name: 'Qingtengyuan', },

function(data,state){ //Here is displayed the return from the server Data Alert (data); // The status returned here

# Alert (state);

},

"json");

3.$.getJSON()

$.getJSON() is specially set up for ajax to obtain json data, and supports cross-domain calls. The syntax format is:

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

url: string type, sending request address
data: OK Select parameters, Key/value parameters to be sent, same as get, post type data
callback: Optional parameter, when loading is successfulCallback function, same as get, post type callback

JSON is an ideal data transmission format that can be well integrated with JavaScript or other host languages, and can be used directly by JS. Using JSON is more structurally reasonable and safer than sending "nude" data directly through traditional GET and POST. As for jQuery's getJSON() function, it is just a simplified version of the ajax() function with JSON parameters set. This function can also be used across domains and has certain advantages over get() and post(). In addition, this function can let the program execute the callback function X by writing the request url in the format of "myurl?callback=X".

Tip: The data is ultimately sent out through the get method behind the URL. This determines that the amount of data sent cannot be too much, otherwise the URL will be too long and the reception will fail (the getJSON method is It is impossible to submit it by post).

4. $.ajax()

$.ajax() is a common ajax package in jquery. Its syntax format is:

$.ajax(options)

where options is an object type, which specifies the specific parameters of this ajax call. Here I attach the most commonly used parameters. Go up

$.ajax({

url: 'submit.aspx',

datatype: "json",

type: 'post',

success: function (e) {

//Callback after success

alert(e);

alert(e),

error: function(e){

//Callback after failure

alert(e );

beforeSend: function(){

//Called before sending the request, you can put some words like "Loading"

alert("Loading");

}})

##Okay, the above are several ways to implement ajax calls in jquery , now I post a new small example I recently made, so that it is more intuitive.

Front-end receiving page:

Note to introduce jquery mobile package

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><script type ="text/javascript" src = "jquery-1.6.4.min.js"></script></head>
<script type = "text/javascript">
	$(function(){
		$("#button1").click(function(){
			//用getJSON方法获取后台传递过来的JSON对象数组			$.getJSON("http://10.65.9.181:8090/jq_test_server/2.jsp",function(data){
				//调用each方法进行数组遍历
				$.each(data,function(index,item){
					//alert(data);
		  			//alert(item.username);  依次打印所有的username
					//alert(item);
					//打印出遍历的username的最后一个,因为之前的username会被后者覆盖//打印zxy
		  			$("#button1").html(item.username);
		  		});
			});
		});
		$("#button2").click(function(){
			//用get方法获取后台传递过来的json字符串,注意是字符串			$.get("http://10.65.9.181:8090/jq_test_server/2.jsp",function(data){
				//alert(data);
				//将字符串转化为json对象
				data = JSON.parse(data);
				$("#button2").html(data[1].username);
				});
		});
		$("#button3").click(function(){
			//用post方法获取后台传递过来的json字符串,注意是字符串			$.post("http://10.65.9.181:8090/jq_test_server/2.jsp",function(data){
				//alert(data);
				//将字符串转化为json对象
				data = JSON.parse(data);
				$("#button3").html(data[1].username);
				});
		});
		$("#button4").click(function(){
			//采用ajax方式获取json字符串			$.ajax({
				type:"GET",
				url:"http://10.65.9.181:8090/jq_test_server/2.jsp",
				success:function(data){
					//强制转换为json对象
					data = JSON.parse(data);
					//打印的是对象数组里面的第一个值对应的username
					$("#button4").html(data[0].username);
				}
			});
		});
	});
</script>
<body>
<a id = "button1" href = "#">getJSON方法</a>
<a id = "button2" href = "#">get方法</a>
<a id = "button3" href = "#">post方法</a>
<a id = "button4" href = "#">ajax方法</a>
</body>
</html>

Backend 2.jsp page:(This is mainly for testing There are several ways for the frontend to receive json data, so the backend is not separated and very simple)

Be careful to introduce the org.json package

<%@ page language="java" import="java.util.*,java.sql.*,org.json.*"	pageEncoding="utf-8"%>

response.setHeader("Access-Control-Allow-Origin", "*");

The function of the above sentence is: the value of Access-Control-Allow-Origin can be wildcard *
If it is *, you can receive from Requests from any source origin. At this time, any external js request is allowed. Without this sentence, there will be no result.
##

<%@ page language="java" import="java.util.*,java.sql.*,org.json.*"
	pageEncoding="utf-8"%>
<%	response.setHeader("Access-Control-Allow-Origin", "*");//注意这句话控制js访问权限
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%
	String url = "jdbc:mysql://localhost:3306/jquery";
	String user = "root";
	String pass = "root";
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	try {
		Class.forName("com.mysql.jdbc.Driver");
		conn = DriverManager.getConnection(url, user, pass);
		String sql = "select uid,username,imgurl,age from test1";
		pstmt = conn.prepareStatement(sql);
		rs = pstmt.executeQuery();
		// json数组
		JSONArray array = new JSONArray();
		// 获取列数
		ResultSetMetaData metaData = rs.getMetaData();
		int columnCount = metaData.getColumnCount();
		// 遍历ResultSet中的每条数据
		while (rs.next()) {
			JSONObject jsonObj = new JSONObject();
			// 遍历每一列
			for (int i = 1; i <= columnCount; i++) {
				String columnName = metaData.getColumnLabel(i);
				String value = rs.getString(columnName);
				jsonObj.put(columnName, value);
			}
			array.put(jsonObj);
		}
		System.out
				.println("======================返回的是json对象转化成的字符串==================");
		System.out.println(array.toString());
		out.print(array.toString());
	} catch (Exception e) {
		e.printStackTrace();
	}
%>

Screenshot of the database part:

The above is the detailed content of Usage of $.get, $.post, $.getJSON and $.ajax 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：Recommended usage of jquery $.getJSON combined with .NETNext article：Recommended usage of jquery $.getJSON combined with .NET

See more

Usage of $.get, $.post, $.getJSON and $.ajax in jQuery

Related articles