跨域解决和异步问题

最新推荐文章于 2023-01-31 22:49:16 发布

琪公子呀

最新推荐文章于 2023-01-31 22:49:16 发布

阅读量119

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言 html jquery

本文链接：https://blog.csdn.net/benxiaohai_311/article/details/125878812

版权

跨域 Ajax Promise jQuery JavaScript异步

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

^(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)$

MAC

^[A-F0-9]{2}(-[A-F0-9]{2}){5}$|^[A-F0-9]{2}(:[A-F0-9]{2}){5}$|^[A-F0-9]{12}$|^[A-F0-9]{4}(\.[A-F0-9]{4}){2}$

端口

^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$

一、跨域解决 Access to XMLHttpRequest at

html页面
添加这一行 contentType: “application/x-www-form-urlencoded”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示小区信息</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
		<input v-model="username" class="money" ></input>
    </div>


    <script>
       const header=new Vue({
					el:'#app',
					data:{
						'username':""
					},
					created:function(){
						var that = this;
						$.ajax({
                            contentType: "application/x-www-form-urlencoded",
                            url: "http://47.94.33.88/ajax/ajax.php",
							type:'POST',
							data:{
								'usrename':that.username
							},
							success:function (data) {
								var json=JSON.parse(data);
								that.username=json;
							}
					})
				}
					
				})
	</script>
	
</body>
</html>

二、js异步问题 --- 前端

// ajax函数将返回Promise对象:
function ajax(method, url, data) {
    var request = new XMLHttpRequest();
    return new Promise(function (resolve, reject) {
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    resolve(request.responseText);
                } else {
                    reject(request.status);
                }
            }
        };
        request.open(method, url);
        request.send(data);
    });
}
　　
var p = ajax('GET', '/api/categories');
p.then(function (text) { 
    // 如果AJAX成功，获得响应内容　　
    consolo.log(text)}).catch(function (status) { 
    // 如果AJAX失败，获得响应代码   
    consolo.log( 'ERROR: ' + status )
});