在本文中,您将会了解到关于jQueryAjax实例代码($.ajax、$.post、$.get)的新资讯,并给出一些关于$.Ajax、$.Get、$.Post代码实例参数解析、Ajax-异步请求-jq
在本文中,您将会了解到关于jQuery Ajax 实例代码 ($.ajax、$.post、$.get)的新资讯,并给出一些关于$.Ajax、$.Get、$.Post代码实例参数解析、Ajax -异步请求 -jquery中ajax分类 -第一层 $.ajax -第二层($.get /$.post) -第三层($.getJson/$.getScript) -相应演示、ajax 传值 ajax、post、get、Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax的实用技巧。
本文目录一览:- jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
- $.Ajax、$.Get、$.Post代码实例参数解析
- Ajax -异步请求 -jquery中ajax分类 -第一层 $.ajax -第二层($.get /$.post) -第三层($.getJson/$.getScript) -相应演示
- ajax 传值 ajax、post、get
- Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()
一、$.ajax的一般格式
type: 'POST',url: url,data: data,success: success,dataType: dataType
});
二、$.ajax的参数描述
参数 描述
默认执行智能判断(xml、json、script 或 html)。
上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit
//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){
var formParam = $("#form1").serialize();//序列化表格内容为字符串
$.ajax({
type:'post',url:'Notice_noTipsNotice',data:formParam,success:function(data){
}
});
}
//3.$.ajax拼接url的异步请求
var yz=$.ajax({
type:'post',url:'validatePwd2_checkPwd2?password2='+password2,data:{},success:function(data){
if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间
{
textPassword2.html("业务密码不正确!");
$("#validatePassword2").val("pwd2Error");
checkPassword2 = false;
return;
}
},error:function(){}
});
//4.$.ajax拼接data的异步请求
$.ajax({
url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',data:'merName='+values,async : false,//默认为true 异步
error:function(){
alert('error');
},success:function(data){
$("#"+divs).html(data);
}
});
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和
delete也可以使用,但仅部分浏览器支持。
timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设
置。
async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等
待请求完成才可以执行。
cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。
设置为false将不会从浏览器缓存中加载请求信息。
data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格
式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格
式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同
值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据Http包mime
信息返回responseXML或responseText,并作为回调函数参数传递。
可用的类型如下:
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求
时(不在同一个域下),所有post请求都将转为get请求。
json:返回JSON数据。
jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个
“?”为正确的函数名,以执行回调函数。
text:返回纯文本字符串。
beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义
HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参
数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。
参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest,textStatus){
this; //调用本次ajax请求时传递的options参数
}
success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data,textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错
误信息、捕获的错误对象(可选)。
ajax事件函数如下:
function(XMLHttpRequest,errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认
为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
dataFilter:要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。
提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的
dataType参数。函数返回的值将由jQuery进一步处理。
function(data,type){
//返回处理后的数据
return data;
}
global:要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局
ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
ifModified:要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。
服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。
jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。
该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如
{jsonp:'onjsonPLoad'}会导致将"onjsonPLoad=?"传给服务器。
username:要求为String类型的参数,用于响应HTTP访问认证请求的用户名。
password:要求为String类型的参数,用于响应HTTP访问认证请求的密码。
processData:要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度
来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM
树信息或者其他不希望转换的信息,请设置为false。
scriptCharset:要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时
才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
案例代码:
$('#send').click(function(){
$.ajax({
type: "GET", url: "test.json", data: {username:$("#username").val(),content:$("#content").val()}, dataType: "json", success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data,function(commentIndex,comment){
html += '' + comment['username']+ ':+ '';
});
$('#resText').html(html);
}
});
});
});
顺便说一下$.each()函数:
$.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。
以上这篇jQuery Ajax 实例代码 ($.ajax、$.post、$.get)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小编。
总结
以上是小编为你收集整理的jQuery Ajax 实例代码 ($.ajax、$.post、$.get)全部内容。
如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。
Ajax相关文章
- • 学会iframe并用其解决跨域问题
- • 【Ajax】全面详细了解git的基础操作【万
- • 什么是Ajax?
- • 基于Vue、Axios、Node.js的图书管理系统
- • Ajax简介与基本使用
- • b站黑马JavaScript的Ajax案例代码——聊
- • Ajax(实现前后端交互效果)
- • Filter&Listener&Ajax的介绍
- • 第一节:ExtJS调用WCF系列-----实现JSO
- • Asp.Net开发架构设计(二)
$.Ajax、$.Get、$.Post代码实例参数解析
【本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究。若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!】
$.ajax
语法:
$.ajax({name:value, name:value, ... })
示例:
$.ajax({
url: "/testJson",
type: "post",
async: false, //布尔值,表示请求是否异步处理。默认是 true。
data: JSON.stringify({username: username, password: password}), //data表示发送的数据
contentType: "application/json;charset=UTF-8", //定义发送请求的数据格式为JSON字符串
dataType: "json", //定义回调响应的数据格式为JSON字符串,该属性可以省略
success: function (result,status,xhr) { //成功响应的结果
if (result != null) {
alert(result);
}
},
error: function (xhr,status,error) {
}
});
下面的表格中列出了可能的名称/值:
名称 | 值/描述 |
---|---|
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。 |
context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
data | 规定要发送到服务器的数据。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。 可能的类型: "xml" - 一个 XML 文档 "html" - HTML 作为纯文本 "text" - 纯文本字符串 "script" - 以 JavaScript 运行响应,并以纯文本返回 "json" - 以 JSON 运行响应,并以 JavaScript 对象返回 "jsonp" - 使用 JSONP 加载一个 JSON 块,将添加一个 "?callback=?" 到 URL 来规定回调 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
scriptCharset | 规定请求的字符集。 |
success(result,status,xhr) | 当请求成功时运行的函数。 result - 包含来自请求的结果数据 status - 包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror") xhr - 包含 XMLHttpRequest 对象 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
$.get
【本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究。若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!】
语法:
$.get(URL,callback);
实例:
$.get("/try/ajax/demo_test.php",function(data,status){
alert(status);
});
$.post
语法:
$.post(*URL,data,callback*);
示例:
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
}
);
版权声明
【本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究。若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!】
Ajax -异步请求 -jquery中ajax分类 -第一层 $.ajax -第二层($.get /$.post) -第三层($.getJson/$.getScript) -相应演示
Ajax
1.标准请求响应时浏览器的动作(同步操作)
1.1浏览器请求什么资源,跟随显示什么资源
2.ajax:异步请求.
2.1局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内容.
3.ajax 由javascript 推出的.
3.1由jquery 对js 中ajax 代码进行的封装,达到使用方便的效果.
4.jquery 中ajax 分类
4.1第一层 $.ajax({ 属性名:值,属性名:值})
4.1.1是jquery 中功能最全的.代码写起来相对最麻烦的.
4.1.2示例代码
/*
url: 请求服务器地址
data:请求参数
dataType:服务器返回数据类型error 请求出错执行的功能
success 请求成功执行的功能,function(data) data 服务器返
回的数据.
type:请求方式
*/
$("a").click(function(){
$.ajax({
url:''demo'', //请求服务器地址
data:{"name":"张三"}, //服务器返回数据的类型
dataType:''html'', //预期服务器返回的数据类型:xml/html/script/jsons
error:function () { //请求出错时执行的功能
alert("请求出错! ");
},
success:function (data) { //请求成功时需要执行的功能,data表示服务器返回的数据
alert("请求成功! ")
},
type:''post'' //表示请求方式
});
});
return false;
})
4.2第二层(简化$.ajax)
4.2.1$.get(url,data,success,dataType)) :
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
4.2.2$.post(url,data,success,dataType)
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。
4.3第三层(简化$.get())
4.3.1$.getJSON(url,data,success). 相 当 于 设 置 $.get 中 dataType=”json”
4.3.2$.getScript(url,data,success) 相 当 于 设 置 $.get 中dataType=”script”
5.如果服务器返回数据是从表中取出.为了方便客户端操作返回的数据,服务器端返回的数据设置成 json
5.1客户端把json 当作对象或数组操作.
6.json: 是一种数据格式.
6.1JsonObject : json 对象,理解成java 中对象
6.1.1{“key”:value,”key”:value}
6.2JsonArray:json 数组 ,每个元素都是json对象;
6.2.1[ {“key”:value,”key”:value},{} ]
Jsp+JQuery演示 第二层 $.post()
- JSp/JQuery代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function () { $("a").click(function () { $.post("demo",{"name":''张三''},function (data) { alert(data); }); return false; }) }); </script> <html> <head> <title>$Title$</title> </head> <body> <a href="demo">跳转</a> </body> </html>
-
DemoServlet 代码
import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter;
@WebServlet("/demo")
public class DemoServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("执行demo控制器............");
String name=req.getParameter("name"); //获取 $.post中的data
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
out.write("服务器返回的内容");
out.println("name:"+name);
out.flush();
out.close();
}
}
Jsp+JQuery演示 第三层 $.getJson()
见下篇
ajax 传值 ajax、post、get
这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。
$.ajax({
url: 'consignAction.jsp',
type: 'POST',
da
dataType: 'text',
error: function(){
alert('操作错误,请与系统管理员联系!');
},
success: function(da
if($.trim(da
alert("解除委托成功");
}
}
});
$.post('.url?action=getTransferInTicketDetail',
{ from_no: rowData.FROM_NO,to_no: rowData.TO_NO },function (data) {
},'json');
$.get('url?action=getTransferInTicketDetail',function (data) {
},'json');
Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax
今天关于jQuery Ajax 实例代码 ($.ajax、$.post、$.get)的讲解已经结束,谢谢您的阅读,如果想了解更多关于$.Ajax、$.Get、$.Post代码实例参数解析、Ajax -异步请求 -jquery中ajax分类 -第一层 $.ajax -第二层($.get /$.post) -第三层($.getJson/$.getScript) -相应演示、ajax 传值 ajax、post、get、Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax的相关知识,请在本站搜索。
本文标签: