Home > Article > Web Front-end > Discussion on Jquery's Ajax asynchronous issues
This article mainly shares with you a discussion on Jquery's Ajax asynchronous issues. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to have a look.
1. $.get(url, [data], [callback], [type]); can only be Asynchronous
2. $.post(url, [data], [callback], [type]); Can only be Asynchronous
#Parameter list:
# url: Represents the server-side address of the request;
## type: Indicates the data type returned by the server (jquery will automatically type conversion according to the specified type),
Commonly used return types: text, json, html, etc.
.
$.ajax({ option1:value1,option2:value2... } )
Commonly used options are as follows:
async: whether to be asynchronous, the default is true, which means asynchronous; data: parameters sent to the server, it is recommended to use json Format; dataType: the data type returned by the server, commonly used text and json; success: successfully responds to the executed function, the corresponding type is the function type; type : Request method, POST/GET; URL: Request server-side address. Let’s do an example demonstration: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>
Instance effect 1: When the request is successful
##
The above is the detailed content of Discussion on Jquery's Ajax asynchronous issues. For more information, please follow other related articles on the PHP Chinese website!