3_jQuery实现ajax的其他写法
jQuery实现AJAX的其他写法
4.3.1 $.load()
jQuery load() 方法是简单但强大的 AJAX 方法，load() 方法从服务器加载数据，并把返回的数据放入被选元素中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式,
语法为:
$(selector).load(URL,data,callback);参数的含义为:
url: URL地址
data:待发送参数。
callback:载入成功时回调函数。
测试代码
准备第一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<script>
function testLoad(){
//$("#d1").load("servlet2.do","username=aaa&password=bbb",function(){alert("响应结束")})
$("#d1").load("loadPage.html #a")
}
</script>
</head>
<body>
<div id="d1" style="width: 100px;height: 100px;border: 1px solid black">
</div>
<input type="button" value="测试" onclick="testLoad()">
</body>
</html>
第二个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="a">
<li>JAVA</li>
<li>HTML</li>
<li>CSS</li>
<li>Mysql</li>
<li>python</li>
</div>
</body>
</html>
后台代码
package com.msb.servlet;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.msb.pojo.Student;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
/**
* @Author: Ma HaiYang
* @Description: MircoMessage:Mark_7001
*/
@WebServlet("/servlet2.do")
public class Servlet2 extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println(username);
System.out.println(password);
resp.setContentType("text/html;charset=UTF-8");
resp.setCharacterEncoding("UTF-8");
resp.getWriter().print("<h1>hello</h1>");
}
}
4.3.1 $.get()
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。
语法为:
$.get(url,[data],[callback],[type])
参数的含义为:
url: URL地址
data:待发送参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default
该函数是简写的 Ajax 函数，等价于：
$.ajax({
type: 'GET',
url: url,
data: data,
success: success,
dataType: dataType
});
4.3.1 $.getJSON()
JSON是一种较为理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的ajax()函数的一个简化版本。语法为:
$.getJSON(
url, //请求URL
[data], //传参，可选参数
[callback] //回调函数，可选参数
);
该函数是简写的 Ajax 函数，等价于：
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
仅仅是等效于上述函数,但是除此之外这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成"myurl?callback=X"这种格式，让程序执行回调函数X。
注意:$.getJSON是以GET方式提交数据，如果需要提交很大的数据量，可选$.post
$.post()
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。
语法为:
$.post(url,[data],[callback],[type])
参数的含义为:
url: URL地址
data:待发送参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default
该函数是简写的 Ajax 函数，等价于：
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<script>
function testAjax(){
$.get(
"servlet1.do",
{"username":"zhangsan","password":"123456"},
function(list){
$.each(list,function(i,e){
console.log(e)
})
},
"json")
console.log("------------------------------")
$.getJSON(
"servlet1.do",
{"username":"zhangsan","password":"123456"},
function(list){
$.each(list,function(i,e){
console.log(e)
})
})
console.log("------------------------------")
$.post(
"servlet1.do",
{"username":"zhangsan","password":"123456"},
function(list){
$.each(list,function(i,e){
console.log(e)
})
},
"json")
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="testAjax()">
</body>
</html>
后端代码
package com.msb.servlet;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.msb.pojo.Student;
import sun.util.calendar.LocalGregorianCalendar;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
/**
* @Author: Ma HaiYang
* @Description: MircoMessage:Mark_7001
*/
@WebServlet("/servlet1.do")
public class Servlet1 extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println(username);
System.out.println(password);
Student stu1=new Student("小黑","男",10,new Date());
Student stu2=new Student("小白","男",10,new Date());
Student stu3=new Student("小黄","男",10,new Date());
Student stu4=new Student("小花","男",10,new Date());
ArrayList<Student> list =new ArrayList<>();
Collections.addAll(list,stu1,stu2,stu3,stu4);
GsonBuilder gb =new GsonBuilder();
gb.setDateFormat("yyyy-MM-dd");
Gson gson = gb.create();
String json = gson.toJson(list);
resp.setContentType("text/html;charset=UTF-8");
resp.setCharacterEncoding("UTF-8");
resp.getWriter().print(json);
}
}
