jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

Tony 2018-03-12 01:4798 阅读

一、jQuery操作DOM

内部插入操作:

append(content|fn):向每个匹配的元素内部追加内容。

prepend(content):向每个匹配的元素内部前置内容。

外部插入操作:

after(content|fn):在每个匹配的元素之后插入内容。

before(content|fn):在每个匹配的元素之前插入内容。

包裹操作:

wrap(html|element|fn):把所有匹配的元素用其他元素的结构化标记包裹起来。

unwrap():这个方法将移出元素的父元素。

wrapAll(html|ele):将所有匹配的元素用单个元素包裹起来。

wrapInner(htm|element|fnl):将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。

替换操作:

replaceWith(content|fn):将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素。

删除操作:

empty():删除匹配的元素集合中所有的子节点。

remove([expr]):从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

detach([expr]):从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

复制操作:

clone(Even]):克隆匹配的DOM元素并且选中这些克隆的副本。

even:一个布尔值(true 或者 false)指示事件处理函数是否会被复制。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"> .outer_one{ width: 80%; height: 80px; text-align: center; background: #ff0000; } .outer_one_child{ width: 100%; height: 50px; line-height: 50px; text-align: center; background: #00cd00; } .outer_four{ background: purple; } </style>
    </head>
    <body>
        <div class="container">
            <div class="outer_one"> 第一个外边框 </div>
            <div class="outer_one_child"> 第一个外边框的孩子——布局与第一个外边框同级 </div>
            <div class="outer_two"> 第二个外边框 </div>
            <div class="outer_three"> 第三个外边框 </div>
            <div class="outer_four"> 第四个外边框 </div>
            
            <div class="outer_five">
                <p>第五个外边框</p>
                <p>第五个外边框</p>
                <a>第五个外边框</a>
            </div>
            <div class="outer_six">
                <p>第六个外边框</p>
                <a>第六个外边框</a>
            </div>
            <div class="outer_seven">
                <p>第七个外边框</p>
                <p>第七个外边框</p>
                <a>第七个外边框a标签<p>我是孙子p标签</p></a>
                <p>第七个外边框</p>
            </div>
            <div class="outer_eight">
                <p>第八个外边框</p>
                <a>第八个外边框<span>&times;</span></a> 第八个外边框 </div>
            <div class="outer_nine">
                <p>第九个外边框</p> 
                <p>第九个外边框</p> 
                <p>第九个外边框</p> 
                <p>第九个外边框</p> 
            </div>
            <div class="outer_ten">
                <p>第十个外边框</p> 
                <p>第十个外边框</p> 
                <p>第十个外边框</p> 
                <a>第十个外边框</a> 
            </div>
            <div class="outer_11">
                <p>第11个外边框</p> 
                <p>第11个外边框</p> 
                <p>第11个外边框</p> 
                <a>第11个外边框</a> 
            </div>
            <div class="outer_12">
                <p>第12个外边框</p> 
                <p>第12个外边框</p> 
            </div>
            <div class="outer_13">
                <p>第13个外边框</p> 
                <p>第13个外边框</p> 
            </div>
            <div class="outer_14"> 第14个外边框 </div>
            <div class="outer_15"> 第15个外边框 </div>
            <div class="outer_16"> 第16个外边框 </div>
            <div class="outer_17"> 第17个外边框 </div>
            
        </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        
        //内部插入(生成子元素) //append元素内部末尾追加内容(支持回调函数)
        $('.outer_one').append($('.outer_one_child'));//将现有标签追加到元素内
        $('.outer_two').append('<p>');//向元素末尾追加新标签 //prepend元素内部开头追加内容
        $('.outer_three').prepend('我是prepend追加的内容'); //外部插入(生成兄弟元素)
        $('.outer_four').before('<p>我是before刚插入的标签</p>') $('.outer_four').after('<p>我是after刚插入的标签</p>') //包裹操作wrap(添加父元素) unwrap(移除父元素)
        $('.outer_five p').wrap('<a>');//所有包含的元素外围包裹p标签
        $('.outer_six p').unwrap('<p>');//去除父元素的包裹 //wrapAll将所有匹配的元素放到一起用一个规定的父元素包裹
        $('.outer_seven p').wrapAll('<a>'); //wrapInner将子元素包裹
        $('.outer_eight').wrapInner('<h3>'); //替换操作 //replaceWith将匹配的元素替换为规定的元素
        $('.outer_nine p').replaceWith('<a>'); //replaceAll将匹配的元素替换为规定的元素
        $('<p>').replaceAll('.outer_ten a'); //删除操作
        $('.outer_11').empty(); // remove和detach的区别: //remove() dom中删除节点保留到jquery,元素保留,事件删除 //detach() dom中删除节点保留到jquery,元素保留,事件保留
        $('.outer_12').click(function(){ $(this).css('background','green'); }).remove().appendTo('.outer_14'); $('.outer_13').click(function(){ $(this).css('background','red'); }).detach().appendTo('.outer_15'); //复制操作clone(even)方法的参数取值boolean如果true保留复制元素的绑定事件否则相反
        $('.outer_16').clone().appendTo('.outer_17') </script>
</html>

二、jQuery动画

show([speed, [easing], [callback]]):显示隐藏的匹配元素。

hide([speed, [easing], [callback]]):隐藏显示的元素。

toggle([speed, [easing], [callback]]):如果元素是可见的,切换为隐藏的,如果元素是隐藏的,切换为可见的。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

callback:在动画完成时执行的函数,每个元素执行一次。

运动过程中:改变width、height、margin、padding、opacity属性值,添加overflow:hidden属性。 

slideDown([speed, [easing], [callback]]):通过高度变化(向下增大)来动态的显示所有匹配的元素,显示完成后可选的触发一个回调函数。

slideUp([speed, [easing], [callback]]):通过高度变化(向上减小)来动态的隐藏所有匹配的元素,隐藏完成后可选的触发一个回调函数。

slideToggle([speed, [easing], [callback]]):通过高度变化来切换所有匹配元素的可见性,切换完成后可选的触发一个回调函数。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

callback:在动画完成时执行的函数,每个元素执行一次。

运动过程中:改变height、margin-top、margin-bottom、padding-top、padding-bottom属性值,添加overflow:hidden属性。 

fadeIn([speed, [easing], [callback]]):通过不透明度的变化来实现所有匹配元素的淡入效果,动画完成后可选的触发一个回调函数。

fadeOut([speed, [easing], [callback]]):通过不透明度的变化来实现所有匹配元素的淡出效果,动画完成后可选的触发一个回调函数。

fadeTo([speed, opacity, [easing], [callback]]):把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,动画完成后可选的触发一个回调函数。opacity:一个0到1之间表示透明度的数字。

fadeToggle([speed, [easing], [callback]]):通过不透明度的变化来开关所有匹配元素的淡入淡出效果,动画完成后可选的触发一个回调函数。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

callback:在动画完成时执行的函数,每个元素执行一次。

注:fadeIn、fadeout、fadeToggle,运动过程中修改opacity属性值,最终只修改display属性值。而fadeTo只修改opacity属性值。 

animate(params, [speed], [easing], [fn]):用于创建自定义动画的函数。

params:一组包含作为动画属性和终值的样式属性和及其值的集合。

speed:三种预定速度的字符串(slow、normal、fast)或者动画时长的毫秒数值。

easing:指定切换效果,默认是swing,可用linear。

fn:在动画完成时执行的函数,每个元素执行一次。 

stop(clearQueue, [jumpToEnd]):停止所有在指定元素上正在运行的动画。如果clearQueue没有设置为true,并且队列中有等待执行的动画,他们将马上执行。

clearQueue:如果同一元素调用多个动画方法,尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。调用stop()的时候,队列中的下一个动画开始。如果clearQueue参数为true,那么在队列中的动画其余被删除并永远不会被执行。

jumpToEnd:当前动画将停止,但该元素上的CSS属性会被立刻修改成动画的目标值。 

delay(duration [,queueName]):设置一个延时来推迟执行队列中之后的项目。

duration:延迟时间,单位:毫秒。

queueName:队列名次,默认是Fx,动画队列。 

jQuery.fx.off:关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画。把这个属性设置为false,可以重新开启所有动画。

jQuery.fx.interval:设置动画的显示帧速。 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery—dom操作和ajax方法</title>
    <style type="text/css">
        *{ padding: 0; margin: 0; } .box{ width: 90%; height: 100px; margin: 20px; padding: 10px; border: 10px solid #ff0000; background: #888888; } input[type=button]{ border: 1px solid #555555; padding: 10px 20px; background:'#f3f3f3'; margin:5px; } </style>
</head>
<body>
    <div class="container">
        <input name="show" type="button" value="show显示" />
        <input name="hide" type="button" value="hide隐藏" />
        <input name="toggle" type="button" value="toggle动画" />
        <hr/>
        <input name="slideDown" type="button" value="slideDown动画" />
        <input name="slideUp" type="button" value="slideUp动画" />
        <input name="slideToggle" type="button" value="slideToggle动画" />
        <hr/>
        <input name="fadeIn" type="button" value="fadeIn动画" />
        <input name="fadeOut" type="button" value="fadeOut动画" />
        <input name="fadeToggle" type="button" value="fadeToggle动画" />
        <input name="fadeTo" type="button" value="fadeTo动画" />
        <hr/>
        <input name="animate" type="button" value="animate自定义动画" />
        <input name="delay" type="button" value="delay动画延迟" />
        <input name="stop" type="button" value="stop停止动画" />
        <div class="box">
            
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">

    // $.fx.off = true; // 关闭页面上所有的动画 // $.fx.interval = 500; //设置动画显示帧速 500ms执行一次 // toggle和带有toggle的jQuery方法显示动画为隐藏、隐藏动画为显示可重复
    $('input[name=show]').click(function () { $('.box').show('slow','linear',function () { console.log("显示动画"); }); }); $('input[name=hide]').click(function () { $('.box').hide('quick'); }); $('input[name=toggle]').click(function () { $('.box').toggle(5000); }); // 操作高度控制元素的显示隐藏
    $('input[name=slideDown]').click(function () { $('.box').slideDown(5000, 'linear', function () { console.log('OVER'); }); }); $('input[name=slideUp]').click(function () { $('.box').slideUp(1000); }); $('input[name=slideToggle]').click(function () { $('.box').slideToggle(1000); }); // 操作opacity属性
    $('input[name=fadeIn]').click(function () { $('.box').fadeIn(1000); }); $('input[name=fadeOut]').click(function () { $('.box').fadeOut(1000); }); $('input[name=fadeToggle]').click(function () { $('.box').fadeToggle(1000); }); $('input[name=fadeTo]').click(function () { alert("fadeIn、fadeout、fadeToggle,运动过程中修改opacity属性值,         最终只修改display属性值。而fadeTo只修改opacity属性值         ,故针对此属性后其他动画无法显示。 ")
        $('.box').fadeTo(1000, 0); }); // 自定义动画
    $('input[name=animate]').click(function () { $('.box').animate({ width: 200, height: 200, opacity: 0.4, border:0 }, 6000, 'linear', function () { console.log('自定义动画完成'); }); }); // 动画延迟
    $('input[name=delay]').click(function () { $('.box').delay(2000).animate({ width: 200, height: 200, opacity: 0.4, border:0 }, 6000, 'linear', function () { console.log('自定义动画完成'); }); }); $('input[name=stop]').click(function () { $('.box').stop(false, true); }); </script>
</html>

三、jQuery循环遍历及data()方法

对象访问:

each(callback):以每一个匹配的元素作为上下文来执行一个函数。回调函数有两个参数,第一个参数代表索引,第二个参数代表当前遍历到的DOM对象。return true则跳至下一个循环(就像在普通循环中使用continue),return false则终止循环(就像在普通循环中使用break)。

get([index]):取得其中一个匹配的元素。 num表示取得第几个匹配的元素。与$(this)[0]等价。

index([selector|element]):搜索匹配的元素,并返回相应元素的索引值,从0开始计数。如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。如果不传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

数据缓存:

data([key],[value]) :在元素上存放数据,返回jQuery对象。

removeData([name|list]):在元素上移除存放的数据。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery循环遍历</title>
        <style type="text/css">
        *{ margin: 0; padding: 0; } .list{ list-style: none; line-height: 35px; text-indent: 24px; } .list li{ border-bottom: 1px dashed #f3f3f3; } </style>
    </head>
    <body>
        <div class="container">
            <ul class="list" data-name='迷城'>
                <li>标签内容1</li>
                <li>标签内容2</li>
                <li>标签内容3</li>
                <li>标签内容4</li>
                <li>标签内容5</li>
            </ul>
        </div>
        <img class="testimg" src="kong" data-src="测试" />
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        /*参数回调函数包含两个参数,一索引值,二对应项的dom元素*/ $('.list li').each(function (index,value) { // get方法对应索引位置的元素
 $(value).hover(function(){ this.style.background="#555555"; console.log(index,$('.list li').get(index)); console.log($(this).index()); },function () { this.style.background="#ffffff"; }); }); // data()添加的数据属性在dom元素不显示
        /*data()在元素直接定义data需要加data-前缀 后续修改data的值不会dom元素身上呈现 */ $('.list').data('name', '烟雾'); console.log($('.list').data('name')); $('.list').removeData('name') /*removeData()元素身上直接定义的data无法删除, 可以理解为元素身上添加例如data-name视为初始化data*/ console.log($('.list').data('name')); $('.list').data('age','40'); $('.list').removeData('age'); console.log($('.list').data('age')); console.log($('.testimg').data('src')); $('.testimg').data('src','数据') console.log($('.testimg').data('src')); /*data()、removeData()方法不能直接通过data-操作data()添加的数据*/ $('.testimg').data('data-src'); $('.testimg').attr('src'); /*data(key, value)中value可以存储任意对象而不限于简单类型。     为此付出的代价是,dom添加jQuery.expando属性,用jQuery-ID进行唯一标识,     然后用jQuery.cache做k-v字典,于是dom上只能看到jQuery.expando,     而实际上data数据都是存在那个字典里的*/
       //具体查看jQuery框架源码
    </script>
</html>
    

 四、jQuery.ajax方法

1、load(url, [data], [callback]):载入服务器HTML文件代码并插入至DOM中。默认为GET请求。

1)url不一定是html文件地址,css、js、txt、php等可以。

2)筛选加载进来的HTML文档:Load(url  #content p)。

3)data可以是key/value数据,也可以是字符串类型。如果是键值对对象类型,则为POST请求,如果是字符串,则为GET请求。

4)回调函数三个参数:1:获取的HTML代码,2:请求状态的描述,3:XHR对象。 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
    <style type="text/css">
        *{ padding: 0; margin: 0; } </style>
</head>
<body>
    <ul class="list">
<!--     
//test.html文件内容 
<ul>
    <li>测试数据1</li>
    <li>测试数据2</li>
    <li>测试数据3</li>
    <li>测试数据4</li>
    <li>测试数据5</li>
</ul> -->
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript"> $('.list').load('test.html ul li',function () { console.log("加载完成") }) </script>
</html>

 

2、jQuery.ajax(url, [settings]):通过HTTP请求加载远程数据,返回其创建的XHR对象。

url:请求地址,settings也有url配置选项,如果同时设置,则以外面的url为基准。如果都不设置,则默认请求的是当前发起请求的页面。

settings配置选项:

dataType:支持的数据类型:xml,html、json、jsonp、script、text。

  • text和xml类型返回的数据不会经过处理。数据仅仅将简单的XHR的responseText和responseXML属性传递给success回调函数。
  • script类型:jquery会先执行服务器端生成的JS代码,然后将脚本作为一个文本数据返回。
  • jsonp类型:会创建一个查询字符串参数callback=?,这个参数会加在请求的URL后面。
  • xml类型:返回XML文档,可用jquery处理。
  • html类型:返回纯文本HTML信息,包含的script标签会在插入DOM时执行。
  • json类型:返回JSON数据。
  • text类型:返回纯文本字符串。 

async:Boolean类型。默认为true(异步)。

contentType:string类型。默认为application/x-www-form-urlencoded,发送信息至服务器时内容编码类型。

context:object类型。这个对象用于设置AJAX相关回调函数的上下文,也就是说,让回调函数内部的this指向这个对象。

timeout:设置请求超时时间(毫秒)。

type:请求方式(GET或POST),默认为GET。

url:默认当前页地址,发送请求的地址。

data:object/string类型。发送到服务器的数据。

jsonp:string类型。在一个jsonp请求中重写回调函数的名字。这个值用来替代”callback=?”中的callback部分。

jsonpCallback:string类型。为jsonp请求指定一个回调函数名。这个值用来取代jQuery自动生成的随机函数名。

statusCode:map类型。一组数值的HTTP代码和函数对象,当响应时调用相应的代码。

回调函数:

beforeSend:在发送请求之前调用,并且传入XHR作为参数。

error:在请求出错时调用。传入XHR对象,描述错误类型的字符串,以及异常对象(如果存在的话)。

dataFilter:在请求成功后调用,传入返回的数据以及dataType参数的值,并且必须返回新的数据给success回调函数

success:当请求成功之后调用,传入返回后的数据,以及包含成功代码的字符串。

complete:当请求完成后调用这个函数,无论成功或失败。传入XHR对象,以及包含成功或错误代码的字符串。

beforeSend:function(xhr, ajax){}

dataFilter:function (data, dataType){}

success:function(data, sInfo, xhr){}

complete:function(xhr, sInfo){}

error:function(xhr, sInfo[, exception]){}

成功执行顺序:beforeSend、dataFilter、success、complete

失败执行顺序:beforeSend、error、complete

ajax普通请求:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
    <style type="text/css">
        *{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style>
</head>
<body>
    <div class="container">
        <form action="get">
            <div class="box account-box">
                <label>账号:</label>
                <input type="text" name="account" />
            </div>
            <div class="box account-box">
                <label>密码:</label>
                <input type="password" name="password" />
            </div>
            <div class="box account-box">
                <input type="button" value="登录" name="commitBtn" />
            </div>
        </form>        
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript"> $.ajax({ type:'POST',//请求类型post/get
        url:'ajax.php',//请求路径url
        dataType:'json',//返回数据类型
        asyn:true,//是否为异步true异步/false同步
        timeout:2000,//设置请求超长事件(毫秒)
 beforeSend:function () { console.log("发送前调用的回调函数") }, error:function () { console.log("错误捕获") }, dataFilter:function (data) { return '{}' }, success:function (data) { console.log(data); }, complete:function () { console.log("jq.ajax请求完成都会执行") } }) </script>
</html>
ajax请求php后台

  

<?php echo "1111";
php两行代码

 ajax跨域请求:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
</head>
<body>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
    // 通过jQuery实现跨域
 $.ajax({ url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&json=1&p=3&sid=1464_25548_21101_18559_17001_20719&req=2&csor=1', dataType: 'jsonp', // 跨域请求
        jsonp: 'cb', //设置回调函数名称(callback=?的callback部分)
        jsonpCallback: 'callcack', //设置回调函数名称(callback=?的?部分)
 success:function (data) { console.log(data) } }); </script>
</html>
ajax实现jsonp跨域请求

3、$.get(url, [data], [callback], [type]):通过HTTP GET请求获取数据。这是一个简单的GET请求取代复杂的$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数,则使用$.ajax。

type值:_default。HTML或者XML取决于返回值。 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
    <style type="text/css">
        *{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style>
</head>
<body>
    <div class="container">
        <form action="javascript:;">
            <div class="box account-box">
                <label>账号:</label>
                <input type="text" name="account" />
            </div>
            <div class="box account-box">
                <label>密码:</label>
                <input type="password" name="password" />
            </div>
            <div class="box account-box">
                <input type="submit" value="登录" />
            </div>
        </form>        
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js">
</script>
<script type="text/javascript"> $("form").submit(function () { var account=$('input[type=text]').val() var password=$('input[type=password]').val() $.get('ajax.php', { account:account, password:password }, function (data) { console.log(data); }, 'json'); }); </script>
</html>
jQuery.get()

  

<?php $account = $_GET['account']; $password = $_GET['password']; echo json_encode($account.'||'.$password, JSON_UNESCAPED_UNICODE);
php后台文件

4、$.post(url, [data], [callback], [type]):通过HTTP POST请求获取数据。这是一个简单的POST请求取代复杂的$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数,则使用$.ajax。

type值:_default。HTML或者XML取决于返回值。 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
    <style type="text/css">
        *{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style>
</head>
<body>
    <div class="container">
        <form action="javascript:;">
            <div class="box account-box">
                <label>账号:</label>
                <input type="text" name="account" />
            </div>
            <div class="box account-box">
                <label>密码:</label>
                <input type="password" name="password" />
            </div>
            <div class="box account-box">
                <input type="submit" value="注册" />
            </div>
        </form>        
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js">
</script>
<script type="text/javascript"> $("form").submit(function () { var account=$('input[type=text]').val() var password=$('input[type=password]').val() $.post('ajax.php', { account:account, password:password }, function (data) { if (data===true) { console.log("注册成功") } else{ console.log("注册失败") } }, 'json'); }); </script>
</html>
jQuery.post

  

<?php $account = $_POST['account']; $password = $_POST['password']; $flag=true; if ($account==$password) { $flag=false; } echo json_encode($flag,JSON_UNESCAPED_UNICODE);
php后台文件

5、$.getJSON(url, [data], [callback]):通过HTTP GET请求获取JSON数据。可以通过使用JSONP形式的回调函数来加载其他网站的数据。如:”myulr?cb=?”,jQuery会自动替换 ? 为正确的函数名,以执行回调函数。 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
</head>
<body>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js">
</script>
<script type="text/javascript">        
    // 通过getJSON跨域获取数据
    $.getJSON('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&json=1&p=3&sid=1464_25548_21101_18559_17001_20719&req=2&csor=1&cb=?', {a:'b'}, function (data) { console.log(data); }); </script>
</html>
jQuery.getJSON跨域请求

 6、$.getScript(url, [callback]):通过HTTP GET请求载入并执行一个JS文件。 

// 获取js代码,可执行当代码处理
$.getScript('ajax.php', function (data) { console.log(data); });
jQuery.getScript获取js代码(给出重要代码,无演示)

 四、jQuery序列化方法(可扩展反序列化)

$(DOM).serialize():序列表单内容为字符串,用于AJAX请求。

$(DOM).serializeArray():序列化表单元素,返回JSON数据结构数据。 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq.ajax方法</title>
    <style type="text/css">
        *{ padding: 0; margin: 0; } .container{ border: 1px solid #eeeeee; margin: 100px auto 0; width: 500px; overflow: hidden; } .box{ width: 300px; height: 40px; border: 1px solid #f4f4f4; line-height: 40px; margin: 10px auto; overflow: hidden; } .box label{ width: 60px; text-align: center; display: inline-block; } .box input{ width: 60%; height: 100%; border: none; outline: none; font-size: 18px; } .box input[type=button]{ width: 100%; } </style>
</head>
<body>
    <div class="container">
        <form action="javascript:;">
            <div class="box account-box">
                <label>账号:</label>
                <input type="text" name="account" />
            </div>
            <div class="box account-box">
                <label>密码:</label>
                <input type="password" name="password" />
            </div>
            <div class="box account-box">
                <input type="submit" value="注册" />
            </div>
        </form>        
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js">
</script>
<script type="text/javascript"> $("form").submit(function () { // var account=$('input[type=text]').val() // var password=$('input[type=password]').val()
        var param=$(this).serializeArray() console.log(param)//json格式
        var param=$(this).serialize() console.log(param)//字符串格式
        $.post('ajax.php', param, function (data) { if (data===true) { console.log("注册成功") } else{ console.log("注册失败") } }, 'json'); }); </script>
</html>

  

<?php $account = $_POST['account']; $password = $_POST['password']; $flag=true; if ($account==$password) { $flag=false; } echo json_encode($flag,JSON_UNESCAPED_UNICODE);

 

回复数量: 0
暂无评论~~
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!