温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript中ajax的实例用法

发布时间:2021-09-03 12:52:50 来源:亿速云 阅读:187 作者:chen 栏目:开发技术

这篇文章主要讲解了“JavaScript中ajax的实例用法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中ajax的实例用法”吧!

(1)$.load(url,[data],[callback])

作用:加载指定的资源写入当前页面

例子

$(function() {
	$("body #d1").load("2.html");
	alert($("现在html").html());
	$("#b1").click(function() {
		alert($("html").html());
	});
});<strong>
</strong>

html:

1.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/demo1.js"></script>
</head>
<body>
1111111111
<div id="d1"></div>
<input id="b1" type="button" value="点击">
</body>
</html>

2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
22222
</body>
</html>

$.get(url,[data],[callback])

作用:向服务器发送get请求:

$("button").click(function(){
  $.get("demo_ajax_load.txt", function(result){
    $("div").html(result);
  });
});

$.post(url,[data],[callback])

作用:同上

$.getJSON(url,[data],[callback])

作用:同上,只不过载入的数据要是json数据

$.getJSON("test.js",  function(json){
  alert("JSON Data: " + json.users[3].name);
});

$.getScript(url,[callback])

       作用:从指定的url载入js数据,并执行

例子(来自w3school)

$.Ajax(options):

参数详解:

async://Boolean类型 此键值对默认情况下为true,也就是异步请求(局部刷新);如果设置为false,将会变成同步请求,那么此时将会锁住浏览器,用户无法对其进行其他操作,必须等待请求完毕后才会解锁。



global (Boolean类型) //表示是否触发全局,默认为触发(true),Ajax的全局设置将在后面的章节讲,设置全局则表示所有的Ajax将能够使用此全局内容,比如所有的Ajax事件都触发同一个路径。



type (String) : //(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。



cache:(Boolean类型) //设置false将不会从浏览器缓存中加载信息,用于jQuery1.2或更高的版本。



contentType:(String类型) //用于设置编码格式,默认为: "application/x-www-form-urlencoded")格式,一般推荐此格式。



ifModified (Boolean) : //(默认: false) 仅在服务器数据改变时获取新数据。



processData (Boolean) : // (默认: true) 默认情况下,发送的数据将被转换为对象。



timeout (Number) ://设置置请求超时时间(毫秒)。此设置为全局设置。



dataType:(String类型) //用于设置服务器返回的数据类型,但填写的内容也是有限制的,可用值如下
                 ┠xml //设置此值服务器端将XML文档,如果大家对Ajax比较了解,我想大家也知道Ajax中的x代表是什么了吧?因此叫做A(Asynchronous)j(javascript)a(and)x(xml)
                 ┠html //服务器返回HTML格式文档,(根据个人理解,如果按照遭上面的理解xml表示x的话,那么此类型不就表示ajah了嘛)。
                 ┠script //服务器返回【纯文本】的脚本,不会执行或进行计算。
                 ┠json //返回Json格式的文档
                 ┠text //返回纯文本
                 ┗jsonp //JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问,比如用户想得到["kwoojan","KwooShung"],如果设置了jsonp那么服务器将返回callbackFunction(["kwoojan","KwooShung"])



data(String类型) //此方法至关重要,主要用于将数据发送至服务器。格式为键值对,如userName=CSS学习网&Address=http://www.cssxuexi.cn/ 那么服务器接受到的userName相对应的值就是CSS学习网



url (String) :// (默认: 当前页地址) 发送请求的地址,也就是你的data数据需要被处理的地址。



beforeSend(function) //此键值为函数方法,当你发送请求之前调用此方法。例如当用户进行了某个操作,这时页面上显示出“正在加载中,请稍后”等类似的字样,多数情况下此键值对用于给予用户友好的提示。



success (Function) //当Ajax请求成功时,调用此方法,一般用于解析服务器所返回的数据。



error (Function) //求失败时调用此方法。



complete (Function) //当Ajax请求完毕的时候调用此方法

在配上一个具体的例子:

function reg()//注册
{
	$.ajax
	({
		type: "POST",
		cache:false,
		url: "servlet/UserServer",
		dataType:"json",
		data: "class=reg&userName="+ $("#userName").val() +"&userPwd="+ $("#userPwd").val(),
		success: function(data)
		{
			alert(data.info);
		},
		error:function()
		{
        	alert("访问数据失败!");
		}
	});
}

感谢各位的阅读,以上就是“JavaScript中ajax的实例用法”的内容了,经过本文的学习后,相信大家对JavaScript中ajax的实例用法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI