1、什么是 AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。
2、关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,可以使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示:如果没有 jQuery,AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着我们必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。
3、AJAX的使用
$.ajax({
url:"Login",
type:"get",
data:{
account:$(".account").val(),
password:$(".password").val()
},
//接收结果
success:function(data){
alert("返回的帐号是"+data.account+",返回的密码是:"+data.password)
console.log(data)
alert(data.account)
}
})
其中
1、url:" "的参数为自己创建的Servlet文件的 @WebServlet("/Login") 名,
2、type:" "的参数为自己选择使用的方法
3、data:{ }
为自己从前端获取传往后端的参数
4、success:function(data){ }
为接收结果的方法
4、使用举例
第一步,在eclipse中创建自己的项目文件:
首先在WebContent下创建自己的HTML文件:(index.html)注意自己导入js的路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jQuery.js"></script>
<script>
$(function(){
$(".btn").on("click",function(){
$.ajax({
url:"Login",
type:"get",
data:{
account:$(".account").val(),
password:$(".password").val()
},
//接收结果
success:function(data){
alert("返回的帐号是"+data.account+",返回的密码是:"+data.password)
console.log(data)
alert(data.account)
}
})
})
})
</script>
</head>
<body>
第一个项目<br>
账号:<input type="text" class="account" name="" id=""><br>
密码:<input type="text" class="password" name="" id=""><br>
<input type="button" class="btn" value="提交" name="" id=""><br>
</body>
</html>
然后创建这样的Servlet文件
内容如下:
package test.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Login
*/
@WebServlet("/Login")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LoginServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//修改编码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("json/text;charset=utf-8");
//获取数据
String account = request.getParameter("account");
String password = request.getParameter("password");
//模拟逻辑
System.out.println("从前端获取的账号是"+account);
System.out.println("从前端获取的密码是"+password);
account = account+"你好";
String res = "{\"account\":\""+account+"\",\"password\":\""+password+"\"}";
//响应给前端
response.getWriter().write(res);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
其中doGet和doPost里面的内容放错位置也没关系,注意里面的 doGet(request, response); 代码即可