Ajax 更改包装器内容答案

【问题标题】：Ajax change wrapper contentAjax 更改包装器内容
【发布时间】：2014-06-23 08:43:43
【问题描述】：

我正在努力提高我的 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 但是当我单击按钮时，我的包装器不会改变。任何帮助将不胜感激。

【问题讨论】：

#Wrapper 元素在哪里？是否检查了控制台以确保请求成功？
只是没有缩进：p
在某处定义了MakeRequest1() 和MakeRequest2() 吗？
您好，请输入 alert(data) 或 console.log(data) 以确保您的请求正常。或将$('#Wrapper').html(data); 替换为：$('#Wrapper').empty(); $('#Wrapper').append(data);
您希望
Test1
填充“Test2”这一新内容，对吗？

标签： javascript jquery ajax dynamic-data

【解决方案1】：

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

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

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

【讨论】：

嗯，这是将内容加载到 div 中最基本的方法。你有错误吗？您是否确保正确捕获 ID？

【解决方案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>

【讨论】：

【解决方案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>

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

【讨论】：

【解决方案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

【讨论】：