您的位置：首页 > Web前端 > JQuery

Jquery使用Ajax请求调用后台

2016-05-07 13:20 796 查看

很多时候我们都需要Ajax来请求返回数据，这样能提升效率。但是直接的使用Ajax要写很多的东西，很麻烦，所以Jquery帮我们做了个封装。

这个技术我感觉很重要，而且经常忘了怎么写，还是太菜，所以做一个笔记，遗忘了的时候可以看一看。

先先看Controller层

private void post(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String id=request.getParameter("id");
System.out.println("id:"+id);
PrintWriter out=response.getWriter();
out.println("{name:'张三',age:14}");
out.flush();
out.close();
}

我们为后台准备了一组数据 name：张三 age：14 。一般情况下我们都要是以JSON的格式返回给前台。

然后看一下前台界面

一个简单的数据框。用来显示我们后台接收过来的数据。

然后是代码部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b2").click(function(){
$.post("/HeadFirstJquery/ajax?action=post",{id:1},function(data,textStatus){
alert("请求状态："+textStatus);
alert("返回数据："+data);
data=eval("("+data+")");
$("#name").val(data.name);
$("#age").val(data.age);
});
});
});
</script>
</head>
<body>

<input id="b2" type="button" value="Post/Get加载"/><br/>
姓名：<input type="text" id="name"/><br/>
年龄：<input type="text" id="age"/>

</body>
</html>

$(document).ready(function() //这个的意思是当访问这个意思的这个界面的时候就启动。

语法：

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

开始执行，前台返回success

前台返回的JSON数据

最后一步成功写入

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航