JavaEE + Ajax处理 json 数据 一、项目准备 二、编写前端表单界面 2.1 html 部分 2.2 js 部分（ajax 编写） 三、后端请求处理 3.1 mysql 建表 3.2 编写...jar包 Jar 包下载链接 二、编写前端表单界面 2.1 html 部分 这里使用了 BootStrap， jquery 库 2.2 js 部分（ajax 编写） 我使用 JQuery 来完成 ajax 请求的部分 $("button").on('click',function () { // 获取用户在输入框中...// each() 是 JQuery 的遍历语法 $(data).each(function (i,s) { msg+="";...ArrayList 存储查出来的学生，在使用 JSONobj 把 ArrayList 集合 转换成 JSON 格式，这样才方便返回到前端，并且显示数据。
下班之前终于搞定了使用$.ajax增加的动态元素获取不到的问题，原来是使用.on方法（老版本是.live），这里记录一下，顺便赞一下jQuery，通过使用getJSON,.append,.empty等，...唯一的一点就是版本太多了，最新版本支持的浏览器对于中国用户来说是个噩梦。...我是用法 $('#parent').on("click", "#child", function() {});//#parent是非ajax方式生成的，#child是ajax回来的数据...append到#parent的 我的代码 $('#taskComments').on("mouseenter", "#taskComment", function(){
数据库中表存在重复数据，需要清理重复数据，清理后保留其中一条的情况是比较常见的需求，如何通过1条SQL准确的删除数据呢？ 1....例如c1,c2 这2个字段组合作为唯一条件，则查询重复数据的SQL如下 SELECT c1, c2, COUNT(*) FROM test GROUP BY c1, c2 HAVING...如何删除重复数据 2.1 方案一 很多研发同学习惯的思路如下： 先查出重复的记录（使用in） 再查出在重复记录但id不在每组id最大值的记录 直接将select 改为delete进行删除 查询SQL...推荐写法 基于以上情况，使用单条SQL删除的方式如下： 查询SQL： SELECT a.* FROM test a , (SELECT c1,c2,MAX(id)id FROM test...共 7 行受到影响 删除后数据如下： 无重复数据了。
工具函数 每次发送ajax请求，其实步骤都是一样的，重复了大量代码，我们完全可以封装成一个工具函数。..., 提示"请输入正确的手机号码" 需求2：点击发送时，按钮显示为"发送中",并且不能重复提交请求 需求3：根据不同的响应结果，进行响应。...为什么要使用模板引擎 我们通过ajax获取到数据后，需要把数据渲染到页面，在学习模板引擎前，我们的做法是大量的拼接字符串，对于结构简单的页面，这么做还行 但是如果页面结构很复杂，使用拼串的话代码可阅读性非常的差...【演示：使用拼串进行渲染的缺点.html】 总结来说拼串渲染两大缺点： js中大量充斥着 html 结构拼串代码， 很冗余， 可读性差 字符串拼接很麻烦， 且维护起来也很麻烦， 容易出错 artTemplate...}}" alt=""> {{v.content}} {{/each}} //如果返回的数据是个数组，必须使用对象进行包裹，因为在{{}}中只写书写对象的属性
前段时间，群里有位同学问起 Ajax 加载的问题，这个不属于模板制作系列教程的内容，因此单独再出一个使用技巧系列的教程。...Ajax 无刷新加载内容，看起来高大上一点，但是对 SEO 是不太友好的，所以在使用的时候应该有个取舍。...点击加载更多 2、添加默认显示的页面内容（只是演示，结构我就随意写了） ...//使用jQuery的scroll()方法来监听页面滚动 jQuery(window).scroll(function(){ //当前窗口和页面顶部的距离 var WindowTop ...并没有想象中的难度那么大，特别是有了 PbootCMS 的 api 接口之后，获取数据更容易，使用更方便。
1 JQuery最佳实践 1.1 使用JQuery的ready处理器 $(function () { /* 你的代码 */ }); //或者 $(document).ready(function.../jsonp/student/all", }).complete(function( data ) { //一些操作 }); //正确的写法 $.ajax({ url: "http://...[i] = 'Item '+i+''; } $('#myList').html(list_items.join('')); 3.10 使用for循环，不要使用$.each循环 //js...() { return false; }); 3.13 使用html5的data属性 // $("#myDiv")....; }); 5.7 加载JQuery即使CDN掉线 <script src="https://<em>ajax</em>.googleapis.com/<em>ajax</em>/libs/<em>jquery</em>/1.12.4/<em>jquery</em>.min.js
可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。...json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。...data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 ...data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 ...(html); } }); }); }); 22.顺便说一下$.each()函数: $.each()函数不同于JQuery对象的each
json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。...data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 ...data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 ...通常在本地和远程的内容编码不同时使用。...(html); } }); }); }); 22.顺便说一下$.each()函数: $.each()函数不同于JQuery对象的each
JSONP JSONP的实现原理 由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据。...注意：JSONP和Ajax之间没有任何关系，不能把JSONP请求数据的方式叫做Ajax，因为JSONP没有用到XMLHttpRequest这个对象。 ...jQuqery中的JSONP jquery提供的$.ajax()函数，除了可以发起真正的Ajax数据请求之外，可以通过改变数据类型使其能够发起JSONP数据请求。...中JSONP的实现过程 jQuery中的JSONP，也是通过script标签的src属性实现跨域数据访问的，只不过，jquery采用的是动态创建和移除script标签的方式，来发起的JSONP的数据请求...-- 模板结构 --> {{each result}} <!
each的方法获取collection中的数据 bookShelf.each(function(book){ alert(book.get('title')); }); 很简单，不解释 2、使用fetch...('error'); }}); 其中也定义了两个接受返回值的方法，具体含义我想很容易理解，返回正确格式的数据，就会调用success方法，错误格式的数据就会调用error方法，当然error方法也看添加和...src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> <script src="http://...<em>each</em><em>的</em>方法获取collection中<em>的</em><em>数据</em> bookShelf.<em>each</em>(function(book){ alert(book.get('title')); });...}); } //上述代码仅仅均为可正常执行<em>的</em>代码，不过关于服务器端<em>的</em>实例在后面会有。 })(<em>jQuery</em>);
二、使用方法 在需要使用JQuery的页面中引入JQuery的js文件即可。...》和《使用 jQuery 简化 Ajax 开发》 (说明：以上文档都放在了【附件】中) 四、语法总结和注意事项 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、...以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get...随后的每次点击都重复对这两个函数的轮番调用。 //每次点击时轮换添加和删除名为selected的class。...for(var i=0;i<tempArr.length;i++){ alert("Item #"+i+": "+tempArr); } 也可以处理json数据，如 $.each( { name
(url, [data], [callback]) 使用GET请求JSON数据。...(str) 清除字符串两端的空格，使用正则表达式来清除给定字符两端的空格 jQuery.each(object, callback) 一个通用的迭代器，可以用来无缝迭代对象和数组 jQuery.extend...- 1 jQuery.unique(array) 删除数组中的所有重复元素，返回整理后的数组 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及...以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0)...对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个 元素的内容。
js代码发送一个http的请求 XMLHttpRequest的四步：创建对象、注册监听、建立连接、发送数据 异步交互的6个方法（发送http请求） ajax();(最底层) get(),post...jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中。...2、它的结构是: load(url[, data][,callback]) 3、程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给...如果需要发送的内容较少时，处理比较方便。但在真实项目中，往往需要处理的数据内容很复杂。jQuery提供了相应的方法帮助开发者解决这个问题。...解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历
在微信开发H5页面的时候，往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发，由于本人喜欢在Asp.net的Web界面上使用JQuery，因此比较倾向于使用 jQuery WeUI...8）JQuery的Ajax/Post/Get等相关处理 在我们前面很多案例代码里面，都采用了JQuery的Ajax/Post/Get/getJSON等函数，它们之间很多时候可以相互替代，差异只是很少的部分...()是jquery中通用的一个ajax封装，其语法的格式为：$.ajax(options)，其中options是一个object类型，它指明了本次ajax调用的具体参数。 ...9）JS脚本的数组对象处理 上面我们使用了各种异步的操作，如JQuery的Ajax/Post/Get/getJSON等函数操作，经常会涉及对数组的遍历处理或者插入处理。 ...例如对于返回的数据，我们一般需要进行数组的遍历，然后逐一追加到界面显示，这里就需要使用$.each()函数。
8 9 10 11 12 元素节点操作 $("#ID").wrap(html);//把所有匹配的元素用其他元素的结构化标记包裹起来 $("#ID").empty();//删除匹配的元素集合中所有的子节点...1 2 Ajax操作 $("#ID").load(url,[data],[callback]);//载入远程 HTML 文件代码并插入至 DOM 中 //url (String) : 待装入 HTML...1 2 3 4 5 序列化 $("form").serialize();//序列化表格内容为字符串 1 工具方法(jQuery可以使用$代替) jQuery.each(obj,callback);//...遍历对象和数组 jQuery.map();//修改数据 jQuery.grep();//数据筛选,返回一个经过筛选后的数组 jQuery.inArray(value,array);//查找元素的下标 jQuery.merge...jQuery.isPlainObject();//是否为使用“{}”或“new Object”生成的对象，而不是浏览器原生提供的对象。
jQuery.get() 使用 HTTP GET 请求从服务器加载数据。 jQuery.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码数据。...jQuery.param() 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。 jQuery.post() 使用 HTTP POST 请求从服务器加载数据。....serializeArray() 序列化表单元素，返回 JSON 数据结构数据。...jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。...使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到...jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 "myurl?callback=?"...jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。...使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。...serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
_ajax) ] Ajax 同源跨域操作: 针对同源策略的跨域读取数据 <input type="button" value="跨域获取<em>数据</em>" onclick...首先是前端index.html其引入Jquery库,并使用Ajax与后端通信...._ajax) ] Ajax全局序列化: 全局序列化的主要作用是批量提交数据,可使用serialize进行全局提交. 前端index.html代码如下,基本上没有太大变化....实现上传文件: 文件上传需要使用Ajax中的FormData这个对象,来实现文件上传功能....实现在线编辑器: 使用Ajax配合codemirror框架实现的在线文本编辑器.
jQuery大部分功能需要根据文档的DOM模型来工作，首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进行。...只有当 obj是一个DOM对象时才能使用 obj.innerHTML；相应地，如果是jQuery对象应该使用 obj.html() 。...把数据存到节点中 jQuery提供了一种机制，可以把节点作为数据存储的容器。...$.data() 往节点中获取/设置数据 $.removeData() 删除数据 在内部实现上，jQuery会在指定节点添加一个内部标识，以此为 key，把数据存在内部闭包的一个结构中。...事实上，jQuery的事件绑定机制也使用了这套数据接口。
它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，并提供了一个跨多种浏览器的易于使用的API。...重点：可以将普通数组对象、dom对象转换为 jQuery对象来使用 each()的语法二进行遍历。 但是 json对象不可以转变为 jQuery对象，只能使用语法一遍历，不可以使用语法二。...使用jQuery函数，实现Ajax请求。 15.1 关于jQuery函数使用Ajax请求的介绍。 jQuery 提供多个与 AJAX 有关的方法。...通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新 到 DOM 对象。...使用jQuery的函数，实现Ajax的请求。 没有jQuery之前，使用XMLHttpRequest做Ajax，有四个步骤，很麻烦。jQuery简化了ajax请求的处理。
领取专属 10元无门槛券
手把手带您无忧上云
