30-Web-Ajax数据请求

最新推荐文章于 2022-08-29 09:10:22 发布

qq_48486897

最新推荐文章于 2022-08-29 09:10:22 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/qq_48486897/article/details/107760849

版权

1.Ajax数据请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>


<script type="text/javascript">
// 1.标识符
// 由字母、数字、下划线和$组成，数字不能开头
num = 100
num10 = 200
num_ = 300
$num = 400
// a# = 10        标识符中不能有#
// 23num = 100    数字不能开头
你好 = 'hello'     // 语法上允许标识符中有中文，但是实际开发的时候不要这样用

// 2.变量
/*
语法一: 
变量名 = 值
*/
name = '张三'
console.log(name)      // console.log() 和 python中的print功能类似
name = '小明'
console.log(name)

message = "hello world!"
console.log(message)

/*
语法二：
var 变量名 = 值
*/
var age = 18
console.log(age)
age = 20
console.log(age)

/*
语法三：
let 变量名 = 值
*/
let score = 98
console.log(score)
score = 100
console.log(score)

/*
语法四：
const 变量名 = 值
*/
const sex = '男'
console.log(sex)
// sex = '女'     # 报错，const定义的变量不能修改


// ============前三种定义变量的语法的对比==============
/*
如果用这三种方法定义变量都是在块和函数的外面，没有区别（都是全局的）
块里面: 在{}里面(js中一个{}会产生一个块)
*/
// 1.块里面定义
{
	a = 10
	var b = 20
	let c = 30
	
	console.log('块里面a:', a)
	console.log('块里面b:', b)
	console.log('块里面c:', c)
}
console.log('块外面a:', a)
console.log('块外面b:', b)
// 如果用let在{}中定义变量，那么这个变量只能在这个{}里面使用
// console.log('块外面c:', c)

// 2.函数里面定义
function func1(){
	// 函数体
	a1 = 100
	var a2 = 200
	let a3 = 300
	
	console.log('函数里面a1', a1)
	console.log('函数里面a2', a2)
	console.log('函数里面a3', a3)
}
func1()

console.log('函数外面a1', a1)
// 用var定义在函数中的变量，只能在当前函数中使用
// console.log('函数外面a2', a2)
// 用let定义在任何{}中的变量，都只能在当前{}中使用
// console.log('函数外面a3', a3)

// ==================其他的特殊情况=================
// 1.用关键字定义变量的时候，可以不给变量赋值，默认值是undefined
var student
console.log(student)      // undefined

var p1,p2
console.log(p1, p2)      // undefined undefined

</script>

2.网络数据展示(美女图片)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <style type="text/css">
            .beauty{
                width: 200px;
                /* height: 200px; */
                
                float: left;
                margin-right: 10px;
            }
            .beauty img{
                width: 200px;
                height: 180px;
            }
            
            .beauty p{
                font-size: 13px;
                color: #FF7F50;
            }
        </style>
	</head>
	<body>
        <h1>各种美女</h1>
        <div id="box">
            <!-- <div class="beauty"><a href=""><img src="" ></a><p></p></div> -->
        </div>
	</body>
    <script type="text/javascript">
        // 1.请求数据
        $.ajax({
            url:'http://api.tianapi.com/meinv/index?key=c9d408fefd8ed4081a9079d0d6165d43&num=30',
            type:'get',
            success:function(result){
				showData(result['newslist'])
                // showData(result.newslist)  //调用函数，传需要的数据过去
            }
			
        })
        
        // 2.展示数据
        function showData(beautyData){
            console.log(beautyData)
            // 遍历获取每个美女对应的数据
            beautyData.forEach(function(item){
				// 字符串中要加入数据，就先加''，再'++',再'+item+'
                var beautyNode = $('<div class="beauty"><a href="'+item.url+'"><img src="'+item.picUrl+'" ></a><p>'+item.title+'</p></div>')
                $('#box').append(beautyNode)
            })
        }
        
    </script>
    
</html>

3.周公解梦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <style type="text/css">
            #box1{
                height: 200px;
                border-bottom: solid 1px lightgray;
                position: relative;
            }
            #box1>div{
                position: absolute;
                bottom: 10px;
                width: 100%;
                text-align: center;
            }
            #box1 input{
                border: 0;
                outline: 0;
                border-bottom: dotted 1px lightgray;
                width: 200px;
                text-align: center;
                font-size: 20px;
            }
            
        </style>
	</head>
	<body>
        <div id="box1">
            <div id="">
                <input type="text" name="" id="" value="" placeholder="请输入梦相关的关键字"/>
                <button onclick="query()">查询</button>
            </div>
            
        </div>
        <div id="box2">
            
        </div>
        
        <script type="text/javascript">
            // 1.查询
            function query(){
                // 先清除上次查询的结果
                $('#box2').text('')
                
                // 获取输入框中的内容
                inputValue = $('#box1 input').val()
                if(inputValue==''){
                    alert('没有输入内容！')
                }
                // 请求数据
                $.ajax({
                    url:'http://api.tianapi.com/txapi/dream/index',
                    data:{
                        key:'c9d408fefd8ed4081a9079d0d6165d43',
                        num:5,
                        word:inputValue
                    },
                    type:'get',
                    success:showData
                })
            }
            // 2.解析数据
            function showData(result){
                var newslist = result.newslist
				console.log(newslist)
                newslist.forEach(function(item){  // 遍历数据
                    var pNode = $('<p>'+item.result+'</p>')
                    $('#box2').append(pNode)
					$('#box2').append($('<hr color="#FF0000">'))
                })
            }
            
        </script>
	</body>
</html>