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") 请求方式 ...
随机推荐
- ansible服务的部署与使用
简介: ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量程序 ...
- JavaScript实现Tab切换
在网页开发中,常常会遇见很多Tab切换,Tab切换增加网页浏览的舒适性,对于开发人员特别常见,本文使用JS实现tab切换效果,仅对学习中遇到的知识点做一个总结. 效果图如下: 实现思路: 1. ...
- JSP/Servlet开发——第五章 使用分层实现业务处理
1.JNDI(Java Naming and Directory Interface)Java命名和目录接口: ●JNDI:是一个有关应用序设计的 API 为开发人员提供了查找和访问各种命名和目录服务 ...
- Angular2入门学习
最近项目使用angular2,1和2版本变化大变样.下面总结一些学习网址及安装步骤. 中文官网(必看): https://angular.cn 懒人学习: http://www.imooc.com/l ...
- Apache httpd Server 配置正向代理
背景 代理(Proxy),位于客户端与实际服务端之间,当客户端需要请求服务端内容时,先向代理发起请求,代理将请求转发到实际的服务器,再原路返回.也可以在代理服务器设置缓存,将实际服务器上不常变化的内容 ...
- Spark-源码-SparkContext的初始化
Spark版本 1.3SparkContext初始化流程 1.0 在我们的主类 main() 方法中经常会这么写 val conf = new SparkConf().setAppName(" ...
- 【Hive二】 Hive基本使用
Hive基本使用 创建数据库 创建一个数据库,数据库在HDFS上的默认存储路径是/user/hive/warehouse/*.db create database 库名; 避免要创建的数据库已经存在错 ...
- java中方法的参数传递机制_一个对象被当作参数传递到一个方法后
一个例子: 在Boy.java类中 在Girl.java类中 在marry方法中的this指的是这个方法所属的对象的引用,在这里指的是girl这个对象 在BoyGirlTest.java测试 ...
- C++常量(const)的使用
#include <iostream> using namespace std; class MyClass { public: int GetValue() const ; int Ge ...
- 复位自动ID的问题有兩種方法
复位自动ID的问题 有兩種方法: 方法1: truncate table 你的表名 --這樣不但將數據刪除,而且可以重新置位identity屬性的字段. ...