jQuery+json实现的简易Ajax调用实例
本文实例讲述了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程序设计有所帮助。
-
本文向大家介绍JSP+jquery使用ajax方式调用json的实现方法，包括了JSP+jquery使用ajax方式调用json的实现方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JSP+jquery使用ajax方式调用json的实现方法。分享给大家供大家参考，具体如下： 前台： 后台： test.jsp： 注意：返回json格式 如{"result":0} 需要设置 ： 希望本文所
-
jQuery 是一个小型的 JavaScript 库，它通常被用来简化 DOM 和 JavaScript 操作。通过在服务器和客户端之间交换 JSON 数据是使得 Web 应用动态化的完美方式。 JSON 本身是一个很清量级的数据传输格式，非常近似于 Python 的原始数据类型 (数字、字符串、字典和链表等)，这一数据格式被广泛支持，而且非常容易解析。 它几年前开始流行，然后迅速取代了 XML
-
本文向大家介绍js结合json实现ajax简单实例，包括了js结合json实现ajax简单实例的使用技巧和注意事项，需要的朋友参考一下 前期准备 1、安装wampserver或者其他相似软件来搭建本地集成安装环境，我安装的是phpstudy 2、html、js、css等文件需要放置在PHPstudy中的WWW目录中，默认运行index页面 3、bootstrap.css 界面截图： phpstud
-
问题内容： 我有一个从链接启动的Bootstrap模式。在AJAX查询从数据库中获取数据的同时，它只停留在空白处约3秒钟。如何实现某种负载指示器？默认情况下，twitter引导程序是否提供此功能？ 编辑：模态的JS代码 问题答案： 我猜您正在使用jQuery.get或其他jQuery ajax函数来加载模态。您可以在ajax调用之前显示指示器，并在ajax完成后将其隐藏。就像是
-
本文向大家介绍js实现简单实用的AJAX完整实例，包括了js实现简单实用的AJAX完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现简单实用的AJAX的方法。分享给大家供大家参考，具体如下： 更多关于ajax相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》及《jquery中Ajax用法总结》 希望本文所述对大家ajax程序设计有所帮助。
-
本文向大家介绍jQuery ajax调用WCF服务实例，包括了jQuery ajax调用WCF服务实例的使用技巧和注意事项，需要的朋友参考一下 恩，在由瘦客户端转换成胖浏览器端的“潮流”下，必然要使用JavaScript调用后台的各种服务。 屌丝所维护的产品通信都是使用的WCF服务，因此必然要学习这样的内容。借用jQuery强大的库，使用JavaScript访问WCF服务非常简便。同事研究了一个b