Jsp 尝试进行ajax调用，使用jqgrid显示Json数据_Jsp_Jquery_Jqgrid_Struts2_Struts2 Json Plugin

Jsp 尝试进行ajax调用，使用jqgrid显示Json数据

jsp jquery jqgrid struts2

Jsp 尝试进行ajax调用，使用jqgrid显示Json数据,jsp,jquery,jqgrid,struts2,struts2-json-plugin,Jsp,Jquery,Jqgrid,Struts2,Struts2 Json Plugin,在ajax调用struts2 action类之后，我有以下json数据： {"jsonData":[{"age":1,"name":"Aifa"},{"age":2,"name":"Afraa"},{"age":27,"name":"Zafar"}],"searchId":0,"searchName":""} function setAjaxOutput() { if(httpObject.readyState == 4) { document.

在ajax调用struts2 action类之后，我有以下json数据：

{"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、recevie json数据和在表中显示来进行ajax调用

我试图使用jqgrid以网格格式显示从action类返回的jsonData数组。代码如下

[{"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数据显示在网格中时，我想向每一行添加按钮，单击该按钮时，我想读取行数据，并对action类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>


AJAX JSP页面
var start=0；
var idAndName=“”；
var-rowId=0；
var-searchId=0；
var searchName=“”；
$（文件）
.ready（函数（）{
警报（“文件已加载”）；
$（“#编辑网格”）
.jqGrid({
url:'callAJax.action？t=1'，
数据类型：“json”，
myType:'获取'，
colNames:['name'，'age']，
colModel：[
{
姓名：'姓名'，
索引：“名称”，
宽度：80，
是的，
编辑选项：{
尺码：10
}
},
{
姓名：'年龄'，
索引：‘年龄’，
宽度：90，
是的，
编辑选项：{
尺码：25
}
}
],
rowNum:10，
行列表：[10,20,30]，
传呼机：“#已传呼机”，
sortname:'名称'，
viewrecords：是的，
巫师：“描述”，
标题：“编辑示例”，
editurl:“index.jsp”
});
美元（“#贝达塔”）
。单击（功能（事件）{
警报（“内部点击功能”）；
jQuery（“editgrid”）
.jqGrid（'getGridParam'，'selrow'）；
});
});
在Struts2中使用Ajax

我跑的时候发生了什么

答复:

当我完全删除

$（“#editgrid”）…jqGrid（{}）

时，我看到消息“document loaded”

当我点击按钮时，我看到消息“内部点击功能”

但是，当我部分或全部添加

$（“#editgrid”）…jqGrid（{}）块时，我只看到“文档已加载”，但在按钮单击时，消息“内部单击函数”没有显示
如果您想了解更多信息，请告诉我。一如既往，谢谢你
 没有关系，但是如果您使用jQuery，为什么不使用jQueryAjax，让您的生活更加轻松呢？谢谢。我现在正在研究jQueryAjax。请参阅struts2 jQuery插件。它也有网格支持。@Aleksandr M，我认为这个插件没有什么好处，还有很多缺点，其中一个就是这里有很多未回答的问题。而一个等价的json/jQuery问题通常会很快得到解决。OP：请参阅jQuery.getJSON函数，了解进行调用和处理回拨的好方法。@Quaternion：好处之一是可以使用标记而不是长javascript代码。对于一些尚未回答的问题，至少对我来说，这不是一个真正的不利因素