jquery 关于ajax 及其son
<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/commons/include/html_doctype.html"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/commons/include/html_doctype.html"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<script type="text/javascript" src="${staticUrl}/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${staticUrl}/js/jquery/jquery.form.js"></script>
</head>
<body>
<script type="text/javascript">
function UpdateUserInfo() {
var Id = $("input[name='Id']").val();
var NickName = $("input[name='NickName']").val();
var RealName = $("input[name='RealName']").val();
$("#formDemo").ajaxSubmit({
url: '${ctx}/oa/sms/smsInfo/req.ht?Id='+Id+'&RealName='+RealName+'&NickName='+NickName, /*设置post提交到的页面*/
type: "post", /*设置表单以post方法提交*/
dataType: "json", /*设置返回值类型为文本*/
success: function (data) {
console.log(data); //重点是在data进行处理,通过操作dom来显示数据
//后台返回的数据格式 {"id":"11","realName":"sv","nickName":"ww"}
//接受 的时候以data.属性名
var txt = "<p>Id:"+data.id+"</p><p>昵称:"+data.realName+"</p><p>真名:"+data.nickName+"</p><p><img src='"+data.HeadUrl+"' /></p>";
$("#txt").empty().append($(txt));
},
error: function (error) {
alert(error);
console.info(error);
}
});
}
function submitForm() {
UpdateUserInfo();
}
</script>
<script type="text/javascript">
function q(){
var query=$('#qw').val();
var key=$('#key').val();
qu(query,key);
}
function qu(query,key){
$.ajax({
url: '${ctx}/oa/sms/smsInfo/query.ht',
type: "POST",
dataType:"json",
data:{"query":query,"type":1,"key":key},//向后退传递的数据 ,也可以通过url带参数的形式 'query.ht?query='+query&'key='+key
success: function (data) {
console.log(data); //{"id":"11","headUrl":null,"nickName":null,"realName":"bb"}
var txt = "<p>Id:"+data.id+"</p><p>昵称:"+data.realName+"</p><p>真名:"+data.nickName+"</p><p><img src='"+data.HeadUrl+"' /></p>";
$("#din").empty().append($(txt));
}
});
}
</script>
<script type="text/javascript">
function q2(){
var query=$('#qw').val();
var key=$('#key').val();
qu2(query,key);
}
function qu2(query,key){
$.ajax({
url: '${ctx}/oa/sms/smsInfo/querylist.ht', //返回list
type: "POST",
dataType:"json",
data:{"query":query,"type":1,"key":key},//向后退传递的数据 ,也可以通过url带参数的形式 'query.ht?query='+query&'key='+key
success: function (data) {
console.log(data);//[{"id":"1","headUrl":"http:baidu.com","nickName":null,"realName":null},{"id":"2","headUrl":"http:soo.com","nickName":null,"realName":null}]
//遍历data 方法1
/* var str = "";
for (i in data) {
str += "<tr>" +
"<td>" + data[i].id + "</td>" +
"<td>" + data[i].realName + "</td>" +
"<td>" + data[i].nickName + "</td>" +
"<td>" + data[i].headUrl + "</td>" +
"</tr>";
}
$("#tb").append(str); //向id=tb的元素中添加 */
//遍历data方法二
var str="";
$("#tb").append(str); //向id=tb的元素中添加 */
$.each(data, function(i,item) {
str+="<tr><td>"+item.id+"</td><td>"+item.realName+"</td><td>"+item.nickName+"</td><td>"+item.headUrl+"</td></tr>";
});
$("#tb").append(str); //向id=tb的元素中添加 */
}
});
}
</script>
<script type="text/javascript">
function q3(){
var query=$('#qw').val();
var key=$('#key').val();
var tbody=window.document.getElementById("tbody-result");
qu3(query,key);
}
function qu3(query,key){
$.ajax({
url: '${ctx}/oa/sms/smsInfo/queryMap.ht',
type: "POST",
dataType:"json",
data:{"query":query,"type":1,"key":key},//向后退传递的数据 ,也可以通过url带参数的形式 'query.ht?query='+query&'key='+key
success: function (data) {
console.log(data);//{"2":{"id":"2","headUrl":"http:soo.com","nickName":null,"realName":null},"1":{"id":"1","headUrl":"http:baidu.com","nickName":null,"realName":null}}
var str = "";
$.each(data,function(key,values){
console.log(key);
$(values).each(function(i,item){
// console.log("/t" + this);
str+="<tr><td>"+item.id+"</td><td>"+item.realName+"</td><td>"+item.nickName+"</td><td>"+item.headUrl+"</td></tr>";
});
});
$("#tb").append(str); //向id=tb的元素中添加 */
}
});
}
</script>
<script type="text/javascript">
function q4(){
var query=$('#qw').val();
var key=$('#key').val();
var tbody=window.document.getElementById("tbody-result");
qu4(query,key);
}
function qu4(query,key){
$.ajax({
url: '${ctx}/oa/sms/smsInfo/queryMaplist.ht',
type: "POST",
dataType:"json",
data:{"query":query,"type":1,"key":key},//向后退传递的数据 ,也可以通过url带参数的形式 'query.ht?query='+query&'key='+key
success: function (data) {
console.log(data);//{"img1":[{"id":"1","nickName":null,"headUrl":"http:baidu.com","realName":null},{"id":"2","nickName":null,"headUrl":"http:soo.com","realName":null}]}
var str = "";
$.each(data,function(key,values){
console.log(key);
$(values).each(function(i,item){
str+="<tr><td>"+item.id+"</td><td>"+item.realName+"</td><td>"+item.nickName+"</td><td>"+item.headUrl+"</td></tr>";
});
});
$("#tb").append(str); //向id=tb的元素中添加 */
}
});
}
</script> -->
</head>
<body>
<h1>上传图片测试</h1>
<form id="formDemo" method="post" enctype="multipart/form-data">
<input type="hidden" name="Id" value="1" /> <br /><br />
昵称: <input type="text" name="RealName" value="" /><br /><br />
真名: <input type="text" name="NickName" value="" /><br /><br />
头像:<input type="file" name="HeadUrl" /> <br /><br />
<input type="button" value="测试" onclick="submitForm()" />
</form>
<div id="txt">
</div>
<h1>查询</h1>
<form id="query" method="post">
搜索:<input type="text" name="query" id="qw">
搜索:<input type="text" name="key" id="key">
<input type="button" value="查询" onclick="q()" >
<input type="button" value="查询2" onclick="q2()" >
<input type="button" value="查询3" onclick="q3()" >
<input type="button" value="查询4" onclick="q4()" >
</form >
<div id="din">
</div>
<div class="table-container">
<table class="ui nine column table celled table-result" id="table-result">
<thead>
<tr>
<th>编号</th>
<th>真名</th>
<th>昵称</th>
<th>地址</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</div>
</body>
</html>
对应的后台
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.hotent.core.web.controller.BaseController;
@Controller
@RequestMapping("/oa/sms/smsInfo/")
public class SubmintController extends BaseController {
@RequestMapping("index")
public ModelAndView index() throws Exception
{
ModelAndView mv=new ModelAndView("/oa/sms/index.jsp");
return mv;
}
@RequestMapping("req")
@ResponseBody
public Img req(HttpServletRequest request) {
String id= request.getParameter("Id");
String RealName=request.getParameter("RealName");
String NickName=request.getParameter("NickName");
String HeadUrl=request.getParameter("HeadUrl");
return new Img(id,RealName,NickName,HeadUrl);
}
@RequestMapping("query")
@ResponseBody
public Img query1(HttpServletRequest request){
String query=request.getParameter("query");
String key=request.getParameter("key");
return new Img("11","bb",query,key);
}
@RequestMapping("querylist")
@ResponseBody
public List<Img> querylist(HttpServletRequest request){
String query=request.getParameter("query");
String key=request.getParameter("key");
List<Img> list = new ArrayList<Img>();
Img img = new Img();
img.setId("1");
img.setNickName(key);
img.setRealName(query);
img.setHeadUrl("http:baidu.com");
list.add(img);
Img img2 = new Img();
img2.setId("2");
img2.setNickName(key);
img2.setRealName(query);
img2.setHeadUrl("http:soo.com");
list.add(img2);
return list;
}
@RequestMapping("queryMap")
@ResponseBody
public Map<String,Img> queryMap(HttpServletRequest request){
String query=request.getParameter("query");
String key=request.getParameter("key");
Map<String,Img> map = new HashMap<String,Img>();
Img img = new Img();
img.setId("1");
img.setNickName(key);
img.setRealName(query);
img.setHeadUrl("http:baidu.com");
map.put("1", img);
Img img2 = new Img();
img2.setId("2");
img2.setNickName(key);
img2.setRealName(query);
img2.setHeadUrl("http:soo.com");
map.put("2", img2);
return map;
}
@RequestMapping("queryMaplist")
@ResponseBody
public Map<String,List<Img>> queryMapList(HttpServletRequest request){
String query=request.getParameter("query");
String key=request.getParameter("key");
Map<String,List<Img>> map = new HashMap<String,List<Img>>();
Img img = new Img();
img.setId("1");
img.setNickName(key);
img.setRealName(query);
img.setHeadUrl("http:baidu.com");
Img img2 = new Img();
img2.setId("2");
img2.setNickName(key);
img2.setRealName(query);
img2.setHeadUrl("http:soo.com");
List<Img> list = new ArrayList<Img>();
list.add(img);
list.add(img2);
map.put("img1", list);
return map;
}
class Img{
private String id;
private String RealName;
private String NickName;
private String HeadUrl;
public Img() {
}
public Img(String id, String realName, String nickName, String headUrl) {
this.id = id;
RealName = realName;
NickName = nickName;
HeadUrl = headUrl;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getRealName() {
return RealName;
}
public void setRealName(String realName) {
RealName = realName;
}
public String getNickName() {
return NickName;
}
public void setNickName(String nickName) {
NickName = nickName;
}
public String getHeadUrl() {
return HeadUrl;
}
public void setHeadUrl(String headUrl) {
HeadUrl = headUrl;
}
}
}
jquery 关于ajax 及其son的更多相关文章
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
SON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教 ...
- Jquery书写ajax
根据API学习本章 Jquery书写ajax 使用ajax发送表单到servlet,发送时显示等待图片,servlet处理完返回信息,在页面显示返回信息,并且隐藏等待图片 <%@ page la ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 【原创经验分享】JQuery(Ajax)调用WCF服务
最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...
- jQuery版AJAX简易封装
开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...
- 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache
虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...
随机推荐
- WEB前端研发工程师编程能力成长之路(2)(转)
WEB前端研发工程师编程能力成长之路(2) 四.[入微] 最强解决方案.你能够走在需求的前面,将当前需求里有的.没有直接提出来的.现在暂时没有但将来可能有的等等,及前端编程潜规则等各个方方面面都综 ...
- SQLite概述
SQLite概述 这个教程帮助您理解SQLite是什么,它如何不同于SQL,为什么它是必要的和它的方式处理应用程序数据库. SQLite是一个库,实现了一个独立的软件,serverless zer ...
- DBMS的工作模式
数据库管理系统(DBMS)是指数据库系统中对数据进行管理的软件系统,它是数据库系统的核心组成部分,对数据库的一切操作(增删改查)都是通过DBMS进行的 DBMS的工作模式如下: 1>接受应用程序 ...
- billu_b0x靶场刷题
https://www.vulnhub.com/ 里面有很多安全环境,只要下载相关镜像,在虚拟机上面搭建运行就可以练习对应靶场了. 第一步.信息收集 nmap扫描内网开放80端口的存活主机 nmap ...
- Python基础4 迭代器,生成器,装饰器,Json和pickle 数据序列化
本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 孩子,我现在有个需 ...
- CPP-基础:关于私有成员的访问
a.C++的类的成员函数中,允许直接访问该类的对象的私有成员变量. b.在类的成员函数中可以访问同类型实例的私有变量. c.拷贝构造函数里,可以直接访问另外一个同类对象(引用)的私有成员. d.类的成 ...
- 第4节 hive调优:2、数据倾斜
数据的倾斜: 主要就是合理的控制我们的map个数以及reduce个数 第一个问题:maptask的个数怎么定的???与我们文件的block块相关,默认一个block块就是对应一个maptask 第二个 ...
- svn 设置代理
Memory4Young Do Not Repeat Yourself! SVN —— 如何设置代理 如果在使用SVN下载外网的资源时,出现这样的提示:No such host is known. 或 ...
- js实现返回上一页功能
大家在做 "返回上一页" 这个功能的时候 都是用history.go(-1);来实现的 但这段代码只是简单的使用浏览器的后退功能 从浏览器缓存中取出页面来显示 但我们绝大部分情况都 ...
- SQL Server 删除表的默认值约束
首先查出字段的默认值约束名称,然后根据默认值约束名称删除默认值约束 ) select @constraintName = b.name from syscolumns a,sysobjects b w ...