jquery 關於ajax 及其son

時間 2019-11-21

標籤 jquery 關於 ajax 及其 son 欄目 JQuery 简体版

原文原文鏈接

<%@ 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()" />javascript

</form>
<div id="txt">

</div>html

<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()" >java

</form >
<div id="din">jquery

</div>web

<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> ajax

</body>
</html>spring

對應的後臺json

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;app

import javax.servlet.http.HttpServletRequest;dom

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; } } }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。