jQuery.post() 里面的 jQuery.post()

标签 jquery html ajax post load

想象一个网站,其中使用 jQuery .post()(或 .get())通过菜单加载内容。

想象一下,在这个动态加载的内容中应该是另一个 jQuery 帖子,以在内容下显示更多内容

(无需导航到地址栏中的新文件)

这就是我的意思(但只有基本框架......):

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" name="n" id="n" placeholder="Search..." />
<button id="click1">Go</button>
<!-- the result of the search will be rendered inside this div -->
<br />
<div id="result" name="result"></div>

<script>
window.onload = (function(){
    /* attach a submit handler to the button */

    $("#click1").click(function(event) {
        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: 'n: term',
              success: function(msg) {
                $( "#result" ).empty().append( msg );
              }
         });
    });
});
</script>

</body>
</html>

所以,别笑了,我知道该页面只会在 div 中加载自身,并且由于相同的 ID 而无法正常工作...它是 not Inception here ;-)

但即使我使用新 ID 将一个全新的页面链接到它,它也无法正常工作...

是否可以在现有的、已经使用 jQuery AJAX 加载的内容中添加新的 jQuery AJAX?

我想是的,但我找不到我的错误...

/编辑

我想我需要提供更多意见:

测试.php

<input type="text" name="n" id="n" placeholder="Search..." />
<button id="click1">Go</button>
<div id="result" name="result"></div>

<script>
window.onload = (function(){        
    $("#click1").click(function(event) {
        $.ajax({
            url: 'test2.php',
            type: 'POST',
            data: 'n: term',
              success: function(msg) {
                $( "#result" ).empty().append( msg );
              }
         });
    }); 
    $("#click2").click(function(event) {
        $.ajax({
            url: 'test3.php',
            type: 'POST',
            data: 'n2: term',
              success: function(msg) {
                $( "#result2" ).empty().append( msg );
              }
         });
    });
});
</script>

test2.php

<input type="text" name="n2" id="n2" placeholder="Search..." />
<button id="click2">Go</button>
<div id="result2" name="result2"></div>

test3.php

<?php
echo 'It´s working!';
?>

我的最后一个问题:为什么它不起作用?为什么它不输出“It´s working!”最后呢?

最佳答案

您可以将另一篇文章放入第一篇文章的成功处理程序中:

$("#click1").click(function(event) {
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: 'n: term',
          success: function(msg) {
            $( "#result" ).empty().append( msg );

            $.ajax({/* params here */});
          }
     });
});

关于jQuery.post() 里面的 jQuery.post(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6879333/

相关文章:

JavaScript 和 HTML 自定义提示框

javascript - Symfony2 中的简单 AJAX 请求和响应

php - Jquery/Ajax 表单提交(enctype ="multipart/form-data")。为什么 'contentType:False' 在 PHP 中会导致 undefined index ?

php - 一个按钮有效,另一个按钮无效

javascript - 正在尝试 OO Javascript,但似乎继承变量并不像我习惯的那样有效?

javascript - HTML5 视频弹出窗口

html - 在 float (或内联 block )父级内水平均匀分布 div

javascript - 将类添加到滚动上的元素

javascript - 在 jQuery 中设置倒数计时器的样式

javascript - Yii2:将变量从 Controller 传递给javascript