Javascript jQuery AJAX将数据重新加载到DOM中或使用新数据刷新DOM_Javascript_Html_Jquery

Javascript jQuery AJAX将数据重新加载到DOM中或使用新数据刷新DOM

javascript html jquery

Javascript jQuery AJAX将数据重新加载到DOM中或使用新数据刷新DOM,javascript,html,jquery,Javascript,Html,Jquery,我有一段代码，在用户从另一个页面选择按钮后，使用jQuery将内容从一个内部网页加载到一个新的页面DOM上。我遇到的问题是，无论单击哪个选项按钮，都会在DOM中显示相同的结果。我被告知将Var更改为.live，但这没有任何区别。除了有人看我的代码之外，我真的无法解释得更多。处理这个问题的最好方法是什么 <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web App</titl

我有一段代码，在用户从另一个页面选择按钮后，使用jQuery将内容从一个内部网页加载到一个新的页面DOM上。我遇到的问题是，无论单击哪个选项按钮，都会在DOM中显示相同的结果。我被告知将Var更改为.live，但这没有任何区别。除了有人看我的代码之外，我真的无法解释得更多。处理这个问题的最好方法是什么

<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="../jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="../jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="../jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview">
            <li><a href="#options">Options</a></li>
            <li><a href="#results">results</a></li>
        </ul>       
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="options">
    <div data-role="header">
        <h1>Options</h1>
    </div>
    <div data-role="content">   
        <div id="page-wrap">
            <div id="header">
                <h1>Call a webpage in a DOM</h1>
            </div>

            <div id="load-div" class="functions">
                <span>Value 1</span>
                <input type="submit" value="300GB" id="load" />

<div id="load-div" class="functions">
                <span>Value 2</span>
                <input type="submit" value="500Gb" id="load2" />
            </div>
            <a href="#results">results</a>      

        </div>  
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
</div>






<div data-role="page" id="results">
    <div data-role="header">
        <h1>Results</h1>
    </div>
    <div data-role="content">

                    <div id="result"  class="functions">

</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
//  load() functions
    var loadUrl = "load.html";
    $("#load").live("click",function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

</script>


<script type="text/javascript">
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
//  load() functions
    var loadUrl = "load2.html";
    $("#load_2").live("click",function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

</script>

<a href="#options">Options</a>  
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>


jQuery移动Web应用程序
第一页




页脚
选择权
在DOM中调用网页
值1
价值2
页脚
结果
$.ajaxSetup({
缓存：false
});
var ajax_load=“”；
//load（）函数
var loadUrl=“load.html”；
$（“#加载”）.live（“单击”，函数（）{
$（“#结果”）.html（ajax#u load）.load（loadUrl）；
});
$.ajaxSetup({
缓存：false
});
var ajax_load=“”；
//load（）函数
var loadUrl=“load2.html”；
$（“加载2”）.live（“单击”，函数（）{
$（“#结果”）.html（ajax#u load）.load（loadUrl）；
});
页脚

基本上您可以覆盖这里的每个脚本。不要使用

loadUrl

对于

#加载：

$("#load").live("click",function(){
    $('#result').html(ajax_load).load('load.html');
});

$("#load_2").live("click",function(){
    $("#result").html(ajax_load).load(`load2.html`);
});

和对于#load2
：
$("#load").live("click",function(){
    $('#result').html(ajax_load).load('load.html');
});

$("#load_2").live("click",function(){
    $("#result").html(ajax_load).load(`load2.html`);
});

单独的脚本标记不是独立的。一个系统中的代码可以与另一个系统中的代码交互
在这两个块中都声明了var ajax_load和loadUrl。第二个块中的将覆盖第一个块中的。可以给它们不同的名称，也可以删除它们并将字符串值直接放入函数中