jquery实现ajax无刷新效果_H5之家 - 中国HTML5教程资源分享第一站

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"> <input type="button" value="postTest"> </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是自己随便写的测试数据 out.print("success"); //print的内容会输出到页面 } else { out.print("fail"); } out.flush(); out.close(); } }

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

jquery实现ajax无刷新效果

其实逻辑也就这么简单
1、请求通过url地址到要请求的目标地址
2、目标地址进行一系列操作将需要返回数据输出到页面，是通过创建response.getWriter()的输出流，通过输出流的print()方法把返回的内容发送到页面。
3、请求方法通过回调函数function(data){}来接收到目标地址输出到页面的数据data
4、期间的请求都是不刷新的。

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