本地环境简单搭建 为什么要环境搭建 因为Ajax是基于服务器来运行的,需要配置服务器环境来实现对本地资源的访问。...****) 如何使用VsCode自带的服务器环境 在VSCode中下载 Live Server插件 在vsCode下方会出现这样的图标,运行带有Ajax请求的文件时,直接点击该图标运行 本环境自动以打开的本文件夹作为服务器的根目录...,端口可以自行改变 jQuery中的Ajax GET请求和POST请求的异同 相同点: 都是将数据提交到远程服务器 不同点: 1....-- 1.什么是Ajax? AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。...-- 本来表单中的数据应该发送到后台进行数据操作,由于还没有学习后端语言,先在前端调用后端的数据进行数据操作 --> <form action="" method="POST" role="form
JQuery中的Ajax 方法 load方法 .get和.post方法 $.ajax方法 .getScript方法和.JSON方法 事件 ajaxStart和ajaxStop ajaxComlete、...callback 请求完成时的回调函数。会将请求数据的结果作为回调函数的参数传入。 type 设置返回数据内容的格式。值为xml、html、script、json、text和_default。...ajax方法 $.ajax('data/server1.json', { // 请求的类型 type: 'get', // 请求的数据 data: { name...获取成功后会自动调用获取的脚本js代码。 回调函数会返回脚本的字符串类型,可以通过eval函数进行调用。...异步提交表单的步骤 获取表单组件的内容 根据表单数据构建请求数据 通过Ajax异步提交 表单序列化 serialize()方法 将表单组件对应的数据值序列化为指定格式的字符串内容。
一、JS中的Ajax ajax:异步访问/局部刷新 1.同步和异步 2.Ajax的运行原理 页面请求---->Ajax引擎----->提交给服务器端 这段时间可以做任何事情 服务器端响应------...>Ajax引擎----->触发设置好的事件,执行自定义的js逻辑代码,然后显示页面 js改变页面,其原理是改变的是内存 3.ajax实现 创建ajax引擎 为ajax对象绑定监听 绑定提交地址(get/...post) 发送请求 总结: 所有的异步访问都是通过ajax引擎 二、JSON传递数据(重点) 1.JSON在ajax中数据传递格式 JSON传递数据的一种格式,当使用异步传输的时候, 当服务器响应数据的时候...,需要使用一种格式在客户端和服务端进行传递 当服务端响应给客服端的时候响应的是字符串或者xml(ResponseText/ResponseXML), 如果响应一个对象给客户端的时候就不能表示. 2.JSON...格式 三、jQuery中的Ajax(重点) 再实际开发中使用下面三种方式: $.post(url,[date],[callback],[type]); $.get(url,[date
$.ajax() 基本用法: $.ajax({ url: url, // 地址 data: data, /...:" + request.status); } } } } 用 jQuery 改写如下: $(document).ready(function(){...$("#search").click(function(){ $.ajax({ type: "GET", url:...} }, error: function(jqXHR){ alert("发生错误...jqXHR.status); }, }); }); $("#save").click(function(){ $.ajax
} }, error: function(jqXHR){ alert("发生错误...} }, error: function(jqXHR){ alert("发生错误...:" + jqXHR.status); } }); }); }); 调用的action中的方法: 注意:此action要继承BaseAction...\"}"; } // 调用BaseAction中的方法向输出流中写JSON串 responseWriterJSON(html); } BaseAction...); System.out.println(responseString.toString()); // 调用BaseAction中的方法向输出流中写
前言 一直没痛下决心学习JQuery,但平时项目中又要用到Ajax,于是自己写一个函数封装一下方便项目中偷懒吧!...今天一不小心看到介绍xmlHttp对象的博客,细读一下重新认识了一下xmlHttp对象,获益良多,顺便重构一下自己写的Ajax函数。 ...XmlHttp对象的属性: ? XmlHttp对象的方法: ?...method=="function") 54 OnLoading = method; 55 } 56 //当status不为200时触发,有默认处理函数...,仅接受方法 57 var OnError = function(xmlHttp){ 58 alert("Request is fail.
大家好,又见面了,我是你们的朋友全栈君。...注意起来一个情况:ajax+submit+同步—-就是你用ajax请求服务器,而且用的是同步的方式,并且你是通过点击了type类型为submit的按钮来触发这个ajax。...这个时候,首先你点击了submit,它会提交表单,但是由于你用了ajax的同步操作,submit的提交被阻塞,ajax先执行,这个时候,如果你在ajax的回调函数(如:success)中写了document.location.href...=’xxx.html’,它是执行了,的确是去执行了跳转的,于是ajax完成了,那接下来就要把刚才的submit提交的请求完成。...即:ajax就是如你所想那样执行了,也从A页面跳到了B页面,但是由于submit这种类型的特殊性,又让B页面跳回了A页面,由于这个ajax执行完再执行submit请求的过程处理的很快,你会感到好像没有效果
ajax的传统写法: $.ajax({ url: "test.html", success: function(){ alert("哈哈,成功了!")...; } }); Jquery版本在1.5之前,返回的是XHR对象;当版本高于1.5之后,返回的是deferred对象,可以使用 done 和 fail。...; } ) .done(function(){ alert("第二个回调函数!");} ); 有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。...; } ); $.when为多个事件指定相同的回调: $.when($.ajax("test1.html"), $.ajax("test2.html")) ...; }); 将普通的异步函数改装成deferred对象来使用$.when: var wait = function(){ setTimeout(function(){ alert("执行完毕
大家好,又见面了,我是你们的朋友全栈君。 习惯了用单引号....(){ $('#outputuserInfo').keyup(function(){ var orderid = $('#outputuserInfo').val(); $.ajax...validateUserInfo', async : false,//false不打引号 type : 'POST',//POST最好大写 dataType:'json',//一定注意T是大写的...$('#showMessage').text(datas); }, error : function(data){ var datas = data.msg; //失败的处理 $...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
【error】jQuery ajax请求错误返回status 0和错误error的问题 : ajax error:{"readyState":0,"status":0,"statusText":"error..."} 异常描述: 第一次ajax,后台都没问题,但是却进入error方法,错误码0,错误信息error。...以后再ajax就没问题。...解决方法: 将button的type从submit改为button,因为submit会默认提交表单,而点击事件又绑定ajax,于是ajax请求就被cancel了。...从submit改为 button,因为submit会默认提交表单,而点击事件又绑定ajax,于是ajax请求就被cancel了。
500——服务器产生内部错误 4.方法 labort()暂停请求,并重置到未初始化状态 lopen() 加载要链接的页面 lsend() 把该请求发送到服务器 说明:1)...的AJAX实现(一) jQuery对Ajax进行了封装。...JQuery中的Ajax请求方法: $.load( url ,[data], [callback]) $.get( url ,[data], [ fn ],[type]...getScript ( url ,[callback]) $.ajax([ options ]) 1、load()方法 能够载入远程HTML代码并插入DOM中。...附加到请求URL中。
第三个问题则应该涉及到异步和同步的问题吧。 仔细研究了一下JQuery的AJAX部分,发现$.ajax()下有很多参数,其中async参数主要是用来设置是同步还是异步。...async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success...因此,对于第三个问题只需要在调用查询留言表对应的留言回复的函数中加入async:false,之后就一切搞定了。...第一个和第二个问题的解决方式也很简单,研究了JQuery的AJAX部分就知道里面有一个参数cache,专门是用来设置本次和服务器进行的传输是否加载缓存。...来做AJAX真的很方便,在以后的项目运用中我会用到它很多地方,AJAX中很多参数确实值得去研究...
jQuery确实是一个提高前端开发效率的好框架(虽然很多大牛们都说它效率不咋地),但是用好它有时候并不容易,也许你也遇到过以下情况: 一个aspx页面通常可以包含其它ascx控件,如果在多人协同开发的情况下...:程序员小张在控件A.ascx中使用了 $().ready(function{}),而程序员小王又在控件B.ascx中也使用了ready函数,程序员小李在做页面时,把A.ascx,B.ascx都拖到自己的页面中...,然后在页面中也需要用到$().ready函数,这下好了: 虽然jQuery本身的设计还算不错,document加载完成后会依次触发各个ready中定义的function(这一点很好,不象javascript...中默认后面的同名函数会覆盖前面的函数定义),但是如果某个程序员希望自己的ready部分先执行(或者这三个程序员各自的ready处理有严格先后顺序时),这个怎么办呢?...其实这个也不难,可以利用setTimeOut让某个程序员的ready部分延时执行 $().ready(function(){ setTimeout(Test1, 50);//延时50毫秒后再执行本函数
使用jQuery对Ajax的封装 (主要是更安全,更方便) jQuery封装简化了Ajax,有$.get、$.post 等不同的效果的方法。...缺点:(看不到获得失败的消息); 这里推荐使用$.Ajax( ) 主要是这个可以看到请求失败的消息。...error为请求通讯失败的处理事件(服务器错误500,404错误 等) 介绍三种Ajax对Json的处理方法 第一种:比较麻烦的,不推荐使用的 $(function () { $.ajax...#### 后边的两种是以后经常使用的方式 第二种:Ajax请求中设定dataType: "json" $(function () { $.ajax({...; } }); }); 这样处理后,success中的第一个参数就是,javascript对象了。
设置请求超时的方法在 AJAX 请求中设置超时时间,我们可以使用以下方法:使用 timeout 参数:在 jQuery 的 $.ajax() 方法中,可以使用 timeout 参数来设置超时时间(单位为毫秒...如果请求超时,complete 回调函数将被调用,我们可以在该回调函数中处理超时的情况。...处理网络异常的方法在 AJAX 请求中处理网络异常,我们可以使用以下方法:使用 error 回调函数:在 AJAX 请求中,我们可以通过 error 回调函数来处理网络异常的情况。...该回调函数接收三个参数:xhr(XMLHttpRequest 对象)、status(错误状态字符串)和 error(可选的异常对象)。...使用 fail 方法:在 jQuery 的 $.ajax() 方法中,可以使用 fail 方法来处理网络异常。
(回调) # 2.QQ的离线发送文件。 以上是生活中的例子,那么我们接下来以代码为例子。...因为之前我们说的那三个原因,不规范、回调地狱、很难错误处理。...,搜索ajax找到jQuery.ajax,看看参数说明,然后直接看代码示例,看看jQuery的封装,就知道自己的封装有多么的辣鸡了。...封装的优点: 支持更多形式的参数 支持Promise 支持的功能超多 我们需要掌握jQuery.ajax嘛?... axios jQuery.ajax我们可以忘了,目前,最新的AJAX库,axios划重点,显然它抄袭了jQuery的封装思路。如果有人问我你记得axios的API吗?
回调函数 如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。...传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话) dataFilter 在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。...并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。 success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。...complete 当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。...这四个回调函数是官网推荐的,可以取代上面四个回调函数,详细看http://api.jquery.com/jQuery.ajax/ jqXHR对象的属性 readyState responseXML
1.3、jQuery AJAX示例 在HTML5中对原生的AJAX核心对象XMLHttpRequest进行升级,也就是XHR2,功能更加强大。 ...jQuery对AJAX封装的非常好,这里以简单的商品管理为示例使用jQuery完成AJAX应用。 ?...2.6、应用延迟对象 前面的示例中我们都是使用jQuery ajax返回的deferred对象,其实我们也可以在自定义的代码中使用deferred对象,恰当的使用deferred对象或以优雅的解决不少问题...(2) deferred.done() 指定操作成功时的回调函数 (3) deferred.fail() 指定操作失败时的回调函数 (4) deferred.promise() 没有参数时,返回一个新的...在jQuery中如果使用JSONP只需要将返回数据类型设置为jsonp就可以了,但是这种方法只支持get请求,不支持post请求;请求是同步的;服务器返回数据要处理,要添加回调函数,麻烦。
Jquery 中的一个重要的转折点,在这个版本之后引入了一个新的功能 Deferred,它彻底的改变了在 Jquery 中如何使用 Ajax,几乎重写了 Jquery 的 Ajax 部分。...错误难以处理,现在我们看下早期 Jquery 中 Deferred 的解决方案是如何做的,与我们后面讲解的 Promise 有什么关联。...Ajax 中的 Deferred 对象 Jquery 1.5 之前的 ajax 书写方式: // 返回的是 XHR 对象 $.ajax({ url: "http://openapi.xxxxxx.com...调用 dtd.resolve() 是将执行状态变为已完成,会调用 done() 方法指定的回调函数。执行 dtd.reject() 是将执行状态变为已失败,会调用 fail() 方法指定的回调函数。...dtd.done()、dtd.fail() 这种被动监听的函数,这些函数都在一块,如上面例所示很容易出现在外部被篡改。
听说js是一样很BT的语言,今天真是有点领教到了。 用python3.6+django2.0开发网站时,遇到了一个坑中之坑!...在异步数据提交Ajax的运用中,不免在回调函数中使用到JSON.parse(data) 浏览器控制台Console报错: VM493:1 Uncaught SyntaxError: Unexpected...:5 b @ jquery.min.js:5 XMLHttpRequest.send (async) send @ jquery.min.js:5 ajax @ jquery.min.js:5 (anonymous...正当我万般无奈之时,回想起了我自学的老男孩全栈教学视频中,武sir老师曾在课上笑称JS是一门最为BT的语言,你以为会报错的地方,往往不报错,你看不出哪里错了的地方,它没准儿就给你报错,于是我尝试着将后台原本传过来的字符串...return HttpResponse("{'status':'fail','msg':'提交错误}") 改成了: return HttpResponse('{"status":"fail","msg