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") 请求方式 ...
随机推荐
- Java OOP——第四章 异常
1. 接口:接口就是给出一些没有内容的方法,封装到一起,到某个类要使用的时候,在根据具体情况把这些方法写出来. 接口是更加抽象的抽象的类, 抽象类里的方法可以有方法体, 接口里的所有方法都没有方法体. ...
- dom4j解析器sax解析xml文件
1.使用dom4j解析器解析xml ***解析器dom4j是由dom4j组织提供的,针对xml进行解析.dom4j不是Javase的一部分,使用时需要导入dom4j的jar包(官网下载) 在eclip ...
- js根据年份获取某月份有几天
function getNum(year, month) { var temp; month = parseInt(month, 10); temp = new Date(year, month, 0 ...
- ThinkPHP框架介绍
什么是框架 php框架是许多代码的集合,这些代码的程序结构的代码(并不是业务代码)代码中有许多的函数,类,功能类包 不使用框架开发的缺陷 代码编写不规范 牵一发而动全身 不能很好满足客户各方面的需求 ...
- Trie(字典树,前缀树)_模板
Trie Trie,又经常叫前缀树,字典树等等. Trie,又称前缀树或字典树,用于保存关联数组,其中的键通常是字符串.与二叉查找树不同,键不是直接保存在节点中,而是由节点在树中的位置决定.一个节点的 ...
- vm 中 centOS 7 固定ip设置
虚拟机中,centOS通过NAT连接,设置固定IP上网. 本地主机 VMware Network Adapter VMnet8 状态信息: 描述: VMware Virtual Ethernet A ...
- docker配置与实践#可以好好看看
Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源.Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 L ...
- jmeter 插件安装
1.下载Plugins Manager插件 打开下载插件地址:https://jmeter-plugins.org/ 2.将下载的plugins-manager.jar包复制到Jmeter安装目录,l ...
- node 分层开发
app.js var express = require('express');var app = express();app.use('/',require('./control'));app.us ...
- Tensorflow之MNIST的最佳实践思路总结
Tensorflow之MNIST的最佳实践思路总结 在上两篇文章中已经总结出了深层神经网络常用方法和Tensorflow的最佳实践所需要的知识点,如果对这些基础不熟悉,可以返回去看一下.在< ...