您的位置：首页 > Web前端 > JQuery

jquery实现ajax无刷新效果

2017-09-02 09:52 465 查看

1、get请求和post请求

语法：jquery.get（url，[data]，[callback]，[type]）

语法：jquery.post（url，[data]，[callback]，[type]）

参数：url是必须的，其他三个都是可选的参数。

url：待载入页面的url地址

data：要发送的key/value参数

callback：载入成功时的回调函数

type：返回内容格式，xml, html, script, json, text, _default

2、举例

获得AjaxServlet页面返回的 json 格式的内容：

$.post("AjaxServlet",                             //1、请求的页面
{                                             //2、要发送的键值对数据
"username": "lili"
},
function(data){                               //3、请求成功的回调函数,data是传递回来的数据
console.log(data);
}, "json");                                   //4、返回内容的类型

3、做一个特别简单的例子体会一下用法。

index.jsp界面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function doGet(){
var url = "AjaxServlet";          //请求的地址
$.get(url,function(data){         //get请求
alert(data);                  //data：请求返回的数据
});
}

function doPost(){
var url = "AjaxServlet";          //请求的地址
$.post(url,{                      //post请求发送的数据，键值对。可以通过request.getParameter("键")来获得传递的数据的值
"usernameA":"admin",
"password":"123123"
},function(data){                  //回调函数
if(data == "success"){
alert("成功");
}
});
}
</script>
</head>
<body>
<input type="button" value="getTest" onclick="doGet()">
<input type="button" value="postTest" onclick="doPost()">
</body>
</html>

AjaxServlet代码：

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
out.print("这是get请求返回的内容");                              //这是返回的data，会发送到页面
out.flush();
out.close();
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");                         //设置响应的编码格式，以防止中文乱码

String username = request.getParameter("usernameA");            //得到post请求的时候传递进来的键值对
String password = request.getParameter("password");

PrintWriter out = response.getWriter();
if ("admin".equals(username) && "123123".equals(password)) {     //admin和123123是自己随便写的测试数据

4000
out.print("success");                                        //print的内容会输出到页面
} else {
out.print("fail");
}
out.flush();
out.close();
}
}

页面如下：点击getTest，会发送get请求，然后弹出返回的数据。但是我们可以看到虽然发送了请求，但是页面并没有刷新。

其实逻辑也就这么简单

1、请求通过url地址到要请求的目标地址

2、目标地址进行一系列操作将需要返回数据输出到页面，是通过创建response.getWriter()的输出流，通过输出流的print()方法把返回的内容发送到页面。

3、请求方法通过回调函数function(data){}来接收到目标地址输出到页面的数据data

4、期间的请求都是不刷新的。

下面这是使用JavaScript实现的get和post请求：

<script type="text/javascript">
var request = new XMLHttpRequest();

function doGet() {
var urls = "http://localhost:1234/Ajax/AjaxServlet";

request.open("GET", urls);                    //设置打开方式为get和请求的地址

request.send(null);                           //准备发送请求

request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200) {
var temp = request.responseText;      //响应的文本
}
}
}

function doPost() {
var urls = "http://localhost:1234/Ajax/AjaxServlet";

request.open("POST", urls);                                                      //设置打开方式为post和请求地址

request.setRequestHeader("content-Type","application/x-www-form-urlencoded");    //设置以表单形式提交
request.send("username=aaaa&password=123");                                       //准备发送请求（post请求有参数）

request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200) {
var temp = request.responseText;       //响应的文本
}
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax jquery

相关文章推荐

新的分享

章节导航