struts2アクションクラスへのajax呼び出しの後、次のjson-dataがあります。
{"jsonData":[{"age":1,"name":"Aifa"},{"age":2,"name":"Afraa"},{"age":27,"name":"Zafar"}],"searchId":0,"searchName":""}
function setAjaxOutput() {
if(httpObject.readyState == 4) {
document.getElementById('intValueDiv').innerHTML = httpObject.responseText;
var jsonString = httpObject.responseText;
alert(jsonString);
var jsonString2 = JSON.parse(jsonString);
alert(jsonString2.jsonData[2].name);
}
}
jsonデータはhttpObject.responseTextにあります。
現在jqgridを使用しているようですが、上記のコードは必要ありませんが、jqgridを使用してajax呼び出しを行い、jsonデータを受信し、テーブルに表示する方法をまだ理解できませんでした。
jqgridを使用して、アクションクラスから返されたjsonData-arrayのみをグリッド形式で表示しようとしています。コードは以下のとおりです。
[{"age":1,"name":"A"},{"age":2,"name":"Ab"},{"age":3,"name":"abc"}]
click（）を呼び出すことはできますが、を呼び出したいと思います'jQuery("#list2").jqGrid()。
教えていただけませんか。どのように変更を加えると思いますか。
1）次のコマンドでajaxリクエストを送信します：
url：'callAJax.action？start = 1＆t ='+ Math.random（）+'testFlag = 1'
Should single quotes be replaced with double quotes? Please let me know.
また、divId1またはdivId2のどちらであるかを確認するには、以下をクリックします。
var $target = $(event.target);
if( $target.is("div") ) { // div is tag, how to check for id.
testFlag=1/2;
}
2）そして、jsonデータがグリッドに表示されたら、各行にボタンを追加します。クリックすると、行データを読み取り、アクションクラスのURLに対してAjax呼び出しを実行します。
どうすればこれを達成できるか教えてください。
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX JSP PAGE</title>
<link rel="stylesheet" href="styles/jqx.base.css"
type="text/css" />
<link rel="stylesheet" href="styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxbuttons.js"></script>
<script type="text/javascript" src="jqxscrollbar.js"></script>
<script type="text/javascript" src="jqxmenu.js"></script>
<script type="text/javascript" src="jqxgrid.js"></script>
<script type="text/javascript" src="jqxdata.js"></script>
<script type="text/javascript">
var start = 0;
var idAndName = "";
var rowId = 0;
var searchId = 0;
var searchName = "";
$(document)
.ready(function () {
alert("document loaded.");
$("#editgrid")
.jqGrid({
url: 'callAJax.action?t=1',
datatype: "json",
myType: 'GET',
colNames: ['name', 'age'],
colModel: [
{
name: 'name',
index: 'name',
width: 80,
editable: true,
editoptions: {
size: 10
}
},
{
name: 'age',
index: 'age',
width: 90,
editable: true,
editoptions: {
size: 25
}
}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pagered',
sortname: 'name',
viewrecords: true,
sortorder: "desc",
caption: "Editing Example",
editurl: "index.jsp"
});
$("#bedata")
.click(function (event) {
alert("Inside click function.");
jQuery("#editgrid")
.jqGrid('getGridParam', 'selrow');
});
});
</script>
</head>
<body>
<center>
<h1>
Use Ajax in Struts2
</h1>
<br/>
<br/>
<table id="editgrid"></table>
<div id="pagered"></div>
<input type="button" id="bedata" value="Edit Selected" />
</center>
<br/>
</body>
</html>
私が走ったとき、何が起こっているのですか？
答え：
完全に削除$("#editgrid")..jqGrid({})すると、「ドキュメントが読み込まれました」というメッセージが表示されます。
ボタンをクリックすると、「クリック機能の内部」というメッセージが表示されます。
しかし、$("#editgrid")..jqGrid({})ブロックを部分的または完全に追加すると、「ドキュメントが読み込まれました」としか表示されませんが、ボタンをクリックすると、「クリック機能内」というメッセージが表示されません。
よろしければ、詳細をお知らせください。いつものように、ありがとう！