jquery中ajax的使用(java)
AJAX方式
js:界面
var prjContextPath='<%=request.getContextPath()%>';
$(document).ready(function(){
//===============GET==============================
$("#username").blur(function(){
$.ajax({
type: "GET",
url: prjContextPath + "/zhuceAction!queryUserName.action?username=" + $("#username").val()+"&pwd="+$("#pwd").val(),
dataType: "json",
success: function(data) {
if (data.success) {
$("#usernamemsg").html("<font color='green'>" + data.msg + "</font>");
} else {
$("#usernamemsg").html("<font color='red'>" + data.msg + "</font>");
}
},
error: function(jqXHR){
alert("发生错误:" + jqXHR.status);
}
});
});
//===============POST==============================
$("#username").blur(function(){
$.ajax({
type: "POST",
url: prjContextPath + "/zhuceAction!queryUserName.action",
data: {
username: $("#username").val(),
pwd: $("#pwd").val()
},
dataType: "json",
success: function(data){
if (data.success) {
$("#usernamemsg").html("<font color='green'>" + data.msg + "</font>");
} else {
$("#usernamemsg").html("<font color='red'>" + data.msg + "</font>");
}
},
error: function(jqXHR){
alert("发生错误:" + jqXHR.status);
}
});
});
});
调用的action中的方法:
注意:此action要继承BaseAction
public void queryUserName() throws IOException {
System.out.println("username=" + user.getUsername());
System.out.println("pwd=" + user.getPwd());
// 去数据库中验证
boolean flag = true;
//形成JSON串
String html = "";
if (flag) {
html = "{\"success\":1,\"msg\":\"用户名,可以使用!\"}";
} else {
html = "{\"success\":0,\"msg\":\"用户名,不可以使用!\"}";
}
// 调用BaseAction中的方法向输出流中写JSON串
responseWriterJSON(html);
}
BaseAction代码:
package action; import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; public class BaseAction { public HttpServletResponse response;
/**
* 返回页面数据
* @param returnString 返回数据
* @throws IOException 异常
*/
public void responseWriterJSON(String returnString) throws IOException { response = ServletActionContext.getResponse();
response.setContentType("application/json;charset=utf-8"); response.getWriter().write(returnString);
response.flushBuffer();
response.getWriter().close(); }
/**
* 返回页面xml数据
* @param returnString 返回数据
* @throws IOException 异常
*/
public void responseWriterXML(String returnString) throws IOException { response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache"); response.getWriter().write(returnString);
response.flushBuffer();
response.getWriter().close(); }
/**
* 返回页面数据
* @param returnString
* @throws IOException 异常
*/
public void printWriter(String returnString) throws IOException { response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter();
out.println(returnString);
out.close(); } }
POST方式
js:
//-----------对用户名进行查询start-------------------------------------------
$(document).ready(function() { query(); }); //-----------对用户名进行查询end-------------------------------------------
//加载查询土地登记审批表(判断:add/update/search)
function query()
{
var username = "aa";
var pwd = "bb"; $.post(prjContextPath+"/updateAction!query.action",
{username:username,pwd:pwd},callBackQuerySuccess);
} function callBackQuerySuccess(json)
{ if(json.data != null || json.data !="")
{
//向页面赋值
/*
* 方法1
for(var i=0;i<json.data.length;i++)
{ var tbBody = "";
var trColor="";
alert("i="+i);
var editData=json.data[i]; if (i % 2 == 0) {
trColor = "even";
}
else {
trColor = "odd";
}
tbBody += "<tr class='" + trColor + "'><td>" + editData.name + "</td>" + "<td>" + editData.age + "</td></tr>";
$("#myTb").append(tbBody); }
*/ //向页面赋值方法2
var typeData = json.data;
$.each(typeData, function(i, n) {
var tbBody = ""
var trColor;
if (i % 2 == 0) {
trColor = "even";
}
else {
trColor = "odd";
}
tbBody += "<tr class='" + trColor + "'><td>" + n.name + "</td>" + "<td>" + n.age + "</td>" + "<td>" + n.like[0] + "</td></tr>";
$("#myTb").append(tbBody);
}); }
}
action:
package action; import java.io.IOException;
import java.util.ArrayList;
import java.util.List; import bean.User;
import bean.UserInfo; import com.alibaba.fastjson.JSON;
import com.opensymphony.xwork2.ModelDriven; public class UpdateAction extends BaseAction implements ModelDriven<User> { User user = new User(); public User getModel() {
return user;
} public void query() throws IOException { System.out.println("username=" + user.getUsername());
System.out.println("pwd=" + user.getPwd()); UserInfo userinfo = new UserInfo();
userinfo.setName("张三");
userinfo.setAge(20);
userinfo.setBirthday("1990-10-09");
String[] likes = new String[] { "篮球", "足球" };
userinfo.setLike(likes);
userinfo.setHasgirlfirend(false);
userinfo.setCar(null); UserInfo userinfo2 = new UserInfo();
userinfo2.setName("李四");
userinfo2.setAge(20);
userinfo2.setBirthday("1991-11-11");
String[] likes1 = new String[] { "台球", "羽毛球" };
userinfo2.setLike(likes1);
userinfo2.setHasgirlfirend(false);
userinfo2.setCar(null);
List<UserInfo> userJsonList = new ArrayList<UserInfo>();
userJsonList.add(userinfo);
userJsonList.add(userinfo2); String jsonArray = JSON.toJSONString(userJsonList); StringBuffer responseString = new StringBuffer();
responseString.append("{\"total\":")
.append(2)
.append(",\"data\":")
.append(jsonArray)
.append("}"); System.out.println(responseString.toString()); // 调用BaseAction中的方法向输出流中写JSON串
responseWriterJSON(responseString.toString());
/**
{
"total": 2,
"data": [{
"age": 20,
"birthday": "1990-10-09",
"hasgirlfirend": false,
"like": ["篮球", "足球"],
"name": "张三1"
}, {
"age": 20,
"birthday": "1990-10-09",
"hasgirlfirend": false,
"like": ["篮球", "足球"],
"name": "张三"
}]
}
*/
} }
jquery中ajax的使用(java)的更多相关文章
- jquery中ajax的使用
Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进 ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- Ajax -异步请求 -jquery中ajax分类 -第一层 $.ajax -第二层($.get /$.post) -第三层($.getJson/$.getScript) -相应演示
Ajax 1.标准请求响应时浏览器的动作(同步操作) 1.1浏览器请求什么资源,跟随显示什么资源2.ajax:异步请求. 2.1局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内 ...
- jQuery中ajax的4种常用请求方式
jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...
- jquery中ajax的简单使用
一.load() 这是最简单的一个函数,传入一个url他会异步加载该url的内容,然后将内容插入每一个选中的元素中,替换掉其中已经存在的内容. 所以最简单的用法是: $("#myDiv&qu ...
- jQuery中ajax应用
一:Ajax介绍 1.ajax的定义:客服端js所发起的http请求的代号,无刷新的数据更新. 2.ajax原理: 运用XHTML+CSS来表达信息,运用javascript操作DOM(Documen ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
- [转]Jquery中AJAX错误信息调试参考
下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...
- 转载 Jquery中AJAX参数详细介绍
Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...
随机推荐
- oracle 12.1.0.2中对象锁对系统的较大影响
环境:oracle 12.1.0.2 rac ,4节点 一.概述 通常来说,如果是oltp应用,那么部署在rac上,是不错的注意. 但实现情况中,往往是混合类型,既有OLTP也有OLAP. 如果没有 ...
- 快速玩转linux(3)
Linux常用命令 软件操作命令 执行操作 命令 软件包管理器 yum 安装软件 yum install xxx 卸载软件 yum remove xxx 搜索软件 yum search xxx 清除缓 ...
- js实现区县联动
1. 引入区县联动函数如下,将provinceList中数据改为需要联动的数据信息 var addressInit = function(_cmbProvince, _cmbCity, _cmbAre ...
- flask之route中的参数
flask的路由中有一些参数 使用案例 from flask import Flask, render_template, url_for, session, request, redirect ap ...
- python系列7进程线程和协程
目录 进程 线程 协程 上下文切换 前言:线程和进程的关系图 由下图可知,在每个应用程序执行的过程中,都会去产生一个主进程和主线程来完成工作,当我们需要并发的执行的时候,就会通过主进程去生成一系列的 ...
- kuangbin 最小生成树
A & M - Jungle Roads HDU - 1301 题意:字母之间的路,求最小生成树 题解:处理好建边以后就是一个Prime #include<cstdio> #inc ...
- spring boot打包问题
java.lang.IllegalArgumentException: No auto configuration classes found in META-INF/spring.factories ...
- java程序——从命令行接收多个数字,求和之后输出结果
命令行参数都是字符串,必须先将其转化为数字,才能相加.以下是流程图,源代码和输出结果. 流程图: 源代码: import java.util.Scanner; public class Test { ...
- 3122 奶牛代理商 VIII(状压dp)
3122 奶牛代理商 VIII 时间限制: 3 s 空间限制: 256000 KB 题目等级 : 大师 Master 题目描述 Description 小徐是USACO中国区的奶牛代理商 ...
- 1698-Just a Hook 线段树(区间替换)
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...