[JQ]笔记5_JQ的AJAX

其他 2018-10-31 17:42:28 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/express_yourself/article/details/53070457

一、JQ的AJAX

1、$.ajax( options ) : 通过 HTTP 请求加载远程数据
参数说明1
这里写图片描述

<1>dataType–服务器返回的数据类型–特殊的格式JQ进行预解析和兼容性修复（可选值:”xml”.”html”,”script”,”json”,”text”,”jsonp”）

act_get.php:

<?php
    $user=$_GET["user"];
    $pass=$_GET["pass"];
    // $user=$_POST["user"];
    // $pass=$_POST["pass"];

    if ($user=="lolo"&&$pass=="2303"){
        echo '{"err":0,"msg":"登陆成功"}';
    }else{
        echo '{"err":1,"msg":"登陆失败"}';
    }
?>

jq-ajax1_dataType.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ-ajax-dataType</title>
</head>
<body>
    账号：<input id="user" type="text">
    密码：<input id="pass" type="pass">
    <button id="login">登录</button>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
    $('#login').click(function(){
        $.ajax({
            type:'get',
            //要发送给服务器的数据写在url后面
            url:'act_get.php?user='+$('#user').val()+'&pass='+$('#pass').val(),
            dataType:'json',//服务器返回的数据类型--将字符串转化成相应格式对象
            success:function(d){//-->根据dataType参数获得json对象
                // var json=eval('('+d+')');//解析成json对象--此步不需要，dataType已进行解析
                // {err: 0, msg: "登陆成功"}
                alert(d.msg);
            },
            error:function(e){
                alert(e);
            }
        })
    })
})
/*http://localhost/test/9.27/act_get.php?user=33&pass=44*/
</script>
</html>

<2>data–要发送给服务器的数据(字符串写法&数组格式)
jq-ajax2_data.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ-ajax-data</title>
</head>
<body>
    账号：<input id="user" type="text">
    密码：<input id="pass" type="pass">
    <button id="login">登录</button>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
    $('#login').click(function(){
        $.ajax({
            type:'get',
            url:'act_get.php',
            //要发送给服务器的数据-->字符串写法
            // data:'user='+$('#user').val()+'&pass='+$('#pass').val(),
            // 要发送给服务器的数据-->数组格式
            data:{
                user:$('#user').val(),
                pass:$('#pass').val()
            },
            //服务器返回的数据类型
            dataType:'json',
            success:function(d){
                alert(d.msg);
            },
            error:function(e){
                alert(e);
            }
        })
    })
})
</script>
</html>

<3>请求http://sjz.bokanedu.com/tgr/api/index.aspx
jq-ajax3_bokanedu.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq-ajax_bokanedu</title>
</head>
<body>
    <button class="reauest">请求数据</button>
    <h1 class="con"></h1>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
    $('.reauest').click(function(){
        $.ajax({
            type:'get',
            url:'http://sjz.bokanedu.com/tgr/api/index.aspx',
            data:{'day':51,'type':'jQuery'},
            dataType:'json',
            cache:false,//不读取缓存--每次都生成一个时间戳作为数据发送
            //超时时间
            timeout:5000,
            success:function(d){
                $('.con').html(d.name+'说'+d.say)
            },
            error:function(e){
                alert(e);
            }
        })
    })
})
/*http://sjz.bokanedu.com/tgr/api/index.aspx?day=51&type=jQuery&_=1474962202381*/
</script>
</html>

2、$.ajax()跨域
dataType:’jsonp’,//跨域
jsonp:’cb’,//回调函数参数名，默认是callback
jsonpCallback:’myCallback’,//定义回调函数名称默认为 jQuery+一组数字

<1>关键字搜索：
jq-ajax5_jsonp_wd.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq-ajax5_jsonp_wd</title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{width:500px;margin:30px auto 0;padding:10px;background: #e3e3e3;}
#ipt{width:496px;line-height: 30px;font-size: 18px;color:blue;}
.list{margin-top:10px;background: #e3e3e3;}
.list li{line-height: 26px;font-size: 16px;color: blue;padding: 0 10px;}
.list li:hover{background: #ccc;}
</style>
</head>
<body>
<div id="box">
    <input id="ipt" type="text">
    <ul class="list">
    </ul>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
    $('#ipt').keyup(function(){
        $('.list').html('');
        $.ajax({
            type:'get',
            url:'http://suggestion.baidu.com/su?wd='+$('#ipt').val(),
            // data:'wd='+$('#ipt').val()+'&cb=successFn',
            cache:false,//不读取缓存--每次都生成一个时间戳作为数据发送
            dataType:'jsonp',//跨域
            jsonp:'cb',//回调函数参数名，默认是callback
            jsonpCallback:'myCallback',//定义回调函数名称默认为 jQuery+一组数字
            success:function (d){
                for (var i = 0; i < d.s.length; i++) {
                    // $('.list').append('<li>'+d.s[i]+'</li>');
                    $('.list').append('<li>'+d.s[i]+'</li>');
                };
            },
            error:function(e){
                alert(e);
            }
        })
    })
})
//加jsonpCallback
/*http://suggestion.baidu.com/su?wd=123&cb=myCallback&_=1474967590915*/
//不加jsonpCallback-默认为 jQuery+一组数字
/*http://suggestion.baidu.com/su?wd=123&cb=jQuery18308853381640364635_1474967634808&_=1474967636429*/
</script>
</body>
</html>

<2>电话查询：
jq-ajax6_jsonp_tel.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq-ajax5_jsonp_tel</title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{width:500px;margin:30px auto 0;padding:10px;background: #e3e3e3;}
#ipt{width:496px;line-height: 30px;font-size: 18px;color:blue;}
#list{margin-top:10px;background: #e3e3e3;}
#list li{line-height: 26px;font-size: 16px;color: blue;padding: 0 10px;}
#list li:hover{background: #ccc;}
</style>
</head>
<body>
<div id="box">
    <h3>电话号码查询</h1>
    <input class="ipt" type="text">
    <button class="btn">查询</button>
    <h2 class="con"></h2>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
    $('.btn').click(function(){
        $.ajax({
            type:'get',
            url:'http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?',
            data:'tel='+$('.ipt').val(),
            dataType:'jsonp',//跨域
            jsonp:'callback',
            jsonpCallback:'mcb',
            success:function(d){
                $('.con').html('什么移动：'+d.carrier)
            },
            error:function(e){
                alert(e);
            }
        })
    })
})
/*https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?&callback=mcb&tel=18463582303&_=1474969803777*/
</script>
</body>
</html>

<2>IP地址查询：
jq-ajax7_jsonp_ip.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq-ajax5_jsonp_tel</title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{width:500px;margin:30px auto 0;padding:10px;background: #e3e3e3;}
#ipt{width:496px;line-height: 30px;font-size: 18px;color:blue;}
#list{margin-top:10px;background: #e3e3e3;}
#list li{line-height: 26px;font-size: 16px;color: blue;padding: 0 10px;}
#list li:hover{background: #ccc;}
</style>
</head>
<body>
<div id="box">
    <h3>IP地址查询</h1>
    <button class="btn">查询</button>
    <h2 class="con"></h2>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
    $('.btn').click(function(){
        $.ajax({
            type:'get',
            url:'http://freegeoip.net/json/',
            dataType:'jsonp',
            jsonp:'callback',
            jsonpCallback:'mck',
            success:function(d){
                $('.con').html('IP地址为'+d.ip)
            },
            error:function(){
                alert(e);
            }
        })
    })
})
</script>
</body>
</html>
<!-- http://freegeoip.net/json/?callback=mck&_=1478520008418 -->

3、序列化-$(form).serialize()
将一个form表单内的所有数据转换为可以发送给服务器的字符串

通过序列化表单值，创建URL编码文本字符串
url:”act.php?”+$(“form”).serialize(),
“act.php?name=小明&age=19&msg=a”

$(form).serialize()_序列化.html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>序列化</title>
<style>
    *{margin:0; padding:0; list-style:none;}
</style>
</head>
<body>
<form method="get">
    账号：<input id="user" type="text" name="user" value="">
    密码：<input id="pass" type="text" name="pass" value="">
    <button id="login">登录</button>
</form>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
$(function (){
    $('#login').click(function (){
        $.ajax({
            type:'get',
            url:'act_get.php',
            // data:{user:$('#user').val(),pass:$('#pass').val()},
            data:$('form').serialize(),
            dataType:'json',
            success:function(d){
                alert(d.msg);
            },
            error:function(e){
                alert(e);
            }
        });
    })
})
//$(form).serialize()
/*将一个form表单内的所有数据转换为可以发送给服务器的字符串*/
</script>
</body>
</html>

二、load()

$(parent).load( url [, data] [, callback]);
通过 AJAX 请求从服务器加载数据，并把返回的数据放置 到指定的元素中
该方法是最简单的从服务器获取数据的方法。
url : 发送请求的URL
data ： 可选，发送至服务器的数据
callback ： 可选，请求完成时运行的函数

loadparent.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>主页内容</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
h1{text-align: center;}
.con{width: 500px;height: 300px;margin: 20px auto 0;border: 2px solid #000;}
</style>
</head>
<body>
<h1>主页面标题</h1>
<div class="con">
</div>
<button class="btn">请求数据</button>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
    $('.btn').click(function (){
        $('.con').load('loadchild.html')
    })
</script>
</body>
</html>

loadchild.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子页面内容</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
h1{text-align: center;}
</style>
</head>
<body>
<h1>子页面标题</h1>
<div>
子页面内容子页面内容子页面内容子页面内容子页面内容子页面内容子页面内容
</div>
</body>
</html>

效果：
load方法完成数据请求

三、get()与post()

1、$.get( url [, data] [, callback] [, dataType]);
get方式请求指定的url。
- url : 请求的URL
- data ： 可选，发送至服务器的数据
- callback ： 可选，请求完成时的回调函数
- dataType ： 可选，参照$.ajax参数中的dataType

账号：<input id="user" type="text" name="" value="">
密码：<input id="pass" type="text" name="" value="">
<button id="login">登录</button>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
$(function (){
    $('#login').click(function (){
        $.get('act_get.php',{'user':$('#user').val(),'pass':$('#pass').val()},function(d){
            alert(d.msg);
        },'json');
    })
})
/*http://localhost/test/9.27/act_get.php?user=manong&pass=741741*/
</script>

2、$.post( url [, data] [, callback] [, dataType]);
post与 get语法相同， 唯一的不同就是请求是以post方式进行

$(function (){
    $('#login').click(function (){
        $.post('act_post.php',{'user':$('#user').val(),'pass':$('#pass').val()},function(d){
            alert(d.msg);
        },'json');
    })
})
/*http://localhost/test/9.27/act_post.php*/

四、getScript()与getJson()

1、$.getScript(url [, callback]);
加载一段JS并执行
getscript.js：

alert('loulou');

jq-getscript.html：

$('.btn').click(function (){
        $.getScript('getscript.js');//弹出lolo
        $.getScript('getscript.js',function(s){//弹出lolo
            alert(s);////弹出alert(lolo)
        })
    })

2、$.getJSON(url [, callback]);
加载一段JSON并解析
getjson.json：

{
    "name":"loulou",
    "age":"18"
}

jq-getjson.html：

$('.btn').click(function (){
        $.getJSON('getjson.json',function (j){
            alert(j.name+' ,'+j.age);
        });
    });

猜你喜欢

转载自blog.csdn.net/express_yourself/article/details/53070457
jq
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022