Ajax简单实用举例

最新推荐文章于 2021-11-01 16:00:32 发布

南昌瓦罐汤

最新推荐文章于 2021-11-01 16:00:32 发布

阅读量117

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42756994/article/details/104759082

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>

<script type="text/javascript">

function fn1(){

//get异步访问

$.get(

"/WEB22/ajaxServlet2", //url地址

{"name":"张三","age":25}, //请求参数

function(data){ //执行成功后的回调函数

//{\"name\":\"tom\",\"age\":21}

alert(data.name);

},

"json"

);

}

function fn2(){

//post异步访问

$.post(

"/WEB22/ajaxServlet2", //url地址

{"name":"李四","age":25}, //请求参数

function(data){ //执行成功后的回调函数

alert(data.name);

},

"json"

);

}

function fn3(){

$.ajax({

url:"/WEB22/ajaxServlet2",//跳转的地址

async:true, //true时，为异步，false为同步

type:"POST",//提交的方式

data:{"name":"lucy","age":18},//提交的数据

success:function(data){//成功返回后执行的人函数

alert(data.name);

},

error:function(){//失败时执行的函数

alert("请求失败");

},

dataType:"json"//返回值的类型

});

}

</script>

</head>

<body>

<input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>

<br>

<input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>

<br>

<input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span>

<br>

</body>

</html>

总结：

1.写jq语句自然想要导入包，$.get()/$.post()/$.ajax({}) 每个单元用逗号隔开，最后都要加上一个分号作为结束符号

3.placeholder="请输入用户名"

4..在前台写完json与ajax都不用包用到json工具的时候才需要导