当前位置:首页 > 资讯 > info5 > 正文

[JQ]笔记5_JQ的AJAX

发表于: 2016-11-07   作者:express_yourself   来源:转载   浏览:
摘要: 一、JQ的AJAX1、$.ajax(options):通过HTTP请求加载远程数据dataType–服务器返回的数据类型–特殊的格式JQ进行预解析和兼容性修复(可选值:”xml”.”html”,”script”,”json”,”text”,”jsonp”)act_get.php:jq-ajax1_dataType.html: JQ-ajax-dataType 账号: 密码: 登录 $

一、JQ的AJAX

1、$.ajax( options ) : 通过 HTTP 请求加载远程数据
[JQ]笔记5_JQ的AJAX_第1张图片
[JQ]笔记5_JQ的AJAX_第2张图片

<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>

效果:

三、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);
        });
    });

[JQ]笔记5_JQ的AJAX

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
第一种方法 第二种方法 jquery方法: MessageAction.class.php <?php class MessageAction exten
<script type="text/javascript"> jQuery(function () { var SpanShow = function () { var r
声明:本教程是误人子弟的,如果你想成为高手,那千万不要往下读。 在ASP.NET 的WebForm中,你可能
Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写,即“异步JavaScript和xml”。这
jQuery Ajax 实例 全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并
Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写,即“异步JavaScript和xml”。这
本章将讲解如何使用jQuery获取和修改元素属性和样式. 1.区分DOM属性和元素属性 <img src="images
最近在看《Head First Ajax》,虽然书里代码给的已经够详细了,但在手过一遍代码时还是引发了一些知
一 历史背景 Ajax是Asynchronous(异步)Javascript+XML和简写.异步请求/ 响应的模式.DHtml,动态Html技
这篇笔记的主要内容:ajax简介,XMLHttpRequest对象使用。 1. Ajax不只是一个特定的技术,更应算是
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号