ajax同步请求,ajax异步传输

ajax同步请求,ajax异步传输,ajax异步请求详解

做前端开发的朋友一定对ajax异步更新印象深刻。本文主要介绍了ajax异步请求的一些内容,具有一定的参考价值。让我们和边肖一起来看看吧。

做前端开发的朋友一定对ajax异步更新印象深刻。作为一个入坑新人,今天和大家聊聊ajax异步请求。既然是ajax,jQuery的知识是必不可少的。建议你去www.w3school.com学习。教程很完善,适合新手快速入门。

jQuery的引用可以通过下载js文件导入,也可以外部导入。

script src=' http://libs . Baidu . com/jquery/1 . 9 . 0/jquery . js ' type=' text/JavaScript '/script

导入jQuery后,我们就可以开始ajax异步更新请求数据了。

1.使用load()方法请求通过Ajax加载服务器中的数据,并将返回的数据放入指定的元素中。它的调用格式是:load(url,[data],[callback])参数url是加载服务器的地址,可选的data参数是请求时发送的数据,callback参数是数据请求成功后执行的回调函数。

$(function(){

$('#btn ')。单击(函数(){

$('ul ')。html(' img src=' Images/loading . gif ' alt=' '/')。load('www.manyiaby.com ',function(){

});

});

});

2.使用getJSON()方法,可以通过Ajax异步请求获取服务器中的数据,解析获取的数据并显示在页面上。它的调用格式是jquery.getjson (URL,[data],[callback])或者$。getjson (URL,[data],[callback])其中,URL参数是请求加载json格式文件的服务器的地址,可选data参数是请求时发送的数据,callback参数是数据请求成功后执行的回调函数。

$(function(){

$('#btn ')。单击(函数(){

$.getJson('www.manyiaby.com ',function(data){

$.每个(数据,功能(索引,运动){

if(index==3)

alert(sport[' name ']);

})

});

});

});

3.使用getScript()方法在服务器中异步请求和执行JavaScript格式文件。它的调用格式如下:jQuery.getScript (url,[callback])或$。getScript(url,[callback])参数url是服务器请求地址,可选的callback参数是请求成功后执行的回调函数。

$(function(){

$('#btn ')。单击(函数(){

$.getScript('www.manyiaby.com ',function(){

警报(“操作完成”);

});

});

});

4.使用get()方法时,GET从服务器请求数据,请求的数据由方法中回调函数的参数返回。其调用格式如下:$。get(url,[callback])参数url是服务器的请求地址,可选的callback参数是请求成功后执行的回调函数。

$(function(){

$('#btn ')。单击(函数(){

$.get('www.manyiaby.com ',函数(数据){

alert(data . name);

}、' JSON ');

});

});

5.与get()方法相比,post()方法多用于通过POST向服务器发送数据。服务器收到数据后,会对其进行处理,并将处理结果返回给页面。调用格式如下:$。post(url,[数据],[回调])参数url是服务器的请求地址,可选数据是请求服务器时发送的数据,可选回调参数是请求成功后执行的回调。

$(function(){

$('#btn ')。单击(函数(){

$.post ('www.manyiaby.com ',{name:' Manyi.com ',URL:' www.manyiaby.com'},function (data) {

警报(数据);

});

});

});

6.使用serialize()方法,可以用表单中的name属性序列化元素值,并生成标准的URL编码的文本字符串,该字符串可以直接用于ajax请求。它的调用格式如下:$(选择器)。serialize(),其中选择器参数是一个或多个表单中的元素或表单元素本身。

$(function(){

$('#btn ')。单击(函数(){

alert($('form ')。serialize());

});

});

7.使用ajax()方法是请求服务器数据的最低级也是最强大的方法。它不仅可以获取服务器返回的数据,还可以向服务器发送请求并传递数值。其调用格式如下:jQuery.ajax([settings])或$。ajax([settings])其中参数设置是发送ajax请求时的配置对象,在这个对象中,url代表服务器请求的路径,data是请求过程中传递的数据,dataType是服务器返回的数据类型,success是请求成功执行的回调函数,Type是发送数据请求的方式。默认值是get。

$(function(){

$('#btn ')。单击(函数(){

$.ajax({

网址:' www . many aby . com ',

数据类型:“文本”,

数据:{name:' Manyi.com ',url:'wwww.manyiaby.com'},

成功:函数(数据){

警报(数据);

}

});

});

});

8.可以使用ajaxSetup()方法设置Ajax请求的一些全局选项值。设置之后,下面的Ajax请求将不需要添加这些选项值。它的调用格式是jQuery.ajaxSetup([options])或$。Ajax setup([选项])。option参数是一个对象,通过它可以设置Ajax请求的全局选项值。

$(function () {

$.ajaxSetup({

数据类型:“文本”,

成功:函数(数据){

警报(数据);

}

});

$('#btn ')。bind('click ',function () {

$.ajax({

数据:{name:' Manyi.com ',url: 'www.manyiaby.com'},

网址:“www . many aby . com”

});

})

});

});

9.ajaxStart()和ajaxStop()方法绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式是:$(选择器)。ajaxStart(function())和$(选择器)。ajaxStop(function()),其中两个方法中的括号都是绑定函数。AjaxStart()方法绑定的函数在发送AJAX请求前执行,ajaxStop()方法绑定的函数在请求成功后执行。

$(function () {

$.ajaxStart(function (){

警报('请求数据.');

});

$.ajaxStop(function (){

警报(“数据请求已完成!”);

});

$('#btn ')。bind('click ',function () {

$.ajax({

网址:' www . many aby . com ',

数据类型:' json ',

成功:函数(数据){

Alert ('name:' data.name ')。

}

});

})

});

10.定义一个json对象,用来保存学生的相关资料。通过美元。each()工具函数,获取数组中每个元素的名称和内容并显示在页面上。

!文档类型html

超文本标记语言

meta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8' /

script src=' http://libs . Baidu . com/jquery/1 . 9 . 0/jquery . js ' type=' text/JavaScript '/script

练习/标题

/头

身体

按钮/按钮

脚本类型='文本/javascript '

$(function () {

$('button ')。bind('click ',function () {

Var jsonDate=[{name:' Manyi.com ',URL:' www . manyi aby . com ' }];

$.each(jsonDate,function(index,data){

alert(data . name);

});

})

});

/脚本

/body

/html

这就是本文的全部内容。希望这篇文章的内容能给你的学习或者工作带来一些帮助,同时也希望你能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • web设置session超时时间,ajax解决session超时
  • ajax经典教程,ajax用法示例
  • ajax经典教程,ajax用法示例,Ajax教程实例详解
  • ajax是一种支持异步请求的技术,ajax异步操作
  • ajax是一种支持异步请求的技术,ajax异步操作,Ajax异步请求的五个步骤及实战案例
  • ajax技术框架及开发工具设计,ajax技术框架及开发工具怎么用
  • ajax技术框架及开发工具设计,ajax技术框架及开发工具怎么用,AJAX技术框架及开发工具
  • ajax同步请求,ajax异步传输,ajax异步请求详解
  • ajax传递文件,ajax传递文件,使用AJAX实现上传文件
  • ajax 跨域请求,ajax跨域请求解决方案
  • ajax 跨域请求,ajax跨域请求解决方案,AJAX请求数据及实现跨域的三种方法详解
  • ajax 方法,ajax笔记
  • ajax 方法,ajax笔记,$.ajax()常用方法详解(推荐)
  • ajax 传文件,ajax传递文件
  • ,,用AJAX技术实现在自己Blog上聚合并显示朋友Blog的最新文章
  • 留言与评论(共有 条评论)
       
    验证码: