javaweb+jQuery ajax实例

什么是ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

jQuery对ajax方法进行了很好的封装，使用起来非常便利。

1.引入jquery库文件

可以引用本地的jquery.js或者jquery.min.js文件，语法如下：

<script src='jquery.min.js'></script>

或者通过CDN(内容分发网络)引用，此时需要联网

//Runoob CDN
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
//Baidu CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
//Google CDN
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>

2.在页面上使用jQuery封装好的ajax方法

$.ajax({url:'', //要请求的url地址type:'POST', //请求方法 GET or POSTasync:true, //是否使用异步请求的方式timeout:5000, //请求超时的时间，以毫秒计data:{name : 'rammus'}, //参数，用POST方法时使用，如果用GET方法则直接在url后拼接参数即可dataType:'json', //预期的服务器返回参数类型beforeSend:function(){...},//再发送请求前调用的方法success:function(data) {console.log(data);}, //请求成功时回调方法，data为服务器返回的数据error:function(){...}, //请求发生错误时调用方法complete:function(){...} //回调方法 无论success或者error都会执行
});

3.实例(从数据库中获取数据并显示在前台)

IDEA创建maven项目

Maven项目对象模型(POM)，可以通过一小段描述信息来管理项目的构建，报告和文档的软件项目管理工具。
Maven 除了以程序构建能力为特色之外，还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性，所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法，许多 Apache Jakarta 项目发文时使用 Maven，而且公司项目采用 Maven 的比例在持续增长。

配置pom.xml引入需要的连接mysql需要的jar包

<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.38</version>
</dependency>
<!-- 使用log4j进行日志记录 -->
<!-- https://mvnrepository.com/artifact/log4j/log4j -->
<dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>1.2.17</version>
</dependency>

创建一个servlet并在web.xml中进行配置，其url将作为前台ajax请求的地址

数据库连接工具类

package cn.rammus.util;

import org.apache.log4j.Logger;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

/**
* Created by Rammus on 2017/11/1.
*/
public class ConnectionUtil {

private static final Logger logger = Logger.getLogger(ConnectionUtil.class);
private static final String URL = "jdbc:mysql://localhost:3306/j2ee";
private static final String USERNAME = "root";
private static final String PASSWORD = "";public static Connection getConnection() throws SQLException {try {Class.forName("com.mysql.jdbc.Driver");}catch (Exception e) {logger.error("数据库驱动加载失败！");e.printStackTrace();}Connection connection = null;try {connection = DriverManager.getConnection(URL, USERNAME, PASSWORD);} catch (SQLException e) {e.printStackTrace();}return connection;
}

}

servlet代码

package cn.rammus.servlet;import cn.rammus.util.ConnectionUtil;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;/*** Created by Rammus on 2017/11/1.*/
public class MyServlet extends HttpServlet{@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {try {java.sql.Connection connection = ConnectionUtil.getConnection();Statement statement = connection.createStatement();String sql = "SELECT * FROM course";ResultSet rs = statement.executeQuery(sql);StringBuilder s = new StringBuilder("拥有的课程有:");while(rs.next()) {s.append(rs.getString(2));if(!rs.isLast()) {s.append("、");}}//解决返回的字符串编码问题resp.setCharacterEncoding("utf-8");PrintWriter out = resp.getWriter();//将数据流入输出流out.print(s);} catch (SQLException e) {e.printStackTrace();}}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}}

web.xml的配置

<!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app><display-name>Archetype Created Web Application</display-name><servlet><servlet-name>myServlet</servlet-name><servlet-class>cn.rammus.servlet.MyServlet</servlet-class></servlet><servlet-mapping><servlet-name>myServlet</servlet-name><url-pattern>/getCourse.do</url-pattern></servlet-mapping>
</web-app>

前台测试页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><script src="jquery.min.js"></script><script>function getCourse() {$.ajax({url : 'getCourse.do',type: 'GET',dataType : 'text',async : true,timeout : 50000,success : function(data) {document.getElementById('course').innerHTML = data;},error : function() {var errorMsg = '无法获取课程';document.getElementById('course').innerHTML = errorMsg;}});}</script>
</head>
<body>
<input type="button" id="me" value="查看课程" onclick="getCourse()"/>
<div id="course"></div>
</body>
</html>

效果

注意此时页面是没有刷新的，因此我们便完成了对服务器的异步请求。

后记

ajax是一种非常便利的客户端与服务端通信的方式，在必要的时候使用ajax会大大提高用户的体验。
ajax中文名为阿贾克斯，但是笔者推荐它的英文读法：[ˈeɪˌdʒæks]

javaweb+jQuery ajax实例相关推荐

jQuery Ajax 实例 ($.ajax、$.post、$.get)
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:h ...
jQuery Ajax 实例全解析(转)
jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
jQuery Ajax 实例
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:h ...
jQuery Ajax 实例全解析（转载）
jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
【JavaScript】jQuery Ajax 实例全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
jQuery Ajax 实例全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
jquery ajax实例 php,jquery中各个ajax实例操作
jquery_ajax.html $(document).ready(function(){ //jquery.ajax() $("#button1").click(functio ...
jquery ajax实例get,jQuery中ajax的get()方法用法实例
本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: $.get(url, [dat ...
JQuery ajax()实例
前端页面: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...