jQuery+json实现的简易Ajax调用实例
更新时间：2015年12月14日 16:06:14 作者：一生悬命
这篇文章主要介绍了jQuery+json实现的简易Ajax调用,结合实例形式分析了jQuery基于ajax实现json传参调用的技巧,需要的朋友可以参考下
本文实例讲述了jQuery+json实现的简易Ajax调用。分享给大家供大家参考，具体如下：
Userservlet.java代码：
package com.iss.servlet;
import org.json.JSONException;
import org.json.JSONObject;
import com.iss.pojo.User;
import com.iss.util.JSONUtil;
public class UserServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//list 添加对象
List<User> userList = new ArrayList<User>();
User user1 = new User("张三", "男", "18");
User user2 = new User("李四", "男", "19");
User user3 = new User("王五", "男", "20");
userList.add(user1);
userList.add(user2);
userList.add(user3);
PrintWriter out = response.getWriter();
String str = null;
try {
//帐号密码如果匹配则把list 返回给界面
if (request.getParameter("userName").equals("jquery")
&& request.getParameter("password").equals("ajax")) {
str = JSONObject.quote(JSONUtil.toJSONString(userList));
}
out.print(str);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println("str "+str);
out.flush();
out.close();
}
}
Html代码：
<body>
帐号 jquery 密码 ajax
<form id="mainform">
<ul>
<li>
帐号
<input type="text" name="userName" />
</li>
<li>
密码
<input type="password" name="password" />
</li>
<li>
<input onclick="login()" type="button" value="登录" />
</li>
</ul>
</form>
查询到的数据
<div id="diva">
</div>
<script type="text/javascript">
function login(){
//获取form的参数
var args =$("#mainform").serialize();
//调用 jquery 的json获取方法
//三个参数分别为 ：请求路径 ，请求参数，返回数据的回调函数
$.getJSON("servlet/UserServlet",args,function (data){
if(data!=null){
// 界面返回的是一个json格式字符串 调用JSON.parse()把数据转化为json
// 格式的对象
var jsondata =JSON.parse(data);
parseData(jsondata);
}else{
alert("帐号密码输入有误");
}
})
}
function parseData(data){
var str="";
//遍历json格式数据
for (var key in data){
strstr =str+" 用户"+data[key].userName+" 年龄"+data[key].age+"<br/>"
alert(str);
}
//把数据添加到div中
$("#diva").html(str);
}
</script>
</body>
UserServlet 记得要导入 工具类 JSONStringObject JSONUtil
jsp 要导入 jquery.js和 json.js
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
JQuery是一个很NB的js集成作品，以其简洁的语法和跨平台兼容性的优势，这里给大家介绍下JQuery中的选择器，不理解选择器或者用不好选择器，是不可能有一手很NB的JQuery技能的2014-04-04
基于jQuery实现的当离开页面时出现提示的实现代码，需要的朋友可以参考下。2011-06-06
本文对jQuery的Cookie插件的使用方法和具体实例进行系统介绍,有需要的朋友可以看下2016-11-11
这篇文章主要介绍了jQuery中replaceWith()方法用法,以实例形式分析了replaceWith()方法用于匹配元素替换的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了Jquery焦点与失去焦点示例应用,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了jQuery实现指定区域外单击关闭指定层的方法,可实现在弹出层外任意位置点击关闭弹出层的功能,涉及jQuery事件操作方法,包含了详尽的代码功能说明,非常简单实用,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了EasyUI的TreeGrid的过滤功能的解决思路,需要的朋友可以参考下2017-08-08
本文主要实例浅析jQuery操作select控件取值和设值。有需要的朋友可以看下，希望会对大家有所帮助2016-12-12
这款弹出框插件是本人自己模仿IOS原生弹出框写的一个自定义插件，包括Alert弹出框和Confirm确认框，支持标题，内容，按钮文字以及按钮回调函数自定义，使用非常简单，本文给大家介绍了jQuery仿IOS弹出框插件,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了jQuery中nextUntil()方法用法,实例分析了nextUntil()方法的功能、定义及匹配同辈元素的技巧与注意事项,需要的朋友可以参考下2015-01-01
最新评论