搜索词>>ajax 耗时0.0030
  • jQuery的$.ajax()使用及API文档

    jQuery的$.ajax()使用及API文档,jQuery,ajax,$.ajax()jQuery的$.ajax()使用及API文档 <h2>定义和用法</h2> <p>ajax() 方法通过 HTTP 请求加载远程数据。</p> <p>该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。</p> <p>最简单的情况下,$.ajax() 可以不带任何参数直接使用。</p> <p>注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。</p> <h3>语法</h3> <pre> <code class="language-javascript">jQuery.ajax([settings])</code></pre> <table class="table table-hover"> <tbody> <tr> <th>参数</th> <th>描述</th> </tr> <tr> <td><em>settings</em></td> <td> <p>可选。用于配置 Ajax 请求的键值对集合。</p> <p>可以通过 $.ajaxSetup() 设置任何选项的默认值。</p> </td> </tr> </tbody> </table>   <h3>参数</h3> <strong>options</strong> <p>类型:Object</p> <p>可选。AJAX 请求设置。所有选项都是可选的。</p> <br /> <strong>async</strong> <p>类型:Boolean</p> <p>默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。</p> <p>注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。</p> <br /> <strong>beforeSend</strong>(XHR) <p>类型:Function</p> <p>发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。</p> <p>XMLHttpRequest 对象是唯一的参数。</p> <p>这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。</p> <br /> <strong>cache</strong> <p>类型:Boolean</p> <p>默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。</p> <p>jQuery 1.2 新功能。</p> <br /> <strong>complete</strong>(XHR, TS) <p>类型:Function</p> <p>请求完成后回调函数 (请求成功或失败之后均调用)。</p> <p>参数: XMLHttpRequest 对象和一个描述请求类型的字符串。</p> <p>这是一个 Ajax 事件。</p> <br /> <strong>contentType</strong> <p>类型:String</p> <p>默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。</p> <p>默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。</p> <br /> <strong>context</strong> <p>类型:Object</p> <p>这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。</p> <p>就像这样:<br />  </p> <pre> <code class="language-javascript">$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});</code></pre> <strong>data</strong> <p>类型:String</p> <p>发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。</p> <br /> <strong>dataFilter</strong> <p>类型:Function</p> <p>给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。</p> <br /> <strong>dataType</strong> <p>类型:String</p> <p>预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:</p> <ul> <li>"xml": 返回 XML 文档,可用 jQuery 处理。</li> <li>"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。</li> <li>"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)</li> <li>"json": 返回 JSON 数据 。</li> <li>"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。</li> <li>"text": 返回纯文本字符串</li> </ul> <br /> <strong>error</strong> <p>类型:Function</p> <p>默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。</p> <p>有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。</p> <p>如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。</p> <p>这是一个 Ajax 事件。</p> <br /> <strong>global</strong> <p>类型:Boolean</p> <p>是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。</p> <br /> <strong>ifModified</strong> <p>类型:Boolean</p> <p>仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。</p> <br /> <strong>jsonp</strong> <p>类型:String</p> <p>在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。</p> <br /> <strong>jsonpCallback</strong> <p>类型:String</p> <p>为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。</p> <br /> <strong>password</strong> <p>类型:String</p> <p>用于响应 HTTP 访问认证请求的密码</p> <br /> <strong>processData</strong> <p>类型:Boolean</p> <p>默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。</p> <br /> <strong>scriptCharset</strong> <p>类型:String</p> <p>只有当请求时 dataType 为 "jsonp" 或 "script",并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。</p> <br /> <strong>success</strong> <p>类型:Function</p> <p>请求成功后的回调函数。</p> <p>参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。</p> <p>这是一个 Ajax 事件。</p> <br /> <strong>traditional</strong> <p>类型:Boolean</p> <p>如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。</p> <br /> <strong>timeout</strong> <p>类型:Number</p> <p>设置请求超时时间(毫秒)。此设置将覆盖全局设置。</p> <br /> <strong>type</strong> <p>类型:String</p> <p>默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。</p> <br /> <strong>url</strong> <p>类型:String</p> <p>默认值: 当前页地址。发送请求的地址。</p> <br /> username <p>类型:String</p> <p>用于响应 HTTP 访问认证请求的用户名。</p> <br /> xhr <p>类型:Function</p> <p>需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。<br /> <br />  </p> <h2>回调函数</h2> <p>如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。</p> <h3>beforeSend</h3> <p>在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。</p> <h3>error</h3> <p>在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)</p> <h3>dataFilter</h3> <p>在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。</p> <h3>success</h3> <p>当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。</p> <h3>complete</h3> <p>当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。</p> <h2><strong>数据类型</strong></h2> <p>$.ajax() 函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是 XML,那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型,比如 HTML,则数据就以文本形式来对待。</p> <p>通过 dataType 选项还可以指定其他不同数据处理方式。除了单纯的 XML,还可以指定 html、json、jsonp、script 或者 text。</p> <p>其中,text 和 xml 类型返回的数据不会经过处理。数据仅仅简单的将 XMLHttpRequest 的 responseText 或 responseHTML 属性传递给 success 回调函数。</p> <p>注意:我们必须确保网页服务器报告的 MIME 类型与我们选择的 dataType 所匹配。比如说,XML的话,服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。</p> <p>如果指定为 html 类型,任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。类似地,指定 script 类型的话,也会先执行服务器端生成 JavaScript,然后再把脚本作为一个文本数据返回。</p> <p>如果指定为 json 类型,则会把获取到的数据作为一个 JavaScript 对象来解析,并且把构建好的对象作为结果返回。为了实现这个目的,它首先尝试使用 JSON.parse()。如果浏览器不支持,则使用一个函数来构建。</p> <p>JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用 jsonp 类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名,以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback,可以通过设置 $.ajax() 的 jsonp 参数。</p> <p>注意:JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。</p> <p>如果指定了 script 或者 jsonp 类型,那么当从服务器接收到数据时,实际上是用了 <script> 标签而不是 XMLHttpRequest 对象。这种情况下,$.ajax() 不再返回一个 XMLHttpRequest 对象,并且也不会传递事件处理函数,比如 beforeSend。</p> <h2><strong>发送数据到服务器</strong></h2> <p>默认情况下,Ajax 请求使用 GET 方法。如果要使用 POST 方法,可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。</p> <p>data 选项既可以包含一个查询字符串,比如 key1=value1&key2=value2 ,也可以是一个映射,比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式,则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时,这种处理可能并不合适。并且在这种情况下,我们也应当改变 contentType 选项的值,用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded 。</p> <h2><strong>高级选项</strong></h2> <p>global 选项用于阻止响应注册的回调函数,比如 .ajaxSend,或者 ajaxError,以及类似的方法。这在有些时候很有用,比如发送的请求非常频繁且简短的时候,就可以在 ajaxSend 里禁用这个。</p> <p>如果服务器需要 HTTP 认证,可以使用用户名和密码可以通过 username 和 password 选项来设置。</p> <p>Ajax 请求是限时的,所以错误警告被捕获并处理后,可以用来提升用户体验。请求超时这个参数通常就保留其默认值,要不就通过 jQuery.ajaxSetup 来全局设定,很少为特定的请求重新设置 timeout 选项。</p> <p>默认情况下,请求总会被发出去,但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果,可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话,可以设置 ifModified 为 true。</p> <p>scriptCharset 允许给 <script> 标签的请求设定一个特定的字符集,用于 script 或者 jsonp 类似的数据。当脚本和页面字符集不同时,这特别好用。</p> <p>Ajax 的第一个字母是 asynchronous 的开头字母,这意味着所有的操作都是并行的,完成的顺序没有前后关系。$.ajax() 的 async 参数总是设置成true,这标志着在请求开始后,其他代码依然能够执行。强烈不建议把这个选项设置成 false,这意味着所有的请求都不再是异步的了,这也会导致浏览器被锁死。</p> <p>$.ajax 函数返回它创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象,但用户也可以通过 xhr 选项来传递一个自己创建的 xhr 对象。返回的对象通常已经被丢弃了,但依然提供一个底层接口来观察和操控请求。比如说,调用对象上的 .abort() 可以在请求完成前挂起请求。</p> <p> </p>
  • HTML5+ajax上传图片/文件以及FormData使用简单讲解

    HTML5+ajax上传图片/文件以及FormData使用简单讲解,HTML5,ajax上传文件,ajaxHTML5+ajax上传图片/文件以及FormData使用简单讲解<br /> <br /> HTML5中FormData的使用,解决ajax上传文件/图片难题<br /> <strong>1.FormData的创建和使用方式一</strong><br /> 创建一个空的 FormData <pre> <code class="language-javascript">var fd= new FormData();</code></pre> <br /> 使用 append() 方法向该对象里添加字段 <pre> <code class="language-javascript">fd.append("username", "Groucho"); fd.append("userfile", fileInputElement.files[0]);</code></pre> <br /> <strong>2.FormData的创建和使用方式二</strong><br /> 使用HTML表单来初始化一个FormData对象 <pre> <code class="language-html"><form id="test-form"> <input type="text" name="name"/> <input type="password" name="pwd"/> </form></code></pre>   <pre> <code class="language-javascript">var formElement = document.getElementById("test-form"); var newFormData = new FormData(formElement);</code></pre> <br /> 在有了FormData对象之后使用ajax(这里简单引用的jQuery的ajax)<br />   <pre> <code class="language-javascript">$.ajax({     url:'Your Post Url',     type:'POST',//上传文件必须为POST,查看解释一     data:newFormData,//FormData对象     processData:false,//不转换请求数据     contentType:false,//contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符     success:function(data){         //成功回调     },     error:function(ex){         //错误回调     } });</code></pre> <br /> <em>解释一:这里我们就要先说说在 http 中传输文件的问题。起初,http 协议中没有上传文件方面的功能,直到 rfc1867 为 http 协议添加了这个功能。当然在 rfc1867 中限定 form 的 method 必须为 POST , enctype = “multipart/form-data” 以及<input type = "file">.</em>
  • ie9 jquery ajax跨域问题解决

    ie9 jquery ajax跨域问题解决, ajax ie9 跨域问题解决,jquery,ajax,ie9<strong><img alt="IE9" class="img-thumbnail" src="/resources/assist/images/blog/a177036b22b4400e9adf48b25e574615.png" /><br /> 描述</strong><br /> ie9 jquery ajax跨域问题<br /> <br /> <strong>解决步骤</strong> <h2>一.导入相关文件</h2> 导入需要的jquery依赖文件,这里用的jquery的1.x版本 <pre> <code class="language-javascript"><!-- jQuery引入 --> <script type="text/javascript" src="../libs/jQuery/jquery.js"></script></code></pre> <h2>二.设置IE浏览器支持跨域访问</h2> <strong>2.1打开IE浏览器,选择设置里面的intelnet选项,如下图:</strong><br /> <img alt="IE浏览器 intelnet选项" class="img-thumbnail" src="/resources/assist/images/blog/4e7c330e6ffc49b2bb181f700d641ad4.png" /><br /> <strong>2.2选择intelnet选项面板中的安全模块,并点击自定义级别,如下图</strong><br /> <img alt="intelnet选项面板中的安全模块" class="img-thumbnail" src="/resources/assist/images/blog/4d397e7dfd1e480c9aacb4c44b912f27.png" /><br /> <strong>2.3找到通过遇访问数据源,选择启用,如图:<br /> <img alt="找到通过遇访问数据源,选择启用" class="img-thumbnail" src="/resources/assist/images/blog/c100d8f866764a918a195f2f44690848.png" /></strong> <h2>三.编写一个jquery的ajax请求demo</h2> <pre> <code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery IE9 跨域问题解决</title> </head> <body> <!-- jQuery引入 --> <script type="text/javascript" src="../libs/jQuery/jquery.js"></script> <script type="text/javascript"> $(function() { $.ajax({ url:'http://localhost:8080/test.do', type:'GET', crossDomain: true == !(document.all), processData: false, success:function(data){ alert(data); }, error: function(jqXHR,err) { alert(jqXHR.status+": "+jqXHR.statusText); } }); }) </script> </body> </html></code></pre> <br /> 运行:<br /> <img alt="运行结果" class="img-thumbnail" src="/resources/assist/images/blog/aaa3f74ed2d6478aa6a8633c6c52b3b6.png" /><br /> <br /> 服务代码:这里是java提供的测试访问: <pre> <code class="language-java"> @GetMapping("test.do") @ResponseBody public String test(HttpServletResponse response){ response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Allow-Origin", "*"); return "Hello Form Server"; }</code></pre> <br />  
  • spring boot 文件上传 REST风格API ajax方式-Java编程

    Java编程之Spring Boot 文件上传 REST风格API ajax方式<h2>一、摘要说明</h2>   这篇文章将告诉你在spring boot(REST 风格)WEB项目中如何用ajax请求上传文件。<br /> <br />   本文章中需要使用的工具: <ol> <li>Spring Boot 1.4.3.RELEASE</li> <li>Spring 4.3.5.RELEASE</li> <li>Thymeleaf</li> <li>jQuery (webjars)</li> <li>Maven</li> <li>Embedded Tomcat 8.5.6</li> <li>Google Chrome 浏览器(Network Inspect)</li> </ol> <h2>二、项目结构</h2> 一个标准的maven项目结构<br /> <img alt="项目结构" class="img-thumbnail" src="/resources/assist/images/blog/811600c9be364e56b3c68ebbe78e0b07.png" /> <h2>三、项目依赖</h2> 声明一个外部的jQuery webjar依赖项,用于HTML表单中的Ajax请求。<br /> <br /> <strong>pom.xml</strong> <pre> <code class="language-xml"><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.mkyong</groupId> <artifactId>spring-boot-file-upload</artifactId> <packaging>jar</packaging> <version>1.0</version> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.4.3.RELEASE</version> </parent> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <!-- hot swapping, disable cache for template, enable live reload --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>2.2.4</version> </dependency> </dependencies> <build> <plugins> <!-- Package as an executable jar/war --> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project></code></pre> <h2>四、文件上传</h2> 为了支持AJAX请求和响应, 最简单的方式是返回<code>ResponseEntity</code>. <h2>4.1下面的例子演示了上传文件的三种可能方式:</h2> <ol> <li>单个文件上传 – <code>MultipartFile</code></li> <li>多个文件上传– <code>MultipartFile[]</code></li> <li>Map file upload to a Model – <code>@ModelAttribute</code></li> </ol> <strong>RestUploadController.java</strong> <pre> <code class="language-java">import com.mkyong.model.UploadModel; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.http.HttpHeaders; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths; import java.util.Arrays; import java.util.List; import java.util.stream.Collectors; @RestController public class RestUploadController { private final Logger logger = LoggerFactory.getLogger(RestUploadController.class); //Save the uploaded file to this folder private static String UPLOADED_FOLDER = "F://temp//"; // 3.1.1 Single file upload @PostMapping("/api/upload") // If not @RestController, uncomment this //@ResponseBody public ResponseEntity<?> uploadFile( @RequestParam("file") MultipartFile uploadfile) { logger.debug("Single file upload!"); if (uploadfile.isEmpty()) { return new ResponseEntity("please select a file!", HttpStatus.OK); } try { saveUploadedFiles(Arrays.asList(uploadfile)); } catch (IOException e) { return new ResponseEntity<>(HttpStatus.BAD_REQUEST); } return new ResponseEntity("Successfully uploaded - " + uploadfile.getOriginalFilename(), new HttpHeaders(), HttpStatus.OK); } // 3.1.2 Multiple file upload @PostMapping("/api/upload/multi") public ResponseEntity<?> uploadFileMulti( @RequestParam("extraField") String extraField, @RequestParam("files") MultipartFile[] uploadfiles) { logger.debug("Multiple file upload!"); // Get file name String uploadedFileName = Arrays.stream(uploadfiles).map(x -> x.getOriginalFilename()) .filter(x -> !StringUtils.isEmpty(x)).collect(Collectors.joining(" , ")); if (StringUtils.isEmpty(uploadedFileName)) { return new ResponseEntity("please select a file!", HttpStatus.OK); } try { saveUploadedFiles(Arrays.asList(uploadfiles)); } catch (IOException e) { return new ResponseEntity<>(HttpStatus.BAD_REQUEST); } return new ResponseEntity("Successfully uploaded - " + uploadedFileName, HttpStatus.OK); } // 3.1.3 maps html form to a Model @PostMapping("/api/upload/multi/model") public ResponseEntity<?> multiUploadFileModel(@ModelAttribute UploadModel model) { logger.debug("Multiple file upload! With UploadModel"); try { saveUploadedFiles(Arrays.asList(model.getFiles())); } catch (IOException e) { return new ResponseEntity<>(HttpStatus.BAD_REQUEST); } return new ResponseEntity("Successfully uploaded!", HttpStatus.OK); } //save file private void saveUploadedFiles(List<MultipartFile> files) throws IOException { for (MultipartFile file : files) { if (file.isEmpty()) { continue; //next pls } byte[] bytes = file.getBytes(); Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename()); Files.write(path, bytes); } } }</code></pre> <h2>4.2选择4.1中的第三种方式上传文件并且使用注解@ModelAttribute</h2> <strong>UploadModel.java</strong> <pre> <code class="language-java">import org.springframework.web.multipart.MultipartFile; public class UploadModel { private String extraField; private MultipartFile[] files; //getters and setters }</code></pre> <h2>五、视图文件的编写</h2> HTML form for multiple file uploads.<br /> <strong>upload.html</strong> <pre> <code class="language-html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <body> <h1>Spring Boot - Multiple file upload example - AJAX</h1> <form method="POST" enctype="multipart/form-data" id="fileUploadForm"> <input type="text" name="extraField"/><br/><br/> <input type="file" name="files"/><br/><br/> <input type="file" name="files"/><br/><br/> <input type="submit" value="Submit" id="btnSubmit"/> </form> <h1>Ajax Post Result</h1> <pre> <span id="result"></span> </pre> <script type="text/javascript" src="webjars/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html></code></pre> <h2>六、jQuery – Ajax Request</h2> jQuery通过f<code>#id获取form</code>,并且发送multipart form 数据通过ajax请求.<br /> <strong>resources/static/js/main.js</strong> <pre> <code class="language-javascript">$(document).ready(function () { $("#btnSubmit").click(function (event) { //stop submit the form, we will post it manually. event.preventDefault(); fire_ajax_submit(); }); }); function fire_ajax_submit() { // Get form var form = $('#fileUploadForm')[0]; var data = new FormData(form); data.append("CustomField", "This is some extra data, testing"); $("#btnSubmit").prop("disabled", true); $.ajax({ type: "POST", enctype: 'multipart/form-data', url: "/api/upload/multi", data: data, //http://api.jquery.com/jQuery.ajax/ //https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects processData: false, //prevent jQuery from automatically transforming the data into a query string contentType: false, cache: false, timeout: 600000, success: function (data) { $("#result").text(data); console.log("SUCCESS : ", data); $("#btnSubmit").prop("disabled", false); }, error: function (e) { $("#result").text(e.responseText); console.log("ERROR : ", e); $("#btnSubmit").prop("disabled", false); } }); }</code></pre> <h2>七、Exception Handler异常拦截</h2> 拦截来自 Ajax请求的异常, 只需要继承 <code>ResponseEntityExceptionHandler</code> 并且返回 <code>ResponseEntity</code>.<br /> <strong>RestGlobalExceptionHandler.java</strong> <pre> <code class="language-java">import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartException; import org.springframework.web.servlet.mvc.method.annotation.ResponseEntityExceptionHandler; import javax.servlet.http.HttpServletRequest; //http://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#boot-features-error-handling @ControllerAdvice public class RestGlobalExceptionHandler extends ResponseEntityExceptionHandler { // Catch file size exceeded exception! @ExceptionHandler(MultipartException.class) @ResponseBody ResponseEntity<?> handleControllerException(HttpServletRequest request, Throwable ex) { HttpStatus status = getStatus(request); return new ResponseEntity(ex.getMessage(), status); // example //return new ResponseEntity("success", responseHeaders, HttpStatus.OK); } private HttpStatus getStatus(HttpServletRequest request) { Integer statusCode = (Integer) request.getAttribute("javax.servlet.error.status_code"); if (statusCode == null) { return HttpStatus.INTERNAL_SERVER_ERROR; } return HttpStatus.valueOf(statusCode); } }</code></pre> <h2>八、演示</h2> 使用默认的嵌入式Tomcat启动Spring启动<code>mvn spring-boot:run</code>.<br /> 8.1访问http://localhost:8080/,选择几个文件并单击submit以触发ajax请求。<br /> <img alt="访问并上传" class="img-thumbnail" src="/resources/assist/images/blog/19d6d8c691d04a079fd5a18adc7560fa.png" /><br /> 8.2 Google Chrome浏览器,检查“网络检查”中的请求和响应<br /> <img alt="观察请求" class="img-thumbnail" src="/resources/assist/images/blog/ae51363c32cf415b943dbdc57d659470.png" /><br /> 8.4 Google Chrome, “Request Payload”<br /> <img alt="上传内容" class="img-thumbnail" src="/resources/assist/images/blog/7f1ff5d5dde64d89ae7afd664c5df0f5.png" /> <h2>9.curl工具测试</h2> More testing with <code>cURL</code> command.<br /> 9.1测试单个文件上传 <pre> <code>$ curl -F file=@"f:\\data.txt" http://localhost:8080/api/upload/ Successfully uploaded - data.txt</code></pre> <br /> 9.2.测试多个文件上传 <pre> <code>$ curl -F extraField="abc" -F files=@"f://data.txt" -F files=@"f://data2.txt" http://localhost:8080/api/upload/multi/ Successfully uploaded - data.txt , data2.txt</code></pre> 9.3测试多个文件上传使用maps to Model模式 <pre> <code>$ curl -F extraField="abc" -F files=@"f://data.txt" -F files=@"f://data2.txt" http://localhost:8080/api/upload/multi/model Successfully uploaded! </code></pre> <br /> 9.4测试一个大文件(超过100MB),将会提示下面的错误信息 <pre> <code>$ curl -F file=@"F://movies//300//Sample.mkv" http://localhost:8080/api/upload/ Attachment size exceeds the allowable limit! (10MB)</code></pre> <h2>十、curl测试加自定义错误对象测试</h2> 10.1创建一个自定义对象去存放异常信息<br /> <strong>CustomError.java</strong> <pre> <code class="language-java">public class CustomError { String errCode; String errDesc; public CustomError(String errCode, String errDesc) { this.errCode = errCode; this.errDesc = errDesc; } //getters and setters }</code></pre> 10.2更新全局的异常拦截支持自定义异常信息<br /> <strong>RestGlobalExceptionHandler.java</strong> <pre> <code class="language-java">import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.bind.annotation.ExceptionHandler; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartException; import org.springframework.web.servlet.mvc.method.annotation.ResponseEntityExceptionHandler; import javax.servlet.http.HttpServletRequest; @ControllerAdvice public class RestGlobalExceptionHandler extends ResponseEntityExceptionHandler { @ExceptionHandler(MultipartException.class) @ResponseBody ResponseEntity<?> handleControllerException(HttpServletRequest request, Throwable ex) { HttpStatus status = getStatus(request); return new ResponseEntity(new CustomError("0x000123", "Attachment size exceeds the allowable limit! (10MB)"), status); //return new ResponseEntity("Attachment size exceeds the allowable limit! (10MB)", status); } private HttpStatus getStatus(HttpServletRequest request) { Integer statusCode = (Integer) request.getAttribute("javax.servlet.error.status_code"); if (statusCode == null) { return HttpStatus.INTERNAL_SERVER_ERROR; } return HttpStatus.valueOf(statusCode); } }</code></pre> <br /> 10.3再次上传一个大文件 <pre> <code>$ curl -F file=@"F://movies//300//Sample.mkv" http://localhost:8080/api/upload/ {"errCode":"0x000123","errDesc":"Attachment size exceeds the allowable limit! (10MB)"}</code></pre> <br /> <a href="http://www.mkyong.com/wp-content/uploads/2017/01/spring-boot-file-upload-ajax-rest.zip" rel="external nofollow" target="_blank">demo项目下载</a>
  • bootstrap-select ajax动态添加值中遇到的IE兼容问题解决

    bootstrap-select ajax动态添加值中遇到的IE兼容问题解决bootstrap-select ajax动态添加值中遇到的IE兼容问题解决<br /> <br /> 1.不兼容IE浏览器的方式 <pre> <code class="language-javascript">$(function{ $.ajax({ url:'your request url', type:'GET', success:function(data){ //通过data组装options var options=''; $.each(data.arr,function(index,element){ options+='<option value="'+element.id+'">'+element.value+'</option>'; }) $('#you-select-id').append(options); $('#you-select-id').selectpicker({ style: 'btn-default', noneSelectedText:'请选择', liveSearch:true, size:6,//下拉时候超过6个设置滚动条,默认显示所有 }); $('#you-select-id').selectpicker('refresh'); } }); })</code></pre> <br /> 2.兼容IE浏览器的方式 <pre> <code class="language-javascript">$(function{ $('#you-select-id').selectpicker({ style: 'btn-default', noneSelectedText:'请选择', liveSearch:true, size:6,//下拉时候超过6个设置滚动条,默认显示所有 }); $.ajax({ url:'your request url', type:'GET', success:function(data){ //通过data组装options var options=''; $.each(data.arr,function(index,element){ options+='<option value="'+element.id+'">'+element.value+'</option>'; }) $('#you-select-id').append(options); $('#you-select-id').selectpicker('refresh'); } }); })</code></pre>  
  • IE9 jQuery ajax文件上传兼容问题解决

    IE9 jQuery ajax文件上传兼容问题解决。主要通过jQuery的jquery.form插件解决的IE9不支持formData的文件上传问题。<h2>1.准备</h2> 下载jQuery1.x版本(测试用v1.12.4)<br /> 下载jQuery的form插件(<a href="http://plugins.jquery.com/form/" rel="external nofollow" target="_blank">下载地址</a>)<br /> 本例子是通过Java后端进行测试的,后端为spring boot框架 <h2>2.后端代码</h2> 1测试的controller代码 <pre> <code class="language-java">package com.example; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.servlet.ModelAndView; @Controller public class TestController { @GetMapping(value = { "/", "/index.html" }) public Object index() { return new ModelAndView("index"); } @PostMapping(value = { "/fileupload.do" }, produces = { "text/html;charset=UTF-8" }) @ResponseBody public Object fileUpload(String name, MultipartFile file) { try { if (file.getBytes().length > 0) { return "{\"message\":\"success\",\"name\":\"" + name + "\"}"; } else { return "{\"message\":\"fail\"}"; } } catch (Exception e) { throw new RuntimeException("文件上传异常"); } } @PostMapping(value = { "/fileupload2.do" }/*, produces = { "text/html;charset=UTF-8" }*/) public void fileUpload2(String name, MultipartFile file,HttpServletResponse response) { try { if (file.getBytes().length > 0) { response.setContentType(""); response.setHeader("Content-Type", "text/html;charset=UTF-8"); response.getWriter().write("{\"message\":\"success\",\"name\":\"" + name + "\"}"); } else { response.setHeader("Content-Type", "text/html;charset=UTF-8"); response.getWriter().write("{\"message\":\"fail\"}"); } } catch (Exception e) { throw new RuntimeException("文件上传异常"); } } } </code></pre> <span style="color:#e74c3c">注意:上面的第一种写法<strong>produces = { "text/html;charset=UTF-8" }</strong>必须这样写,其他写法则会出现各种问题</span> <p> </p> <h2>3.后端代码</h2> 1HTML页面代码 <pre> <code class="language-html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>测试</title> </head> <body> <form method="post" enctype="multipart/form-data" id="upload-form"> <input type="text" name="name" /> <input type="file" name="file"/> </form> <button type="button" id="btn-upload">上传测试</button> <script type="text/javascript" src="/libs/jquery.min.js"></script> <script type="text/javascript" src="/libs/jquery.form.js"></script> <script type="text/javascript" src="/libs/index.js"></script> </body> </html></code></pre> <br /> 2.index.js文件代码 <pre> <code class="language-javascript">/** * */ $(function() { $('#btn-upload').click(function(){ var options = { url : "/fileupload.do", success : function(data) { var returnData = JSON.parse(data); alert(data); }, resetForm : true, }; $("#upload-form").ajaxSubmit(options); }) })</code></pre> <h2>4jQuery form控件API</h2> <h2>Options</h2> <p><strong>Note:</strong> All standard <a href="http://api.jquery.com/jQuery.ajax" rel="external nofollow" target="_blank">$.ajax</a> options can be used.</p> <h3>beforeSerialize</h3> <p>Callback function invoked prior to form serialization. Provides an opportunity to manipulate the form before its values are retrieved. Returning <code>false</code> from the callback will prevent the form from being submitted. The callback is invoked with two arguments: the jQuery wrapped form object and the options object.</p> <pre> <code class="language-javascript">beforeSerialize: function($form, options) { // return false to cancel submit }</code></pre> <h3>beforeSubmit</h3> <p>Callback function invoked prior to form submission. Returning <code>false</code> from the callback will prevent the form from being submitted. The callback is invoked with three arguments: the form data in array format, the jQuery wrapped form object, and the options object.</p> <pre> <code class="language-javascript">beforeSubmit: function(arr, $form, options) { // form data array is an array of objects with name and value properties // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] // return false to cancel submit }</code></pre> <h3>filtering</h3> <p>Callback function invoked before processing fields. This provides a way to filter elements.</p> <pre> <code class="language-javascript">filtering: function(el, index) { if ( !$(el).hasClass('ignore') ) { return el; } }</code></pre> <h3>clearForm</h3> <p>Boolean flag indicating whether the form should be cleared if the submit is successful</p> <h3>data</h3> <p>An object containing extra data that should be submitted along with the form.</p> <pre> <code>data: { key1: 'value1', key2: 'value2' } </code></pre> <h3>dataType</h3> <p>Expected data type of the response. One of: null, 'xml', 'script', or 'json'. The dataType option provides a means for specifying how the server response should be handled. This maps directly to jQuery's dataType method. The following values are supported:</p> <ul> <li>'xml': server response is treated as XML and the 'success' callback method, if specified, will be passed the responseXML value</li> <li>'json': server response will be evaluted and passed to the 'success' callback, if specified</li> <li>'script': server response is evaluated in the global context</li> </ul> <h3>delegation</h3> <p>true to enable support for event delegation <em>requires jQuery v1.7+</em></p> <pre> <code class="language-javascript">// prepare all existing and future forms for ajax submission $('form').ajaxForm({ delegation: true });</code></pre> <h3>error</h3> <p>Callback function to be invoked upon error.</p> <h3>forceSync</h3> <p>Only applicable when explicity using the iframe option or when uploading files on browses that don't support XHR2. Set to <code>true</code> to remove the short delay before posting form when uploading files. The delay is used to allow the browser to render DOM updates prior to performing a native form submit. This improves usability when displaying notifications to the user, such as "Please Wait..."</p> <h3>iframe</h3> <p>Boolean flag indicating whether the form should <em>always</em> target the server response to an iframe instead of leveraging XHR when possible.</p> <h3>iframeSrc</h3> <p>String value that should be used for the iframe's src attribute when an iframe is used.</p> <h3>iframeTarget</h3> <p>Identifies the iframe element to be used as the response target for file uploads. By default, the plugin will create a temporary iframe element to capture the response when uploading files. This options allows you to use an existing iframe if you wish. When using this option the plugin will make no attempt at handling the response from the server.</p> <h3>method</h3> <p>The HTTP method to use for the request (e.g. 'POST', 'GET', 'PUT').</p> <h3>replaceTarget</h3> <p>Optionally used along with the the target option. Set to true if the target should be replaced or false if only the target contents should be replaced.</p> <h3>resetForm</h3> <p>Boolean flag indicating whether the form should be reset if the submit is successful</p> <h3>semantic</h3> <p>Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of <code>type="image"</code>. You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of <code>type="image"</code>.</p> <h3>success</h3> <p>Callback function to be invoked after the form has been submitted. If a 'success' callback function is provided it is invoked after the response has been returned from the server. It is passed the following standard jQuery arguments:</p> <ol> <li><code>data</code>, formatted according to the dataType parameter or the dataFilter callback function, if specified</li> <li><code>textStatus</code>, string</li> <li><code>jqXHR</code>, object</li> <li><code>$form</code> jQuery object containing form element</li> </ol> <h3>target</h3> <p>Identifies the element(s) in the page to be updated with the server response. This value may be specified as a jQuery selection string, a jQuery object, or a DOM element.</p> <h3>type</h3> <p>The HTTP method to use for the request (e.g. 'POST', 'GET', 'PUT').<br /> An alias for <code>method</code> option. Overridden by the <code>method</code> value if both are present.</p> <h3>uploadProgress</h3> <p>Callback function to be invoked with upload progress information (if supported by the browser). The callback is passed the following arguments:</p> <ol> <li>event; the browser event</li> <li>position (integer)</li> <li>total (integer)</li> <li>percentComplete (integer)</li> </ol> <h3>url</h3> <p>URL to which the form data will be submitted.</p> <hr /> <h2>Utility Methods</h2> <h3>formSerialize</h3> <p>Serializes the form into a query string. This method will return a string in the format: <code>name1=value1&name2=value2</code></p> <pre> <code>var queryString = $('#myFormId').formSerialize();</code></pre> <h3>fieldSerialize</h3> <p>Serializes field elements into a query string. This is handy when you need to serialize only part of a form. This method will return a string in the format: <code>name1=value1&name2=value2</code></p> <pre> <code>var queryString = $('#myFormId .specialFields').fieldSerialize();</code></pre> <h3>fieldValue</h3> <p>Returns the value(s) of the element(s) in the matched set in an array. This method always returns an array. If no valid value can be determined the array will be empty, otherwise it will contain one or more values.</p> <h3>resetForm</h3> <p>Resets the form to its original state by invoking the form element's native DOM method.</p> <h3>clearForm</h3> <p>Clears the form elements. This method emptys all of the text inputs, password inputs and textarea elements, clears the selection in any select elements, and unchecks all radio and checkbox inputs. It does <em>not</em> clear hidden field values.</p> <h3>clearFields</h3> <p>Clears selected field elements. This is handy when you need to clear only a part of the form.</p> <hr /> <h2>File Uploads</h2> <p>The Form Plugin supports use of XMLHttpRequest Level 2 and <a href="https://developer.mozilla.org/en/XMLHttpRequest/FormData" rel="external nofollow" target="_blank">FormData</a> objects on browsers that support these features. As of today (March 2012) that includes Chrome, Safari, and Firefox. On these browsers (and future Opera and IE10) files uploads will occur seamlessly through the XHR object and progress updates are available as the upload proceeds. For older browsers, a fallback technology is used which involves iframes. <a href="http://malsup.com/jquery/form/#file-upload" rel="external nofollow" target="_blank">More Info</a></p>
  • nodejs中http模块使用简单demo

    nodejs中http模块使用简单demo<h2>1.编写一个见得server.js</h2> server.js内容: <pre> <code class="language-javascript"> var http = require('http') ; var server = http.createServer(function(req,res){ res.writeHeader(200,{ 'Content-Type' : 'text/plain;charset=utf-8', // 添加charset=utf-8, 'Access-Control-Allow-Origin':'*',//跨域支持 'Access-Control-Allow-Methods':'*'//跨域支持 }) ; res.end("Hello,NodeJS!") ; }) ; server.listen(8888) ; console.log("http server running on port 8888 ...") ;</code></pre> <h2>2.启动server.js</h2> <br /> cmd命令: <pre> <code>node server.js</code></pre> <h2><img alt="cmd" class="img-thumbnail" src="/resources/assist/images/blog/302e7f1e7eb6492abf071383856352a4.png" /><br /> 3.编写一个简单的HTML,通过ajax请求访问</h2> <pre> <code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <button class="btn-test">点击请求nodejs接口</button> <script src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.btn-test').click(function(){ $.ajax({ url:'http://localhost:8888',//刚才的server.js提供的简单服务http接口 type:'GET', success:function(result){ alert("接口返回数据内容:"+result); } }); }); }); </script> </body> </html></code></pre> <br /> 执行结果:<br /> <img alt="node http" class="img-thumbnail" src="/resources/assist/images/blog/ebdbf804a3194213b13610e9ff0a1cec.png" />
  • spring mvc传递list集合对象到后端方法实现

    本文主要说明在spring mvc框架中如何接收前端发过来的集合对象和相关的处理。主要讲解两种方式,form表单提交方式和ajax提交的方式<h2>1.spring mvc 接收form表单传递的list对象集合处理</h2> 首先是前端页面代码: <pre> <code class="language-html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8" /> <title>list对象参数测试</title> </head> <body> <h1>list对象参数测试</h1> <form action="/sendFormData.do" method="post"> 用户1姓名: <input type="text" name="param.users[0].name" /> 用户1性别 <input type="text" name="users[0].sex" /> 用户1年龄 <input type="number" name="users[0].age" /> <hr /> 用户2姓名: <input type="text" name="param.users[1].name" /> 用户2性别 <input type="text" name="users[1].sex" /> 用户2年龄 <input type="number" name="users[1].age" /> <button type="submit">提交</button> </form> <button type="button" id="json-btn">JSON集合对象参数测试</button> </body> </html></code></pre> <strong><span style="color:#e67e22">注意:这里只用看form表单包裹的内容js部分是后面讲解ajax做的准备</span></strong><br /> <br /> spring mvc 的controller处理方法 <pre> <code class="language-java">@PostMapping("/sendFormData.do") public Object sendFormData(ParamVO users) { System.out.println(users.getUsers().size()); return "/test"; } </code></pre> 这里或许你看出来了使用的一个对象去接收form表单提交的数组。这个对象的内容如下 <pre> <code class="language-java">package com.example.vo; import java.io.Serializable; import java.util.List; /** * 接收数组对象必须使用对象封装一次 * @author xq * */ public class ParamVO implements Serializable { /** * */ private static final long serialVersionUID = 1L; private List<UserVO> users; public List<UserVO> getUsers() { return users; } public void setUsers(List<UserVO> users) { this.users = users; } } </code></pre> spring mvc里面必须进行封装一次List<UserVO>集合就是我们需要得到的前端数据 <h2>2.spring mvc 接收ajax传递list集合对象方法实现</h2> 页面: <pre> <code class="language-html"><!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8" /> <title>list对象参数测试</title> </head> <body> <h1>list对象参数测试</h1> <button type="button" id="json-btn">JSON集合对象参数测试</button> <script type="text/javascript" src="/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#json-btn').click(function() { send1(); }); }); function send1() { var saveDataAry = []; var data1 = { "name" : "test", "sex" : "男", "age" : 20 }; var data2 = { "name" : "ququ", "sex" : "女", "age" : 30 }; saveDataAry.push(data1); saveDataAry.push(data2); $.ajax({ type : "POST", url : "/sendData.json", dataType : "json",//必须json contentType : "application/json", // 指定这个协议很重要 data : JSON.stringify(saveDataAry), success : function(res) { alert("后端返回请求数据为:" + JSON.stringify(res)); } }); } </script> </body> </html></code></pre> <br /> 注意点是ajax的设置 <pre> <code class="language-html">dataType : "json",//必须json contentType : "application/json", // 指定这个协议很重要</code></pre> 后端spring mvc 接收方法: <pre> <code class="language-java"> @PostMapping("/sendData.json") @ResponseBody public Object sendData(@RequestBody List<UserVO> users) {// @RequestBody该注解很重要 System.out.println(users.size()); for (UserVO userVO : users) { System.out.println(userVO.toString()); } return users; }</code></pre>
  • zTree实现打开页面时异步加载数据及选中项ID提交到后台

    zTree实现打开页面时异步加载数据及选中项ID提交到后台1.页面 <pre> <code class="language-html"><!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="demoStyle/demo.css" type="text/css"> <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="ztreeJs/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="ztreeJs/jquery.ztree.all.min.js"></script> </HEAD> <BODY> <div style="margin-left: 5%"> <article class="page-container"> <div class="row cl"> <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>角色名称:</label> <div class="formControls col-xs-6 col-sm-6"> <input type="hidden" name="roleId" value="111" id="roleId"/> <input type="text" class="input-text" value="测试" id="roleName" name="roleName"> </div> </div> <div class="row cl"> <label class="form-label col-xs-3 col-sm-3">权限列表:</label> <div class="formControls col-xs-6 col-sm-6"> <!-- 权限代码 zTree--> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> </div> </div> </div> <div class="row cl"> <div class="col-xs-3 col-sm-3 col-xs-offset-3 col-sm-offset-3"> <button type="button" class="btn btn-success radius sbm""> <i class="icon-ok"></i> 确定 </button> <button type="button" class="btn btn-success radius reset"> <i class="icon-ok"></i> 取消 </button> </div> </div> </article> </div> </BODY> </HTML></code></pre> <br /> 2.js <pre> <code class="language-java">//假设我们做的是为某个角色设置菜单权限,并且新增和修改权限用的一个页面 $(function() { var roleId=$("#roleId").val(); onLoadZTree(roleId); }); var setting = { check : { enable : true }, data : { simpleData : { enable : true, idKey : "id", pIdKey : "pId", rootPId : "" } } }; var treeNodes; function onLoadZTree(roleId) { $.ajax({ type:'post',//请求方式:post dataType : 'json',//数据传输格式:json url:'/sysRoleMenu/menuTreeAjax',//获取角色菜单URL地址 data:{"sysRoleId":roleId}, async:false,//是否异步 cache : false,//是否使用缓存 error:function(errorMsg){ //请求失败处理函数 alert('亲,请求失败!'); }, success:function(data){ if(data.errCode == 'ok'){ treeNodes = data.data;//把后台封装好的简单Json格式赋给treeNodes }else{ alert('亲,初始化角色菜单失败'); } } }); //这里我们假设返回的数据是: var treeNodes =[ { id:1, pId:0, name:"父节点1", open:true, checked:true}, { id:11, pId:1, name:"父节点11", checked:true}, { id:111, pId:11, name:"叶子节点111", checked:true}, { id:112, pId:11, name:"叶子节点112", checked:true}, { id:113, pId:11, name:"叶子节点113", checked:true}, { id:114, pId:11, name:"叶子节点114", checked:true}, { id:12, pId:1, name:"父节点12"}, { id:121, pId:12, name:"叶子节点121"}, { id:122, pId:12, name:"叶子节点122"}, { id:123, pId:12, name:"叶子节点123"}, { id:124, pId:12, name:"叶子节点124"}, { id:13, pId:1, name:"父节点13", isParent:true}, { id:2, pId:0, name:"父节点2"}, { id:21, pId:2, name:"父节点21", open:true}, { id:211, pId:21, name:"叶子节点211"}, { id:212, pId:21, name:"叶子节点212"}, { id:213, pId:21, name:"叶子节点213"}, { id:214, pId:21, name:"叶子节点214"}, { id:22, pId:2, name:"父节点22"}, { id:221, pId:22, name:"叶子节点221"}, { id:222, pId:22, name:"叶子节点222"}, { id:223, pId:22, name:"叶子节点223"}, { id:224, pId:22, name:"叶子节点224"}, { id:23, pId:2, name:"父节点23"}, { id:231, pId:23, name:"叶子节点231"}, { id:232, pId:23, name:"叶子节点232"}, { id:233, pId:23, name:"叶子节点233"}, { id:234, pId:23, name:"叶子节点234"}, { id:3, pId:0, name:"父节点3", isParent:true} ]; var t = $("#treeDemo"); t = $.fn.zTree.init(t, setting, treeNodes) }; //组装被选中的菜单为jsonArray格式 function onCheck() { var roleId = $("#roleId").val(); var roleName = $("#roleName").val(); var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = treeObj.getCheckedNodes(true);//获取被选中的节点 var jsonArr = "["; for (var i = 0; i < nodes.length; i++) { jsonArr += "{"; jsonArr += "\"roleId\":\""+roleId+"\","; jsonArr += "\"roleName\":\""+roleName+"\","; jsonArr += "\"menuId\":\""+nodes[i].id+"\","; jsonArr += "\"menuName\":\""+nodes[i].name+"\""; jsonArr += "}" jsonArr += ',' } jsonArr = jsonArr.substring(0, jsonArr.length - 1); jsonArr += "]"; return jsonArr; }; $(function() { $(".sbm").click(function(){ var roleId= $("#roleId").val(); var sysRoleMenuStr = onCheck(); $.ajax({ type:'post',//请求方式:post dataType : 'json',//数据传输格式:json url:'/sysRoleMenu/createSysRoleMenu', data:{"sysRoleId":roleId,"sysRoleMenuStr":sysRoleMenuStr}, async:false,//是否异步 cache : false,//是否使用缓存 error:function(errorMsg){ alert("亲分配权限菜单成功"); //成功之后你需要做什么操作都在这里写 }, success:function(data){ if(data.errCode == 'ok'){ alert("亲分配权限菜单出错"); }else{ alert("亲分配权限菜单出错"); } } }); } }); }); </code></pre> 3.控制层 <pre> <code class="language-java">@Controller @RequestMapping(value = "/sysRoleMenu") public class SysRoleMenuController{ /** * 初始化菜单树列表 * * @param model * @param sysRoleId * @return */ @ResponseBody @RequestMapping("/menuTreeAjax") public BaseResult initMenuTreeList(Model model, String sysRoleId) { BaseResult baseResult = new BaseResult(); try { List<SysMenuTreeVo> MenuTreeList = sysRoleMenuService.getSysMenuTreeVo(sysRoleId); baseResult = new BaseResult(ResultCode.AJAX_OK, MenuTreeList, "数据加载成功"); } catch (Exception e) { baseResult = new BaseResult(ResultCode.AJAX_Err, "", e.getMessage()); return baseResult; } return baseResult; } /** * 创建角色菜单权限 * * @param model * @param sysRoleId * @param sysRoleMenuStr * @return */ @ResponseBody @RequestMapping("/createSysRoleMenu") public BaseResult createSysRoleMenu(Model model, String sysRoleId, String sysRoleMenuStr) { // 解析数据 List<SysRoleMenu> sysRoleMenuList = changeSysRoleMenuList(sysRoleMenuStr); BaseResult baseResult = new BaseResult(); try { sysRoleMenuService.createSysRoleMenu(sysRoleId, sysRoleMenuList);//这个方法我采用的是先删除角色下面的所有菜单权限,然后再执行的新增,这样新增修改就只用一个页面 baseResult = new BaseResult(ResultCode.AJAX_OK, "", "创建成功"); } catch (Exception e) { baseResult = new BaseResult(ResultCode.AJAX_Err, "", e.getMessage()); log.error("SysRoleMenuController类createSysRoleMenu方法,创建菜单权限出错!", e); return baseResult; } return baseResult; } /** * 解析菜单jsonArray数据 * * @param sysRoleMenuStr * @return * @throws LoadRecordException */ public List<SysRoleMenu> changeSysRoleMenuList(String sysRoleMenuStr) throws LoadRecordException { List<SysRoleMenu> sysRoleMenus = null; if (StringUtil.isBlank(sysRoleMenuStr)) { return sysRoleMenus; } try { sysRoleMenus = new ArrayList<SysRoleMenu>(); JSONArray jsonArray = JSON.parseArray(sysRoleMenuStr); for (Object object : jsonArray) { SysRoleMenu sysRoleMenu = new SysRoleMenu(); JSONObject jsonObject = JSON.parseObject(object.toString()); String roleId = jsonObject.getString("roleId"); String roleName = jsonObject.getString("roleName"); String menuId = jsonObject.getString("menuId"); String menuName = jsonObject.getString("menuName"); sysRoleMenu.setRoleId(roleId); sysRoleMenu.setRoleName(roleName); sysRoleMenu.setMenuId(menuId); sysRoleMenu.setMenuName(menuName); sysRoleMenus.add(sysRoleMenu); } } catch (Exception e) { log.error("解析菜单数据出错,class:SysRoleMenuController;method:changeProductSaleRegionList;exception:Exception", e); throw new LoadRecordException("解析菜单数据错误,请确定你的格式:" + e.getMessage(), e); } return sysRoleMenus; } }</code></pre> 4.前台需要的封装对象 <pre> <code class="language-java">public class SysMenuTreeVo { // 菜单主键ID private String id; // 上级菜单 private String pId; // 菜单名称 private String name; // 是否展开 private Boolean open = Boolean.FALSE; // 是否选中 private Boolean checked = Boolean.FALSE; public SysMenuTreeVo() { } public SysMenuTreeVo(SysMenu sysMenu, Boolean checked, Boolean open) { if (sysMenu != null) { this.id = sysMenu.getId(); if (StringUtil.isNotBlank(sysMenu.getParentId())) { this.pId = sysMenu.getParentId(); } else { this.pId = "0"; } this.name = sysMenu.getName(); } this.open = open; this.checked = checked; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getpId() { return pId; } public void setpId(String pId) { this.pId = pId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Boolean getOpen() { return open; } public void setOpen(Boolean open) { this.open = open; } public Boolean getChecked() { return checked; } public void setChecked(Boolean checked) { this.checked = checked; } @Override public String toString() { return "SysMenuTreeVo [id=" + id + ", pId=" + pId + ", name=" + name + ", open=" + open + ", checked=" + checked + "]"; }</code></pre> 5.页面展示效果<br /> <img alt="" class="img-thumbnail" src="/resources/assist/images/blog/8601236fd58f40269b72ca344c8008bd.png" /><br /> <br />  
  • SpringMVC与Struts2区别与比较总结

    SpringMVC与Struts2区别与比较总结<p><strong>1、</strong>Struts2是类级别的拦截, 一个类对应一个request上下文,SpringMVC是方法级别的拦截,一个方法对应一个request上下文,而方法同时又跟一个url对应,所以说从架构本身上SpringMVC就容易实现restful url,而struts2的架构实现起来要费劲,因为Struts2中Action的一个方法可以对应一个url,而其类属性却被所有方法共享,这也就无法用注解或其他方式标识其所属方法了。<br />  </p> <p><strong>2、</strong>由上边原因,SpringMVC的方法之间基本上独立的,独享request response数据,请求数据通过参数获取,处理结果通过ModelMap交回给框架,方法之间不共享变量,而Struts2搞的就比较乱,虽然方法之间也是独立的,但其所有Action变量是共享的,这不会影响程序运行,却给我们编码 读程序时带来麻烦,每次来了请求就创建一个Action,一个Action对象对应一个request上下文。<br /> <br /> <br /> <strong>3、</strong>由于Struts2需要针对每个request进行封装,把request,session等servlet生命周期的变量封装成一个一个Map,供给每个Action使用,并保证线程安全,所以在原则上,是比较耗费内存的。<br />  </p> <p><strong>4、</strong> 拦截器实现机制上,Struts2有以自己的interceptor机制,SpringMVC用的是独立的AOP方式,这样导致Struts2的配置文件量还是比SpringMVC大。<br /> <br />  </p> <p><strong>5、</strong>SpringMVC的入口是servlet,而Struts2是filter(这里要指出,filter和servlet是不同的。以前认为filter是servlet的一种特殊),这就导致了二者的机制不同,这里就牵涉到servlet和filter的区别了。<br />  </p> <p><strong>6、</strong>SpringMVC集成了Ajax,使用非常方便,只需一个注解@ResponseBody就可以实现,然后直接返回响应文本即可,而Struts2拦截器集成了Ajax,在Action中处理时一般必须安装插件或者自己写代码集成进去,使用起来也相对不方便。<br />  </p> <p><strong>7、</strong>SpringMVC验证支持JSR303,处理起来相对更加灵活方便,而Struts2验证比较繁琐,感觉太烦乱。<br />  </p> <p><strong>8、</strong>spring MVC和Spring是无缝的。从这个项目的管理和安全上也比Struts2高(当然Struts2也可以通过不同的目录结构和相关配置做到SpringMVC一样的效果,但是需要xml配置的地方不少)。<br />  </p> <p><strong>9、</strong> 设计思想上,Struts2更加符合OOP的编程思想, SpringMVC就比较谨慎,在servlet上扩展。<br />  </p> <p><strong>10、</strong>SpringMVC开发效率和性能高于Struts2。<br /> <br /> <strong>11、</strong>SpringMVC可以认为已经100%零配置。</p>