首页 > 其他分享 >jQuery实现Ajax通讯的几种常用方式

jQuery实现Ajax通讯的几种常用方式

时间:2023-04-05 11:04:56浏览次数:44  
标签:jQuery function 通讯 get url alert Ajax post data


这里介绍3种

jQuery.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )

jQuery.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )

jQuery.ajax( url, [ settings ] )

第三种是我最常用的,看个人习惯了,其实都OK

第一种不支持中文,要用中文就得转码,用中文一般用post,也就是第二种,表单提交也一般使用post;第三种可以理解为前面两种的一个综合。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<!-- ajax演示 -->
	<script type="text/javascript" src="<c:url value='/js/jquery-3.3.1.js'/>"></script>
	<script type="text/javascript">
		/* get方式 */
		function get(){
			var url = "<c:url value='/GetServlet'/>";
			$.get(
				url,
				{
					name:"jack",
					age:"23"
				},
				function(data, textStatus, jqXHR){
					alert(data);
				}
			);
		}
		/* post方式 */
		function post() {
			var url = "<c:url value='/GetServlet'/>";
			$.post(
				url,
				{
					name:"中文",
					age:"23"
				},
				function (data){
					alert(data);
				}
			);
		}
		/* Ajax */
		$(function(){
			$("#ajax").click(function () {
				$.ajax({
					url:"<c:url value='/GetServlet'/>",
					data:{
						name:"老干爹",
						age:"55"
					},
					type:"POST",
					dataType:"JSON",
					success: function(data){
						alert(data.name+","+data.age);
					},
					error: function(){
						alert("出错啦");
					}
				});
			});
		});
	</script>
</head>
<body>
	<button onclick="get()">get方式访问后台</button><hr>
	
	<button onclick="post()">post方式访问后台</button><hr>
	
	<input type="button" value="ajax方式" id="ajax"/>
		
</body>
</html>

servlet代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<!-- ajax演示 -->
	<script type="text/javascript" src="<c:url value='/js/jquery-3.3.1.js'/>"></script>
	<script type="text/javascript">
		/* get方式 */
		function get(){
			var url = "<c:url value='/GetServlet'/>";
			$.get(
				url,
				{
					name:"jack",
					age:"23"
				},
				function(data, textStatus, jqXHR){
					alert(data);
				}
			);
		}
		/* post方式 */
		function post() {
			var url = "<c:url value='/GetServlet'/>";
			$.post(
				url,
				{
					name:"中文",
					age:"23"
				},
				function (data){
					alert(data);
				}
			);
		}
		/* Ajax */
		$(function(){
			$("#ajax").click(function () {
				$.ajax({
					url:"<c:url value='/GetServlet'/>",
					data:{
						name:"老干爹",
						age:"55"
					},
					type:"POST",
					dataType:"JSON",
					success: function(data){
						alert(data.name+","+data.age);
					},
					error: function(){
						alert("出错啦");
					}
				});
			});
		});
	</script>
</head>
<body>
	<button onclick="get()">get方式访问后台</button><hr>
	
	<button onclick="post()">post方式访问后台</button><hr>
	
	<input type="button" value="ajax方式" id="ajax"/>
		
</body>
</html>

///--以下为补充内容--//

1. w3s的在线jQuery中文文档:http://www.w3school.com.cn/jquery/jquery_reference.asp

2. jquery中文网:https://www.jquery123.com/

3.jquery官网:https://jquery.com/

4.jQuery离线手册

标签:jQuery,function,通讯,get,url,alert,Ajax,post,data
From: https://blog.51cto.com/u_15741949/6170279

相关文章

  • Js/Jquery获取自定义属性的方法
    html:<spanid="item"data-test='test'></span>方法一、原生JS的getAttribute获取自定义属性设置属性.setAttribute("属性","值")获取属性.getAttribute("属性")varspan=document.getElementById('item').ge......
  • js和jquery获取屏幕宽高以及加margin和padding等边距的宽高
    Javascript:网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的高)网页正文全文宽:document.body.scrollWidth网页正文......
  • jQuery中this与$(this)的使用与区别
    https://blog.csdn.net/h2604396739/article/details/95191644this与$(this)的区别this其实是一个Html元素,是一个javascript对象,常用其来为其属性赋值。$(this)是一个jQuery对象,不存在html的属性,只能通过方法传参的方式为属性赋值。如下代码$(“#textbox”).hover(function(......
  • jQuery height() 方法
    https://blog.csdn.net/m0_57835615/article/details/117827323jQueryheight()方法可用于设置或返回被选元素的高度。返回元素的高度时,只返回匹配到的第一个元素的高度。设置元素的高度时,所有匹配到的元素的高度都会被设置。值得一提的是,该方法不包含元素的内外边距以及边框......
  • MODBUS协议下,PLC与组态软件能否实现无线通讯?
    本方案是组态软件与西门子S7-200Smart进行无线MODBUS通信的实现方法。此方案可以作为西门子S7-200Smart与组态软件的无线MODBUS通信实例。在本方案中采用了西门子PLC专用无线通讯终端DTD434M,作为实现无线通讯的硬件设备。一、方案概述1.有线MODBUS网络组态王配置为标准......
  • urilib: ajax&异常&cookie登陆&handler&代理[池]
    urllib_9_ajax的get请求豆瓣电影第一页""".-''-..--._..._.'.-.)|__|......
  • swoft 客服系统websocket。即时通讯小功能
     挥手,握手就不解释了。直接上代码启动swoftws的服务  <?phpdeclare(strict_types=1);/***ThisfileispartofSwoft.**@linkhttps://swoft.org*@documenthttps://swoft.org/docs*@[email protected]*@licensehttps://github.co......
  • 公司内部通讯软件如何选择?
    随着互联网和通讯软件的普及,让远距离沟通可以随时实现,给人们的生活和工作带来了许多便利,但目前许多公司内部使用的是QQ、微信等社交通讯软件,虽然这些社交通讯软件能够解决公司内部部分沟通需求,但却有着一定的瓶颈,而且也提升不了工作效率。因此,采用公司级的通讯软件自然成为了企业......
  • jQuery图片放大镜插件jqzoom
    <html><head><title>JQzoomDemo</title><scriptsrc="../js/jquery-1.3.2.min.js"type="text/javascript"></script><scriptsrc="../js/jqzoom.pack.1.0.1.js"type="text/javascript"......
  • 理解jquery的$.extend()、$.fn和$.fn.extend()
    jQuery为开发插件提拱了两个方法,分别是:·jQuery.fn.extend();jQuery.extend();jQuery.fnjQuery.fn=jQuery.prototype={init:function(selector,context){//….//……};原来  jQuery.fn=jQuery.prototype  对prototype肯定不会陌生啦。·虽然javascript......