Jquery의 Ajax 비동기 문제에 대한 토론
- 零到壹度원래의
- 2018-03-29 09:55:241164검색
이 기사는 주로 Jquery의 Ajax 비동기 문제에 대한 토론을 공유하며 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라가서 살펴보겠습니다.
1. $.get(url, [data], [callback], [type]) 은 asynchronous
2. [데이터], [콜백], [유형]); asynchronous
만 가능 매개변수 목록:
URL: 요청의 서버측 주소
데이터: 서버측 요청에 대한 데이터(키 = 값 형식 또는 JSON 형식일 수 있음)
콜백: 서버 기능이 성공적으로 응답했음을 나타냅니다. function (정상적으로 성공한 경우에만 실행 반환)
유형: 서버에서 반환한 데이터 유형을 나타냅니다(jquery는 지정된 유형에 따라 자동으로 변환을 입력합니다).
일반적으로 사용되는 반환 유형: text, json , HTML 등
.$.ajax({ option1:value1,option2:value2... } )
일반적으로 사용되는 옵션은 다음과 같습니다.
Async: 비동기 여부를 기본값으로 합니다. 진정한 비동기식입니다. .
유형: 요청 방법, POST/GET url: 요청 서버 주소. 예시 데모를 해보자:AjaxServle.java
package ajax;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//响应请求
//返回参数会json类型的字符串，前端jquery会自动将字符串解析为json对象
response.getWriter().write("{\"name\":\"Tom\",\"age\":18}");
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
TestAjax.html
<!DOCTYPE html>
<html>
<head>
<title>Jquery的Ajax异同步</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
//Get异步响应
function fn1(){
$.get(
"/WEB/ajaxServlet", //访问的资源地址
{"name":"zhangsan","age":22}, //请求服务器端的参数,可以是json格式
function(responseData) { //响应成功后执行的函数
var str="name: "+responseData.name+"; age: "+responseData.age;
document.getElementById("input1").value=str;
},
"json" //返回数据的格式
)
}
//Post异步响应
function fn2(){
$.post(
"/WEB/ajaxServlet", //访问的资源地址
{"name":"zhangsan","age":22}, //请求服务器端的参数,可以是json格式
function(responseData) { //响应成功后执行的函数
var str="name: "+responseData.name+"; age: "+responseData.age;
document.getElementById("input2").value=str;
},
"json" //返回数据的格式
)
}
//Ajax异步响应
function fn3(){
$.ajax(
{
url:"/WEB/ajaxServlet",
async:true, // 异步
type:"POST", // 请求方式
data:{"name":"lucy","age":18}, // 请求参数
success:function(data){ // 请求成功执行函数
document.getElementById("input3").value="Rose";
},
error:function(){
alert("请求失败"); // 请求失败执行函数
},
dataType:"json"
}
)
}
</script>
</head>
<body>
<input type="button" value="Get异步响应" onclick="fn1()"><input type="text" id="input1">
<br><br>
<input type="button" value="Post异步响应" onclick="fn2()"><input type="text" id="input2">
<br><br>
<input type="button" value="Ajax异步响应" onclick="fn3()"><input type="text" id="input3">
</body>
</html>인스턴스 효과 1: 요청이 성공할 때
예제 효과 2 : fn3()의 URL을 "/WEB/ajaxServlet33"으로 수정하여 요청이 실패할 때
위 내용은 Jquery의 Ajax 비동기 문제에 대한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.