0

ボタンを使用して 2 つの個別の AJAX 呼び出しを実行しようとしています。私がしたいことは次のとおりです。Button1 がクリックされると、ProductsTable は Web サービスからのデータを表示します。Button2 がクリックされると、OthersTable は Web サービスからの独自のデータを表示します。しかし、現在、どちらのボタンをクリックしても何も表示されません。コードが 1 つしかなく、.click 関数にラップされていない場合、コードが機能することはわかっています。

エラー メッセージはありません。ASP.NET 4.0、JQuery 1.4.4。ScriptManager を使用していません。UpdatePanels を使用していません。

以下のコード:

<script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script id="ProductsTemplate" type="text/x-query-tmpl">
    <tables id="ProductsTemplate">            
        <thead>
        </thead>
        <tbody>
            {{each d}}
                {{tmpl($value) '#ProductsRowTemplate'}}
            {{/each}}
        </tbody>         
    </tables>
</script>
<script id="ProductsRowTemplate" type="text/x-query-tmpl">
    <tr>
        <td>${title}</td>
        <td>${size}</td>
        <td>${price}</td>
    </tr>
</script>
<script id="Products2Template" type="text/x-query-tmpl">
    <tables id="Products2Template">            
        <thead>
        </thead>
        <tbody>
            {{each d}}
                {{tmpl($value) '#Products2RowTemplate'}}
            {{/each}}
        </tbody>         
    </tables>
</script>
<script id="Products2RowTemplate" type="text/x-query-tmpl">
    <tr>
        <td>${title}</td>
        <td>${size}</td>
        <td>${price}</td>
    </tr>
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Button1").click(function () {
            $.ajax({
                type: "POST",
                url: "JSON-WebService.asmx/getProducts",
                data: "{}",
                contentType: "application/json; charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    $('#ProductsTemplate').tmpl(data).appendTo('#ProductsTable');
                    alert("Products works");
                },
                failure: function (data) {
                    alert("Products didn't work");
                }
            });
        });

        $("#Button2").click(function () {
            $.ajax({
                type: "POST",
                url: "JSON-WebService.asmx/getProducts",
                data: "{}",
                contentType: "application/json; charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    $('#Products2Template').tmpl(data).appendTo('#OthersTable');
                    alert("Products2 works");
                },
                failure: function (data) {
                    alert("Products2 didn't work");
                }
            });
        });

    });
</script>
<title>Using JQuery</title>

<form id="form1" runat="server">

<div id="ProductsTable">

</div>

<div id="OthersTable">

</div>

<div>
    <asp:Button ID="Button1" runat="server" Text="Products" />
    <asp:Button ID="Button2" runat="server" Text="Products2" />
</div>

</form>
4

3 に答える 3

1

Ok。ASP:Button が ajax 呼び出しの直後にポストバック/リロードを引き起こしていることがわかりました。そのため、何も追加されていないように見えました。答えは使用です：

`<script type="text/javascript">
$(document).ready(function () {
    $("#Button1").click(function (evt) {
        evt.preventDefault();
        $.ajax({
            type: "POST",
            url: "JSON-WebService.asmx/getProducts",
            data: "{}",
            contentType: "application/json; charset=UTF-8",
            dataType: "json",
            success: function (data) {
                $('#ProductsTemplate').tmpl(data).appendTo('#ProductsTable');
                alert("Products works");
            },
            failure: function (data) {
                alert("Products didn't work");
            }
        });
    });
 });
</script>`
于 2010-11-20T06:47:13.883 に答える
0

私が書いた次の関数を使用してください

    function jqajax(urlp,thediv) {
          $.ajax({
            type: "GET",
            url: urlp,
            dataType: "html",
            //data: "header=variable",
            success: function(data){
                if($('#'+thediv)) 
                {

                  $("#"+thediv).html(data);

                } 
                else 
                {

                  $("#"+thediv).parent().html(data);
                }
            }
          }); 
}

それを使用するには

onclick = "jqajax（yoururlhere、returnedhtml_div_here）;"

于 2010-11-19T15:52:02.660 に答える
0

先ほど言ったように、.net パネルを見て、クリックに対する結果が得られるかどうかを確認してください。それらが来る場合は、html コードに何らかのバグがあります。

製本を外して完了を知らせるだけで、印刷されるかどうかを確認できます。その後、簡単に印刷できます。

firebug、.net パネルを使用すると、問題を簡単に修正できます。

于 2010-11-19T15:54:45.883 に答える