使用jQuery实现ajax相对来说方便一点,看w3cschool有几种实现的方法,我就总结一下自己以后会用到的几种方法

$.ajax方法:

$.ajax方法里面有很多个参数可以使用,但我这里就写自己常用的几个参数:

1.url:

要求为String类型的参数,(默认为当前页地址)发送请求的地址。

2.timeout:

要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。

3.data:

发送服务器附加的请求数据,get请求中将这些请求附加到url后面,对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

4.dataType:

指定返回数据类型,可用xml,html,script,json,jsonp,text;

5.success:

要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
 function(data, textStatus){
       //data可能是xmlDoc、jsonObj、html、text等等
       this;  //调用本次ajax请求时传递的options参数
}

6.error

要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

这里写一个实例

$(document).ready(function(){
$.ajax({
url:'test_server.php',
data:{mes:$('#sb').val()},
type:'POST',
dataType:'json',
success:function(data){
$.each(data,function(key,value){
alert(value);
});
}
});
});

其实jQuery还封装了很多ajax的方法,我还用过$.get,$.post,比$.ajax更简单,但可选参数变少了,w3cschool已经写得很好了。贴个参数。。

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
参数 描述
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType

可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script 或 html)。

我就自己贴两个例子

 $(document).ready(function(){
$('#sb').keyup(function(){
$.get('test_server.php',{mes:$('#sb').val()},function(data){
$('#sbb').val(data);
});
});
}); $(document).ready(function(){
$('#sb').keyup(function(){
$.post('test_server.php',{mes:$('#sb').val()},function(data){
$('#sbb').val(data);
});
});
});

ajax(通过jQuery实现)的更多相关文章

  1. AJAX和jQuery Ajax总结

    AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...

  2. JavaScript、Ajax与jQuery的关系

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

  3. MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查

    MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的:   1.MVC3项目简单配置EF code first生成并初始化数据 ...

  4. 第四章 Ajax与jQuery

    第四章   Ajax与jQuery 一.Ajax简介 在传统的Web应用中,每次请求服务器都会生成新的页面,用户在提交请求后,总是要等待服务器的响应.如果前一个请求没有响应,则后一个请求就不能发送,在 ...

  5. Ajax 与 jquery

    jquery 里面的ajax用法: $.ajax({ 参数设置: 如果返回数据不是json的时候,记得转化为json . var data = json.parse(data); json 可以直接点 ...

  6. 框架----Django之Ajax全套实例(原生AJAX,jQuery Ajax,“伪”AJAX,JSONP,CORS)

    一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

  7. AJAX,jQuery Ajax和Deferred

    AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...

  8. ajax的jquery写法和原生写法

    一.ajax的简介 Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指: ...

  9. Ajax json jquery实现菜单案例

    需求: 运用AJAX请求文件menu.json,配置菜单栏,并实现以下功能点: 1. 点击向左箭头,菜单向左移动,隐藏 2. 点击向右箭头,菜单向右移动,显示3. 点击一级菜单,被点击菜单的子菜单显示 ...

  10. JavaScript、Ajax与jQuery的关系 分类: C1_HTML/JS/JQUERY 2014-07-31 10:15 3388人阅读 评论(0) 收藏

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

随机推荐

  1. Android http Request / Response ContentType

    客户端在进行http请求服务器的时候,需要告诉服务器请求的类型,服务器在返回给客户端的数据的时候,也需要告诉客户端返回数据的类型. 这个类型就是  ContentType  ,不同的ContentTy ...

  2. Android UI ListView的使用

    一.ListView的理解  1.什么ListView?   一种用来显示多个可滑动项(Item)列表的的ViewGroup 需要使用Adapter将集合数据和每一个Item所对应的布局动态适配到Li ...

  3. iOS--UICollectionView(滚动视图)入门

     UICollectionView @interface UICollectionView : UIScrollView   UICollectionView 和UICollectionViewCon ...

  4. 页面之间传值方式的总结,五种方式,通知,block,代理,单例,NSUERDEFALUT,

    首先代码拿上 1:单例 2:通知 3:代理 4:block方法 5:NSUSERDEFAULT(沙盒文件) 先是单例类: .h文件 @interface DataSource : NSObject @ ...

  5. MS SQL 错误:无法绑定由多个部分组成的标识符 "xxxxx"

    今天有个同事问我一个SQL问题,觉得有点意思,虽然能很快定位并解决问题,但是就是有种说不清道不明的感觉.因为不能解释清楚(很多是建立在假设上),顺便记录一下,希望有清楚原理的人能解答一二. 原SQL语 ...

  6. 在cmd和terminal怎么粘贴?

    在osx, linux的terminal 以及windows的 cmd实现粘贴是coder经常要做的事,鼠标右键,下拉菜单中单击粘贴paste.但是这显得笨拙,及其不快捷.但是正常使用的command ...

  7. YARN与MRv1的对比

    YARN与MRv1的对比 转载请注明出处:http://www.cnblogs.com/BYRans/ Hadoop 1.0存在的问题 由于Hadoop 1.0的良好特性,Hadoop 1.0被应用到 ...

  8. 2-2 Linux 根文件系统详解

    根据马哥Linux初级视频2-3 1. 根文件下的一级目录 #ls / 1. / boot 系统启动相关的文件.如内核.initrd   (initialization run directory) ...

  9. WPF DEV控件-ChartControl用法

    WPF常用的第三方控件集,DevExpress 下面介绍如何生成Chart界面: <dxc:ChartControl AnimationMode="OnDataChanged" ...

  10. WPF 自定义绕圈进度条

    在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码: 1.控件界面 <UserControl x:Class="ProgressBarControl&quo ...