ajax(通过jQuery实现)
使用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实现)的更多相关文章
- AJAX和jQuery Ajax总结
AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...
- JavaScript、Ajax与jQuery的关系
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
- MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查
MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的: 1.MVC3项目简单配置EF code first生成并初始化数据 ...
- 第四章 Ajax与jQuery
第四章 Ajax与jQuery 一.Ajax简介 在传统的Web应用中,每次请求服务器都会生成新的页面,用户在提交请求后,总是要等待服务器的响应.如果前一个请求没有响应,则后一个请求就不能发送,在 ...
- Ajax 与 jquery
jquery 里面的ajax用法: $.ajax({ 参数设置: 如果返回数据不是json的时候,记得转化为json . var data = json.parse(data); json 可以直接点 ...
- 框架----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_ ...
- AJAX,jQuery Ajax和Deferred
AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...
- ajax的jquery写法和原生写法
一.ajax的简介 Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指: ...
- Ajax json jquery实现菜单案例
需求: 运用AJAX请求文件menu.json,配置菜单栏,并实现以下功能点: 1. 点击向左箭头,菜单向左移动,隐藏 2. 点击向右箭头,菜单向右移动,显示3. 点击一级菜单,被点击菜单的子菜单显示 ...
- JavaScript、Ajax与jQuery的关系 分类: C1_HTML/JS/JQUERY 2014-07-31 10:15 3388人阅读 评论(0) 收藏
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
随机推荐
- SharePoint 2013 必备组件之 Windows Server AppFabric 安装错误
1.如下图,在使用SharePoint2013产品准备工具的时候,网上下载安装Windows Server AppFabric的时候,报错,点击完成重启计算机,重新安装依然报错. 2.无奈之下,只有选 ...
- Android Fragment使用(一) 基础篇 温故知新
Fragment使用的基本知识点总结, 包括Fragment的添加, 参数传递和通信, 生命周期和各种操作. Fragment使用基础 Fragment添加 方法一: 布局里的标签 标识符: tag, ...
- iOS程序破解——ARM汇编基础
原文在此:http://www.cnblogs.com/mddblog/p/4951650.html 一.Thumb指令与ARM指令 Thumb指令为16位,因此存储代码的密度高,节省存储空间.但是功 ...
- UIWebView保存网页中的图片(转载)
现在H5混合原生开发的方式越来越流行,也就要用到UIWebView控件.在开发过程中,我们可能会遇到一个需求,要求我们保存网页上的图片,当用户点击图片的时候,就可以让用户选择是否下载图片. 在系统自带 ...
- Java中的阻塞队列
1. 什么是阻塞队列? 阻塞队列(BlockingQueue)是一个支持两个附加操作的队列.这两个附加的操作是:在队列为空时,获取元素的线程会等待队列变为非空.当队列满时,存储元素的线程会等待队列可用 ...
- Solr部分更新MultiValued的Date日期字段时报错及解决方案
问题描述如标题. 异常信息如下: Result Caused by: org.apache.solr.common.SolrException: Invalid Date String:'Mon Se ...
- java list排序
1.简介 这个和数组的排序又不一样了. 其实Java针对数组和List的排序都有实现,对数组而言,你可以直接使用Arrays.sort,对于List和Vector而言,你可以使用Collections ...
- linux(64位的系统)下nasm进行汇编链接时出现的问题
出现问题: $nasm -f elf hello.asm -o hello.o $ld -s hello.o -o hello ld: i386 architecture of input file ...
- mysql高可用架构之mysql-mmm配置详解
实验系统:CentOS 6.6_x86_64 实验前提:防火墙和selinux都关闭 实验说明:本实验共有5台主机,IP分配如拓扑 实验软件:mariadb-10.0.20 mysql-mmm-2.2 ...
- 【2016-10-16】【坚持学习】【Day7】【建造者模式】
建造者模式: 一个复杂的对象由多个分部件组成.一个复杂对象 class Product { private string partA; //定义部件,部件可以是任意类型,包括值类型和引用类型 priv ...