使用 AJAX/Jquery 替换 div答案

【问题标题】：Using AJAX/Jquery to Replace div使用 AJAX/Jquery 替换 div
【发布时间】：2015-04-16 18:56:28
【问题描述】：

我试图在使用 data 消息的 AJAX 调用后设置空 div 的内容。我还将该函数连接到我的CHtml::submitButton，它应该在单击时调用该函数，但没有任何反应。有什么建议么？

<div id="myResult">        
</div>

JavaScript：

function successMessage(){
    $.ajax({
        type: "GET",
        data: "<div> Replace div with this contentf</div>",
        success: function(data){
            $('myResult').html(data);
        }
    })
}

PHP：

echo CHtml::beginForm(array('myForm'), 'get', array('form'));
echo '<div class="row form">';
echo '<div class="row buttons">';
echo CHtml::submitButton('Download Content', array('htmlOptions' => 'successMessage()'));
echo '</div>';
echo '</div>';

【问题讨论】：

假设：$('#myResult').html(data); 是否有可能您的数据被放置，然后表单提交完成并刷新页面......擦除myResult？
@rfornal 解决此问题的最佳方法是什么？
通常情况下，我看到的是没有绑定到
的正式提交按钮，那么这种类型的更改和表单的实际提交是 $.ajax ...
但是，我想您可以将数据结果作为 $SESSION 变量的一部分发送，以便您可以在刷新后使用它们。
你能扩展一下吗？我不完全明白。

标签： javascript php jquery ajax yii

【解决方案1】：

您的问题在于以下行：

$('myResult').html(data);

在这里，您尝试对未在 html 中使用的元素进行 jquery 选择（这只能通过 pollyfils 实现）。所以你必须通过它的 ID 选择元素：

$('#myResult').html(data);

我看到的另一件事是，您执行请求的 url 是什么？

<script>
    function successMessage(){
        $.ajax({
            type: "GET",
            url: "/please/add/an/url/",
            data: "<div> Replace div with this contentf</div>",
            success: function(data){
                $('myResult').html(data);
            }
        })
    }
</script>

【讨论】：

检查我对 ajax 请求中 url 的编辑。
嘿@taxicala，我将 URL 添加到我的项目中，但它仍然无法运行。难道是我的页面在点击我的按钮后刷新了？如果是这样，不知道如何解决这个问题。

【解决方案2】：

首先，当您使用这样的 onclick 功能时：

<input type="submit" onclick="successMessage()">

你应该改用这个：

<input type="submit" onclick="successMessage();result false;">

但是当您已经在使用 jquery 时，更好的方法是：

 $( document ).ready(function() {
        successMessage(){
           // your ajax goes here
        }

        $('#myResult').click(function(e){
          e.preventDefault();
          successMessage();
        });
     });

然后你需要修复你的successMessage函数。您会看到，您在那里设置的数据不是作为输出输出的数据。如果您需要 ajax，那么您可能希望从其他 url 上的某个 php 脚本中获取结果。那么你应该这样做：

function successMessage(){
        $.ajax({
            type: "GET",
            url : 'index2.php',
            dataType: "json",
            data: { mydata: '<div> Replace div with this content</div>'},
            success: function(data){             
                $('#myResult').html(data);
            }
        })
    }

然后你需要一个名为 index2.php 的 php 文件，它看起来像这样：

<?php
    echo json_encode($_GET['variable']);
?>

我不知道这是不是你的线：

echo CHtml::submitButton('Download Content', array('htmlOptions' => 'successMessage()'));

还要在表单后面加上</form> 标签来关闭它。

这应该适合你。我试过了，效果很好。

【讨论】：

我需要使用echo CHtml::submitButton('Download Content', array('htmlOptions' => 'successMessage()')); 你的代码不能用这个吗！？
试试 echo CHtml::submitButton('Download Content', array('htmlOptions' => 'successMessage();return false;'));它应该得到与相同的结果
是的，我实现了你的代码，但无法让它工作。真奇怪。
当您尝试检查提交按钮上的元素时，它看起来像这样吗？也尝试使用 console.log(data) 看看它是否给你一些结果。您是否创建了 index2.php 文件并将其放入同一目录中？
@YoungandFree 有什么更新吗？你找出你的问题还是它仍然存在？让我们知道，以便我们为您提供帮助。如果问题已经回答，则检查答案是否正确。

【解决方案3】：

试试这个：

 $.ajax({
             url: "test.html",
            type: "GET",
            data: "<div> Replace div with this contentf</div>",
            success: function(data){
                $('#myResult').html(data);
            }
        })

选择器 jQuery 在响应 ajax 中不正确。并在 ajax 中定义 Url。

【讨论】：

检查控制台发送ajax请求？