Question

我正在尝试用Ajax开发我的技能我想用不同的页面包装器内容更改我的包装器内容，而不必刷新页面。

我正在使用：

$(function () {
    $("#page2btn").click(function () {
        $.ajax({
            url: 'page2.asp',
            data: { id: $(this).attr('id') },
            success: function (data) {
                $('#Wrapper').html(data);
            }
        });
    });
});

<div id="Wrapper">
    <div id="menu">
        <a class="navbutton" onclick="MakeRequest1()">Home</a> <span class="navbutton">|</span>
        <a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span>
        <a class="navbutton" onclick="MakeRequest3()">Page3</a>
    </div>
    <h1>Test1</h1>
</div>

和另一个名为page2.asp的页面用不同的包装内容说Test2 但是当我点击按钮时，我的包装器不会改变。任何帮助将不胜感激。

Answer 1

尝试简化它以确定这是否是您的前端或后端代码的问题...

试试这个，看看它的效果更好..

$('#Wrapper').load('page2.asp?id='+$(this).attr('id'));

Answer 2

试试这个：

$(function () {
    $("#page2btn").click(function () {
        $.ajax({
            url: 'page2.asp',
            data: { id: $(this).attr('id') },
            success: function (data) {
                $('#dynamic_content_div').html(data);//data = <h1>Test 2</h1>
            }
        });
    });
});

HTML：

<div id="Wrapper">
    <div id="menu">
        <a class="navbutton" onclick="MakeRequest1()">Home</a> <span class="navbutton">|</span>
        <a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span>
        <a class="navbutton" onclick="MakeRequest3()">Page3</a>
    </div>
    <div id="dynamic_content_div">
    <h1>Test1</h1>
    </div>
</div>

Answer 3

Javascript区分大小写。在分配事件时使用小写 -

$(function () {
    $("#page2btn").click(function () { //lowercase P
        ...
    });
});

但是使用大写字母表示html id

        ...
        <a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span> //upper case P
        ...

所以，它永远不会找到要绑定的项目，因此单击时没有任何反应。将js更改为 -

$("#Page2btn").click(function ()

或将html更改为 -

<a class="navbutton" id="page2btn">Page2</a> <span class="navbutton">|</span>

除此之外，我没有看到错误。

Answer 4

尝试jQuery replaceWith 方法，如下所示：

$(function () {
   $("#page2btn").click(function () {
      $.ajax({
          url: 'page2.asp',
          data: { id: $(this).attr('id') },
          success: function (data) {
              $("#Wrapper").replaceWith(data);  //try with double qoutes
          }
      });
   });
});

*以下链接可能会有所帮助：

Change content of div using jQuery

Ajax更改包装器内容

4 个答案: