前端异步请求 ajax与axios

有勇气的牛排 1177 前端 2021-11-24 23:48:28

1 ajax

有关token传递有两种方法，一种使用beforeSend，另一种使用headers（二选一即可）。

$.ajax({
	url: '/wallet',
	type: 'POST',
	dataType: 'json',
	beforeSend: function (request) {
    	// request.setRequestHeader("Authorization", "token");
    },
	headers: {
    	'Authorization': "token"
    },
	data: {
		'money': money
	},
	success:function (res) {
	
	},
	error:function () {
	
	}
});

2 axios

官网：https://www.axios-http.cn/

2.1 安装

npm

npm install axios

bower

bower install axios

yarn

yarn add axios

jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

unpkg CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3 常用轮子

3.1 函数

$(function () {

});

$("#submit").click(function () {
	var money = $("#money").val()
	alert(money)

});

3.2 遍历数组

var str = '';

for (i = 0; i < res.results.length; i++) {

    str += "<tr>" +
        " <td>" + res.results[i].uid + "</td>\n" +
        " <td><a href='/kfDetail'></a></td>\n" +
        " </tr>"

    $("#content").html(str);
}

3.3 重定向

location.href = '/shoplist/'+content

<h2><a id="1_ajax_0"></a>1 ajax</h2> <p>有关token传递有两种方法，一种使用beforeSend，另一种使用headers（二选一即可）。</p> <pre><div class="hljs"><code class="lang-javascript">$.<span class="hljs-title function_">ajax</span>({ <span class="hljs-attr">url</span>: <span class="hljs-string">'/wallet'</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">'POST'</span>, <span class="hljs-attr">dataType</span>: <span class="hljs-string">'json'</span>, <span class="hljs-attr">beforeSend</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">request</span>) { <span class="hljs-comment">// request.setRequestHeader("Authorization", "token");</span> }, <span class="hljs-attr">headers</span>: { <span class="hljs-string">'Authorization'</span>: <span class="hljs-string">"token"</span> }, <span class="hljs-attr">data</span>: { <span class="hljs-string">'money'</span>: money }, <span class="hljs-attr">success</span>:<span class="hljs-keyword">function</span> (<span class="hljs-params">res</span>) { }, <span class="hljs-attr">error</span>:<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { } }); </code></div></pre> <h2><a id="2_axios_27"></a>2 axios</h2> <p>官网：<a href="https://www.axios-http.cn/" target="_blank">https://www.axios-http.cn/</a></p> <h3><a id="21__30"></a>2.1 安装</h3> <p>npm</p> <pre><div class="hljs"><code class="lang-shell">npm install axios </code></div></pre> <p>bower</p> <pre><div class="hljs"><code class="lang-shell">bower install axios </code></div></pre> <p>yarn</p> <pre><div class="hljs"><code class="lang-powershell">yarn add axios </code></div></pre> <p>jsDelivr CDN</p> <pre><div class="hljs"><code class="lang-shell"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </code></div></pre> <p>unpkg CDN</p> <pre><div class="hljs"><code class="lang-shell"><script src="https://unpkg.com/axios/dist/axios.min.js"></script> </code></div></pre> <h2><a id="3__57"></a>3 常用轮子</h2> <h3><a id="31__58"></a>3.1 函数</h3> <pre><div class="hljs"><code class="lang-javascript">$(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { }); </code></div></pre> <pre><div class="hljs"><code class="lang-javascript">$(<span class="hljs-string">"#submit"</span>).<span class="hljs-title function_">click</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">var</span> money = $(<span class="hljs-string">"#money"</span>).<span class="hljs-title function_">val</span>() <span class="hljs-title function_">alert</span>(money) }); </code></div></pre> <h3><a id="32__71"></a>3.2 遍历数组</h3> <pre><div class="hljs"><code class="lang-javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">''</span>; <span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < res.<span class="hljs-property">results</span>.<span class="hljs-property">length</span>; i++) { str += <span class="hljs-string">"<tr>"</span> + <span class="hljs-string">" <td>"</span> + res.<span class="hljs-property">results</span>[i].<span class="hljs-property">uid</span> + <span class="hljs-string">"</td>\n"</span> + <span class="hljs-string">" <td><a href='/kfDetail'></a></td>\n"</span> + <span class="hljs-string">" </tr>"</span> $(<span class="hljs-string">"#content"</span>).<span class="hljs-title function_">html</span>(str); } </code></div></pre> <h3><a id="33__86"></a>3.3 重定向</h3> <pre><div class="hljs"><code class="lang-html">location.href = '/shoplist/'+content </code></div></pre>