jQuery에서 $.get, $.post, $.getJSON 및 $.ajax 사용-JS 튜토리얼-php.cn

jQuery에서 $.get, $.post, $.getJSON 및 $.ajax 사용

巴扎黑

풀어 주다： 2017-07-03 09:41:20

원래의

1211명이 탐색했습니다.

1 $.get

$.get() 메소드는 GET 메소드를 사용하여 비동기 요청을 수행합니다.

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

이 함수의 각 매개변수를 설명합니다.

url: 문자열 유형, Ajax 요청 주소.

data: 선택적 매개변수, 객체 유형, 서버로 전송된 키/값 데이터가 요청 URL에 QueryString으로 추가됩니다.

콜백: 선택적 매개변수, 함수 유형, 이 함수는 ajax가 성공적으로 반환되면 자동으로 호출됩니다.

마지막으로 참고용으로 $.get() 예제를 작성하세요.

$.get( "submit.aspx",

이름: ' 청등원', },

' s ' ' s ' out through off ‐ ‐ ‐ ‐ 그리고 반환된 상태를 표시

Alert(state) })

2. .post()

$.post() 메소드는 POST 메소드를 사용하여 비동기 요청을 수행합니다. 구문 구조는

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

이 메소드는 추가 유형 매개변수가 있다는 점을 제외하면 $.get()과 유사하므로 여기서는 유형 매개변수만 소개하겠습니다. 자세한 내용은 위의 $.get()을 참조하세요.

type: 유형은 요청된 데이터 유형이며 html, xml, json 등이 될 수 있습니다. 이 매개변수를 json으로 설정하면 반환되는 형식은 json 형식이 됩니다. $와 동일합니다. get()이 반환하는 형식은 동일하며 둘 다 문자열입니다.

마지막으로 참고용으로 $.post()의 예를 작성하세요.

$.post( "submit.aspx", : 'Ivy Garden', }, '' s ' 's'를 사용하여 통해 ' s ''‐ ‐ ‐‐‐'-- Alert(state)

"json");

3. $.getJSON()

$.getJSON()은 json 데이터를 얻기 위해 특별히 설정되었으며 도메인 간 호출을 지원합니다.

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

url: 문자열 유형, 전송 요청 주소
data: 선택적 매개변수, 전송할 키/값 매개변수, get과 동일, 게시 유형 data
callback: 선택적 매개변수, 로딩 성공 시 콜백 함수, get 및 post 유형 콜백과 동일

JSON은 이상적인 데이터 전송 형식으로 JavaScript 또는 기타 호스트 언어와 잘 통합될 수 있으며 JS에서 직접 사용할 수 있습니다. JSON을 사용하는 것은 전통적인 GET 및 POST를 통해 직접 "누드" 데이터를 보내는 것보다 구조적으로 더 합리적이고 안전합니다. jQuery의 getJSON() 함수는 JSON 매개변수가 설정된 ajax() 함수의 단순화된 버전일 뿐입니다. 이 함수는 도메인 전반에 걸쳐 사용할 수도 있으며 get() 및 post()에 비해 몇 가지 장점이 있습니다. 또한 이 함수는 요청 URL을 "myurl?callback=X" 형식으로 작성하여 프로그램이 콜백 함수 X를 실행하도록 할 수 있습니다.

팁: 데이터는 궁극적으로 URL 뒤의 get 메소드를 통해 전송됩니다. 이는 전송되는 데이터의 양이 너무 많아서는 안 된다고 판단합니다. 그렇지 않으면 URL이 너무 길어서 수신이 실패하게 됩니다(getJSON 메소드는 사용할 수 없습니다). )의 post 방식으로 제출합니다.

4, $.ajax()

$.ajax()는 jquery의 일반적인 ajax 패키지입니다. 구문 형식은 다음과 같습니다.

$.ajax(options)

여기서 options는 객체 유형입니다. , 이 Ajax 호출의 특정 매개변수를 지정합니다. 여기에 가장 일반적으로 사용되는 매개변수를 첨부합니다.

datatype: "json",

type: 'post', + }})데이터베이스 부분의 스크린샷:

경고("로드 중");

좋아요, 위의 내용은 jquery에서 ajax 호출을 구현하는 여러 가지 방법입니다. 이제 좀 더 직관적인 새로운 작은 예제를 게시하겠습니다.

프런트엔드 수신 페이지:

jquery 모바일 패키지 소개에 주의하세요

<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>

로그인 후 복사

백엔드 2.jsp 페이지: (주로 프론트엔드에서 json 데이터를 수신하는 여러 방법을 테스트하기 위한 것입니다. 백엔드가 분리되지 않고 매우 간단합니다)

org.json 패키지 소개에 주의하세요

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

로그인 후 복사

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

로그인 후 복사

위 문장의 기능은 다음과 같습니다: Access-Control-Allow 값 -Origin은

wildcard

일 수 있습니다. *

*이면 괜찮습니다. 이때 모든 외부 js 요청은 허용됩니다.

<%@ 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();
	}
%>

로그인 후 복사

위 내용은 jQuery에서 $.get, $.post, $.getJSON 및 $.ajax 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!