'' 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();
}
%> | 데이터베이스 부분의 스크린샷:
|
