<p><code></p> <h3 id="articleHeader0">vue-resource</h3> <p><em>The plugin for <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP</em></p> <p>以上是官方解释:vue-resource 是一个为vue 提供web请求与处理响应的类<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> Ajax的插件且支持json对象与XMLHttpRequest对象</p> <p>话不多说,进入正题</p> <blockquote> <p><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>部分</p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div class=&quot;page_bd&quot;> <div class=&quot;weui-cells&quot;> <div class=&quot;weui-cell&quot;> <div class=&quot;weui-cell__bd&quot;> <input class=&quot;weui-input&quot; v-model=&quot;student.userName&quot; type=&quot;text&quot; placeholder=&quot;姓名&quot;> </div> </p></div> </p></div> <div class=&quot;weui-cells&quot;> <div class=&quot;weui-cell&quot;> <div class=&quot;weui-cell__bd&quot;> <input class=&quot;weui-input&quot; type=&quot;text&quot; v-model=&quot;student.phoneCode&quot; placeholder=&quot;手机&quot;> </div> </p></div> </p></div> </div> <p> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"page_bd"</span>&gt; &lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"weui-cells"</span>&gt; &lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"weui-cell"</span>&gt; &lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"weui-cell__bd"</span>&gt; &lt;input <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"weui-input"</span> v-model=<span class="hljs-string">"student.userName"</span> <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> placeholder=<span class="hljs-string">"姓名"</span>&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"weui-cells"</span>&gt; &lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"weui-cell"</span>&gt; &lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"weui-cell__bd"</span>&gt; &lt;input <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"weui-input"</span> <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span> v-model=<span class="hljs-string">"student.phoneCode"</span> placeholder=<span class="hljs-string">"手机"</span>&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <blockquote> <p>js部分</p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data:{ return { student:{ userName:&quot;&quot;, phoneCode:&quot;&quot; } } }, methods: { doSubmit(){</p> <p> var formData = JSON.stringify(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.student); // 这里才是你的表单数据 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$http.post(url,formData).then(function(data){ if(data.json().state==&quot;success&quot;){ setTimeout(function () { console.log(&quot;success&quot;); }, 2000); }</p> <p> }).catch(function(){ console.log(&quot;服务器异常!&quot;); });</p> <p> }</p> <p> } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">data</span>:{ <span class="hljs-keyword">return</span> { <span class="hljs-attr">student</span>:{ <span class="hljs-attr">userName</span>:<span class="hljs-string">""</span>, <span class="hljs-attr">phoneCode</span>:<span class="hljs-string">""</span> } } }, <span class="hljs-attr">methods</span>: { doSubmit(){ <span class="hljs-keyword">var</span> formData = <span class="hljs-built_in">JSON</span>.stringify(<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.student); <span class="hljs-comment">// 这里才是你的表单数据</span> <span class="hljs-keyword">this</span>.$http.post(url,formData).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{ <span class="hljs-keyword">if</span>(data.json().state==<span class="hljs-string">"success"</span>){ setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"success"</span>); }, <span class="hljs-number">2000</span>); } }).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"服务器异常!"</span>); }); } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><strong><em>欢迎指正 499260459<a href="/u/qq">@qq</a> .com</em></strong></p> <p><strong>so easy , that's end </strong></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25912.html