Ajax技术复习---狂神笔记

认识两个注解
1 @ResponseBody 作用是将后台数据java对象转化成json数据对象
2 @RequestBody作用是将前端传过来json对象转化成pojo对象，
Ajax
异步的javaScript和xml,能够局部刷新网页技术，
本质
Ajax的本质是XMLHttpRequest对象(xhr),xhr能够向服务器发送请求和解析服务器响应提供了接口，能够以异步的形式获取数据，
JQuery Ajax
JQuery 中封装了Ajax,本质上也是XMLHttpRequest.方便了调用，
方法有$.ajax(), $.get(), $.post(), $.getJSON(),
$.ajax()方法中通过data属性来存放提交的数据，支持json格式，data属性中可以存放两种方式指定提交数据，一种是key=vlaue，key =value ，另一种是js对象

<script>function but(){var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"get",url:"jQuerajax.do",data:{ //js对象格式id:userid,name:username,},success:function(result){var s = result.toString();console.log(s);$("#span").html(result);}})}</script>

想要在$.ajax()中提交json数据，需要使用post方式提交，

<script>function but(){var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"post",url:"jQuerajax.do",dataType:"json",//将响应数据json对象转化成js对象data:JSON.stringify({ //将js对象转化成json对象id:usernid,name:username,}),success:function(result){alert(result.id+""+result.name);}})}</script>

$.get()方法是 $.ajax()基于get方式发送异步请求的简化版
语法： $.get(url,function(result))
$.get(url,data,function(result))

<script>function but(){var userid = $("#userid").val();var username = $("#username").val();$.get("url",{id:userid,name:username},function(result){//基于js对象方式传输数据$("#span").html(result);})}</script>

基于post

<script>function but(){var userid = $("#userid").val();var username = $("#username").val();$.post("url",{id:userid,name:username},function(result){//基于js对象方式传输数据$("#span").html(result);})}</script>

$.getJSON()的使用
$.getJSON()是基于 $.ajax()方法的get方式发送请求，并将响应结果中的json数据自动转化成js对象，
要求返回的数据必须是json数据，

 <script>function but(){var userid = $("#userid").val();var username = $("#username").val();$.getJSON("url",{id:userid,name:username},function(result){$("#span").html(result.userid+""+result.username)})}</script>

serialize()方法使用
作用：将form表单中的数据自动拼接成name=value结构，
语法：var param = $(“form”).serialize();

 <script>function but(){var userid = $("#userid").val();var username = $("#username").val();var params = $("#form").serialize();$.ajax({type:"get",url:"url",data:params,success:function(result){alert(result.toString());}})}</script>

JQuery.ajax()url: 请求地址type：请求方式（get，post）headers:请求头data:要发送的数据，同时接收返回的数据contentType:即将发送信息到服务器内容的编码格式 async:是否异步timeout:设置请求超时时间beforeSend:发送请求前执行的函数complete:完成之后执行的函数success:成功之后执行的函数error:失败之后执行的函数accepts:发送给服务器，当前可以接受的数据类型dataType:将服务器端返回的内容转化成指定的类型"xml":将服务器返回的内容转化成xml格式"text"：将服务器返回的内容转化成text文本格式

示例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Ajax</title><!--注意路径问题 ${pageContext.request.contextPath}/ --><script src="js/jquery-1.9.1.js"></script><script type="text/javascript">function al(){$.ajax({ //默认是get请求url:"/ajxa/hello";data:{"name":$("txtName").val()},success:function(data){console.log(data)}async:true});$("txtName").val();}</script></head><body>用户名：<input type="text" id="txtName" onblur="al()" /></body>
</html>

示例2 解析json

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Ajax</title><!--注意路径问题 ${pageContext.request.contextPath}/ --><script src="js/jquery-1.9.1.js"></script></head><body><input type="button" id="btn" value="获取数据" /><table align="conter"><tr><td>姓名</td><td>姓名</td><td>姓名</td></tr><tbody id="content"></tbody></table><script type="text/javascript">$(function(){$("#btn").click(function(){$.post("/ajax/hello",function(data){console.log(data);var html ="";for(var i=0;i<data.length;i++){html +="<tr>"+"<td>"+data[i].name +"</td>"+"<td>"+data[i].age +"</td>"+"<td>"+data[i].sex +"</td>"+"</tr>"}$("#content").html(html);})})})</script></body>
</html>

示例3

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Ajax</title><!--注意路径问题 ${pageContext.request.contextPath}/ --><script src="js/jquery-1.9.1.js"></script><script>function a1(){$.post({url:"/ajax/hello",data:{"name":$("#name").val()},success: function(data){if(data.toString()=='ok'){$('#userinfo').css("color":"green");}else{$('#userinfo').CSS("color":"red");}$("#userinfo").html(data);}})}function a2(){$.post("/ajax/hello",{"pwd":$("#pwd").val()},function(data){if(data.toString()=='ok'){$('#pwdinfo').css("color":"green");}else{$('#pwdinfo').CSS("color":"red");}$("#pwdinfo").html(data);})}</script></head><body><p>用户名：<input type="text" id="name" onblur="a1()" /><span id="userinfo"></span></p><p>密码：<input type="text" id="pwd" onblur="a2()" /><span id="pwdinfo"></span></p></body>
</html>

Ajax总结
使用Jquery封装好的ajax, 有后端controller 返回的是json或是String,
ajax请求：1 url : controller请求，2 data: key:value ，3 success : function(){} 回调函数
给Ajax绑定事件来触发，
List item

Ajax技术复习---狂神笔记相关推荐

java笔记：自己动手写javaEE框架（七）--使用JSON和Ajax技术
今天我要将json和ajax引入到我所写的框架,不过今天用到的技术有部分不是我框架最终使用到的技术,比如ajax技术,我用到的是最为原始的ajax技术,这次算是对老技术的回顾,不过不管技术如何演进,对 ...
计算机三级网络怎么复习,计算机三级网络技术复习笔记七
第八章网络技术展望人们每次发送的报文分为较小的数据块,既报文分组,每个报文分组单独传送,达到目的地后再重新组装成报文,这就是分组交换技术. 信元交换技术是一种快速分组交换技术,它结合了电路交换技术 ...
Spring MVC 教程详解个人总结复习必备面试宝典狂神笔记
文章目录一.MVC 模式 1.什么是 MVC 2.Servlet MVC 小结二.Spring MVC 1.Spring MVC 概念为什么学习 Spring MVC 中央控制器 Dispatc ...
狂神笔记-SpringMVC
狂神笔记-SpringMVC 1.回顾MVC 1.1.什么是MVC MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件设计规范. 是将业务逻辑.数据.显示分 ...
Ajax和JSON-学习笔记01【原生JS方式实现Ajax】
Java后端学习路线笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
Ajax后端极简笔记
AJAX 第一章:AJAX基础概念:AJAX = Asynchronous JavaScript And XML(异步的 JavaScript 和 XML).阿贾克斯 AJAX 不是新的编程语言,而 ...
Ajax技术的基本原理
我用一个简单的用户名验证的例子来谈一谈我对Ajax的了解: 这个例子用到了两个JSP和一个JS,我没有用后台来验证,因为原理是一样的. 1.用户注册表单页:ajaxCheckUser.jsp < ...
AJAX 和 JSON学习笔记
Ajax 和 Json (参考遇见狂神说b站视频) Web 1.0 时代登录,如果失败,需要刷新页面,才能重新登录:不点击提交按钮,就不知道自己密码输错了: 现在搜索时,没有刷新页面,网页只有一部分 ...
云南交通职业技术学院计算机网络技术,交院笔记_云南交通职业技术学院_零二七艺考...
交院"学霸"笔记上线啦开启浏览模式: 俗话说"好记性不如烂笔头",以最淡的墨水书写最深刻的记忆.同学们的日常学习离不开笔记,记好笔记也可以说是十分的重要.说不 ...
Spring Security技术栈学习笔记（八）Spring Security的基本运行原理与个性化登录实现
正如你可能知道的两个应用程序的两个主要区域是"认证"和"授权"(或者访问控制).这两个主要区域是Spring Security的两个目标."认证&qu ...

Ajax技术复习---狂神笔记

Ajax技术复习---狂神笔记相关推荐

最新文章

热门文章