jQuery AJAX简介和简单实例

Borny鼎鼎

已于 2023-07-11 11:19:36 修改

阅读量1k

点赞数

分类专栏：其他文章标签： jquery

于 2017-06-14 14:53:31 首次发布

本文链接：https://blog.csdn.net/vinegar93/article/details/73227769

版权

其他专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、jQuery AJAX简介

AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

2、jQuery load()方法

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：$(selector).load(URL,data,callback);

必需的URL参数规定您希望加载的URL。

可选的data参数规定与请求一同发送的查询字符串键/值对集合。

可选的callback参数是load()方法完成后所执行的函数名称。

3、jQuery $.get()方法

$.get()方法通过HTTP GET请求从服务器上请求数据。

语法：$.get(URL,callback);

必需的URL参数规定您希望请求的URL。

可选的callback参数是请求成功后所执行的函数名。

4、jQuery $.post()方法

$.post()方法通过HTTP POST请求从服务器上请求数据。

语法：$.post(URL,data,callback);

必需的URL参数规定您希望请求的URL。

可选的data参数规定连同请求发送的数据。

可选的callback参数是请求成功后所执行的函数名。

5、简单实例

（1）项目结构

（2）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=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#get1").click(function(){
			$.get("/jQueryAjax/AServlet?id=10000", function(data, status){
		    	alert("数据: " + data + "\n状态: " + status);
		  	});
		});
		$("#post1").click(function(){
			$.post("/jQueryAjax/AServlet", {
		        name: "Tom",
		        password: "123"
		    }, function(data, status){
		        alert("数据: " + data + "\n状态: " + status);
		    });
		});
		$("#ajax1").click(function(){
		  	$("#div1").load("/jQueryAjax/AServlet", {
		  		name: "Jerry",
		        password: "456"
		  	}, function(responseTxt, statusTxt, xhr){
			    if(statusTxt == "success") {
			    	alert("外部内容加载成功!");
			    }
			    if(statusTxt == "error") {
			    	alert("状态: " + xhr.status + "\n含义: " + xhr.statusText);
			    }
		  	});
		});
	});
</script>
</head>
<body>
	<input type="button" id="get1" value="get" />
	<input type="button" id="post1" value="post" />
	<input type="button" id="ajax1" value="ajax" />
	<div id="div1"></div>
</body>
</html>

（3）AServlet.java

package com.jqa.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		String id = request.getParameter("id");
		System.out.println(id);
		response.getWriter().print("Hello");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		String name = request.getParameter("name");
		System.out.println(name);
		String password = request.getParameter("password");
		System.out.println(password);
		response.getWriter().print("World");
	}

}

（4）web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>jQueryAjax</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>AServlet</servlet-name>
    <servlet-class>com.jqa.servlet.AServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AServlet</servlet-name>
    <url-pattern>/AServlet</url-pattern>
  </servlet-mapping>
</web-app>

（5）页面运行结果

依次点击get、post和ajax按钮。

（6）控制台运行结果

10000
Tom
123
Jerry
456

Borny鼎鼎

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery AJAX简介和简单实例

语法：$(selector).load(URL,data,callback);可选的callback参数是load()方法完成后所执行的函数名称。$.post()方法通过HTTP POST请求从服务器上请求数据。$.get()方法通过HTTP GET请求从服务器上请求数据。可选的callback参数是请求成功后所执行的函数名。可选的callback参数是请求成功后所执行的函数名。必需的URL参数规定您希望加载的URL。必需的URL参数规定您希望请求的URL。必需的URL参数规定您希望请求的URL。
复制链接

扫一扫