讲给后台程序员看的前端系列教程(62)——jQuery的AJAX实现

Mybatis研习录
笨鸟向东飞
谷哥的小弟

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

概述

之前,我们介绍过JavaScript原生AJAX技术;在此,我们学习jQuery中对于AJAX的实现。

在jQuery中AJAX常见使用方式如下:

jQuery.ajax(url,[settings])
简写为$.ajax(url,[settings]),该方式可处理GET和POST请求

参数如下:

  • url:请求URL
  • settings:请求设置

jQuery.get(url, [data], [callback], [type])
简写为$.get(url, [data], [callback], [type]),该方式用于处理GET请求

参数如下:

  • url:请求URL
  • data:请求参数
  • callback:回调函数
  • type:响应数据的格式,例如:xml, html, script, json, text等等

jQuery.post(url, [data], [callback], [type])
简写为$.post(url, [data], [callback], [type]),该方式用于处理POST请求

参数如下:

  • url:请求URL
  • data:请求参数
  • callback:回调函数
  • type:响应数据的格式,例如:xml, html, script, json, text等等

AJAX使用示例

在此,以示例形式介绍jQuery中AJAX的使用。

AJAX示例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AJAX</title>
		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			//利用$.ajax()进行Get请求
			$("#ajaxGetButton").click(function() {
				var url = "http://httpbin.org/get";
				var params = {
					"username": "lucy",
					"nickname": "pipi"
				};
				$.ajax({
					"url": url,
					"data": params,
					"type": "GET",
					"success": function(data) {
						console.log(data);
						console.log(data.url);
						console.log(data.args.username);
						console.log(data.args.nickname);
					},
					"error": function(data) {
						console.log(data);
					},
					"dataType": "json"
				});

			});


			//利用$.ajax()进行Post请求
			$("#ajaxPostButton").click(function() {
				var url = "http://httpbin.org/post";
				var params = {
					"username": "lucy",
					"nickname": "pipi"
				};
				$.ajax({
					"url": url,
					"data": params,
					"type": "POST",
					"success": function(data) {
						console.log(data);
						console.log(data.url);
						console.log(data.form.username);
						console.log(data.form.nickname);
					},
					"error": function(data) {
						console.log(data);
					},
					"dataType": "json"
				});

			});

			//利用$.get()发送get请求
			$("#getButton").click(function() {
				var url = "http://httpbin.org/get";
				var params = {
					"username": "lucy",
					"nickname": "pipi"
				};
				$.get(
					url,
					params,
					function(data) {
						console.log(data);
						console.log(data.url);
						console.log(data.args.username);
						console.log(data.args.nickname);
					},
					"json"
				);
			});
			
			//利用$.ajax()提交表单
			function firstSubmit() {
				var url = "http://httpbin.org/post";
				$.ajax({
					"url": url,
					"data": $("#userform1").serialize(),
					"type": "POST",
					"success": function(data) {
						console.log(data);
						console.log(data.url);
						console.log(data.form.username);
						console.log(data.form.userage);
					},
					"error": function(data) {
						console.log(data);
					},
					"dataType": "json"
				});
				return false;
			}
			
			//利用$.post()提交表单
			function secondSubmit() {
				var url = "http://httpbin.org/post";
				var params = $("#userform2").serialize();
				console.log(params);
				$.post(
					url,
					params,
					function(data) {
						console.log(data);
						console.log(data.url);
						console.log(data.form.username);
						console.log(data.form.userage);
					},
					"json"
				);
				return false;
			}
			
		</script>
	</head>
	<body>
		<h2 style="color: red;">本文作者:谷哥的小弟</h2>
		<h2 style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>
		<button id="ajaxGetButton">利用$.ajax()进行Get请求</button>
		<br /><br />
		<button id="ajaxPostButton">利用$.ajax()进行Post请求</button>
		<br /><br />
		<button id="getButton">利用$.get()发送get请求</button>
		<br /><br />
		<form method="post" id="userform1" onsubmit="return firstSubmit()">
			姓名: <input type="text" id="name" name="username" style="width: 150px" />
			<br /><br />
			年龄: <input type="text" id="age" name="userage" style="width: 150px" />
			<br /><br />
			<input type="submit" value="利用$.ajax()提交表单" />
		</form>
		<br /><br />
		<form method="post" id="userform2" onsubmit="return secondSubmit()">
			姓名: <input type="text" id="name" name="username" style="width: 150px" />
			<br /><br />
			年龄: <input type="text" id="age" name="userage" style="width: 150px" />
			<br /><br />
			<input type="submit" value="利用$.post()提交表单" />
		</form>
	</body>
</html>

在这里插入图片描述

AJAX示例2

项目结构
在这里插入图片描述
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AJAX</title>
		<script type="text/javascript" src="jQuery/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$(function() {
				//利用$.ajax()请求数据
				$("#ajaxButton").click(function() {
					var url = "/AJAX04/AJAXServlet";
					var params = {
						"username": "lucy",
						"password": "123"
					};
					$.ajax({
						"url": url,
						"data": params,
						"type": "POST",
						"success": function(data) {
							console.log(data);
							console.log(data.message);
						},
						"error": function(data) {
							console.log(data);
							console.log(data.message);
						},
						"dataType": "json"
					});

				});

				//利用$.get()发送get请求
				$("#getButton").click(function() {
					var url = "/AJAX04/AJAXServlet";
					var params = {
						"username": "lucy",
						"password": "123"
					};
					$.get(
						url,
						params,
						function(data) {
							console.log(data);
							console.log(data.message);
						},
						"json"
					);
				});

				//利用$.post()发送post请求
				$("#postButton").click(function() {
					var url = "/AJAX04/AJAXServlet";
					var params = {
						"username": "lucy",
						"password": "123"
					};
					$.post(
						url,
						params,
						function(data) {
							console.log(data);
							console.log(data.message);
						},
						"json"
					);
				});

			});
		</script>
	</head>
	<body>
		<h2 style="color: red;">本文作者:谷哥的小弟</h2>
		<h2 style="color: red;">博客地址:http://blog.csdn.net/lfdfhl</h2>
		<button id="ajaxButton">利用$.ajax()发送请求</button>
		<button id="getButton">利用$.get()发送get请求</button>
		<button id="postButton">利用$.post()发送post请求</button>
	</body>
</html>

在这里插入图片描述
AJAXServlet

package cn.com;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 本文作者:谷哥的小弟 
 * 博客地址:http://blog.csdn.net/lfdfhl
 * 
 * 在jQuery中使用ajax
 */
public class AJAXServlet extends HttpServlet {
	
	private static final long serialVersionUID = -4452579660869800468L;

	@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String method = request.getMethod();
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		System.out.println("请求方式:" + method);
		System.out.println("请求参数:" +"username="+username+",password="+password);
		if("lucy".equals(username)&&"123".equals(password)) {
			//设置响应数据
			String jsonData = "{\"message\":\"success\"}";
			//设置响应格式
			response.setContentType("application/json;charset=UTF-8");
			//返回响应内容
			response.getWriter().print(jsonData);
		}else {
			//设置响应数据
			String jsonData = "{\"message\":\"error\"}";
			//设置响应格式
			response.setContentType("application/json;charset=UTF-8");
			//返回响应内容
			response.getWriter().print(jsonData);
		}
		
    }
    
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	this.doGet(request, response);
    }
}

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>AJAX04</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-list>
  
  <servlet>
    <servlet-name>AJAXServlet</servlet-name>
    <servlet-class>cn.com.AJAXServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>AJAXServlet</servlet-name>
    <url-pattern>/AJAXServlet</url-pattern>
  </servlet-mapping>
  
  
</web-app>
展开阅读全文
©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值