ajax基础——jq

短命女 2022-01-15 14:05 238阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>jquery</title>
    </head>
    <body>
    	<script src="jquery.min.js"></script>
    	<div id="checkResult"></div>
    	输入账号验证：<input id="name" type="text"><br><br>
    	<script type="text/javascript">
    		$(function(){ 
    			$("#name").keyup(function(){ 
    				var page = "/study/checkName.jsp"
    				var value = $(this).val();
    				/*$.ajax({ url:page,//访问的page页面 data:{"name":value},//提交的参数 success:function(result){//服务器成功返回后对应的响应函数 $("#checkResult").html(result); } }); */
    				$.post(
    					page,
    					{ "name":value},
    					function(result){ 
    						$("#checkResult").html(result);
    					}
    				);
    			});
    		});
    	</script>
    
    	<script>
    		$(function(){ 
    			$("#name2").keyup(function(){ 
    				var value = $(this).val();
    				var page = "/study/checkName.jsp?name="+value;
    				$("#checkResult").load(page);
    			});
    		});
    	</script>
    	输入账号：<input type="text" id="name2"><br><br>
    
    	<div id="Result"></div>
    	<a href="/study/checkName.jsp">/study/checkName.jsp</a>
    	<form id="form">
    		输入账号：<input type="text" name="name" id="name"><br>
    		密码：<input type="text" name="pass" id="pass"><br>
    	</form>
    
    	<script>
    		$(function(){ 
    			$("input").keyup(function(){ 
    				var data = $("#form").serialize();
    				var url = "/study/checkName.jsp";
    				var link = url+"?"+data;
    				$("a").html(link);
    				$("a").attr("href",link);
    			});
    		});
    	</script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq-ajax封装

引入线上jquery: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ht

Dear 丶/ 2022年09月14日 02:27/ 0 赞/ 110 阅读

相关 JQ基础事件

最近终于学到了事件，也是最常用到的地方，李炎恢老师详细的介绍了各种方法，我也是把李炎恢老师所讲的总结一下学过JS肯定知道DOM2级的绑定事件方法addEventListen

旧城等待，/ 2022年08月01日 12:24/ 0 赞/ 158 阅读

相关 Ajax、json，原生JS和JQ使用Ajax

概念 Ajax：异步的JavaScript和XML ，用于在Web页面中实现异步数据交互。原理在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服

太过爱你忘了你带给我的痛/ 2022年07月13日 00:29/ 0 赞/ 156 阅读

相关 JQ-AJAX-简单实用loading效果

在AJAX请求前设置loading效果： <!DOCTYPE html> <html> <head> <meta charse

怼烎@/ 2022年05月11日 10:20/ 0 赞/ 139 阅读

相关封装jq的ajax

做了一个简单的ajax封装，以便在项目中重复使用，以后想到更好的版本也会更新， const http = "域名"; function ajax(d

墨蓝/ 2022年04月12日 14:25/ 0 赞/ 179 阅读

相关 jq live的ajax函数调用

今天碰到一个很诡异的问题，在调用ajax函数处理的时候： <a href="javascirp:void(0); class="ok" />确定 </a>

水深无声/ 2022年03月20日 13:48/ 0 赞/ 310 阅读

相关 JQ 的 AJAX 方法

JQ 的 AJAX 方法 JQ是一个强大的JS引用类库，在AJAX方面同样是功能强大，处理了兼容，简化了请求方法，有益于快速开发。一、原生的AJAX v

怼烎@/ 2022年03月11日 06:00/ 0 赞/ 259 阅读

相关 ajax基础——jq

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

短命女/ 2022年01月15日 14:05/ 0 赞/ 239 阅读

相关 json基础——jq

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

系统管理员/ 2022年01月15日 12:51/ 0 赞/ 189 阅读

相关 jq ajax请求跨域问题

前端遇到跨域一般和后端协调让后端： ![1745736-20190718131248047-346537354.png][] 转载于:https://www.cnbl

àì夳堔傛蜴生んèń/ 2021年10月26日 15:34/ 0 赞/ 415 阅读