0
点赞
收藏
分享

微信扫一扫

JQuery异步请求之$.ajax()

云上笔记 2022-02-11 阅读 70


​​AJAX各种实现方式​​

​​JQuery异步请求之$.ajax()​​

​​GET请求​​

​​POST请求​​



​​AJAX各种实现方式​​



JQuery异步请求之$.ajax()



GET请求



例子:单击某个按钮,异步请求servlet,然后把响应内容返回给div



jsp代码


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>js原生异步</title>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
input{
width:300px;
height: 50px;
background-color:burlywood ;
}
div{
width:300px;
height: 200px;
background-color: pink;
}
</style>
<script>
function myClick() {
$.ajax({
url:"demo1" ,
type:"GET",
data:{
"name":"林不渣",
"age":27,
"remarks":"没有女朋友"
},
success:function(data){
$("#div").html(data)
}
})
}
</script>
</head>
<body>
<input type="button" value="单击我触发请求" onclick="myClick();" > <br><br><br>
<div id="div">

</div>
</body>
</html>


servlet的demo1代码


package com.lingaolu.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;

/**
* @author 林高禄
* @create 2020-08-07-14:58
*/
@WebServlet("/demo1")
public class Demo1 extends HttpServlet {

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
Map<String, String[]> parameterMap = request.getParameterMap();
for(String[] sArr:parameterMap.values()){
for(String s:sArr){
writer.write("<h1>"+s+"</h1>");
}
}
}

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}


启动访问,单击按钮前

JQuery异步请求之$.ajax()_java



单击按钮后

JQuery异步请求之$.ajax()_java_02



POST请求



例子:单击某个按钮,异步请求servlet,然后把响应内容返回给div

JQuery异步请求之$.ajax()_JQuery_03



jsp代码


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>js原生异步</title>
<script src="js/jquery-3.3.1.min.js"></script>
<style>
input{
width:300px;
height: 50px;
background-color:burlywood ;
}
div{
width:300px;
height: 100px;
background-color: pink;
}
</style>
<script>
function myClick() {
$.ajax({
url:"demo1" ,
type:"POST",
data:{
"name":"林大帅",
"age":27
},
success:function(data){
$("#div").html(data)
}
})
}
</script>
</head>
<body>
<input type="button" value="单击我触发请求" onclick="myClick();" > <br><br><br>
<div id="div">

</div>
</body>
</html>


servlet的demo1代码


package com.lingaolu.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;

/**
* @author 林高禄
* @create 2020-08-07-14:58
*/
@WebServlet("/demo1")
public class Demo1 extends HttpServlet {

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
writer.write("<h1>"+name+"</h1>");
writer.write("<h1>"+age+"</h1>");

}

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}


 启动访问,单击按钮前

JQuery异步请求之$.ajax()_JQuery_04



单击按钮后

JQuery异步请求之$.ajax()_JQuery_05



当然还有很多参数以及回调函数,比如请求出错回调等,参考API​​https://jquery.cuishifeng.cn/jQuery.Ajax.html​​ 



举报

相关推荐

0 条评论