【问题标题】:Add content to div with php dynamically使用php动态向div添加内容
【发布时间】:2013-05-15 01:43:47
【问题描述】:

所以我正在制作联系表格。提交表单后,我想向 Bootstrap 模式添加成功或错误消息。

这是提交表单并打开模式的按钮。

<input class="btn btn-info" type="submit" value="Submit" name="Submit" data-toggle="modal" href="#contactModal"/>

因此,当单击按钮时,它会提交表单并打开模式。有没有办法在脚本的successfailure 上动态向模态添加一串文本?

这是当前的 PHP 成功/失败操作

if ($success){
print "<meta http-equiv="refresh" content="0;URL=contactthanks.html">";
}
else{
  print "<meta http-equiv="refresh" content="0;URL=error.html">";
}

但我希望它向模式中添加内容,而不是添加重定向页面的&lt;meta&gt; 标记

这是模态代码

<div id="contactModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Thanks!</h3>
  </div>
  <div class="modal-body">
    <p>I'm pretty busy sometimes but I'll try my best to message you back <strong>ASAP</strong>!</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

那么我如何在不刷新页面或重定向的情况下将 print 放到模态框内的 &lt;div&gt; 内部?

我不知道任何 PHP 或 AJAX,而且我还没有开始接触 JS 和 jQuery(确切地说是两天)

【问题讨论】:

    标签: php javascript html twitter-bootstrap


    【解决方案1】:

    您不能提交表单并且没有刷新页面。您最可能想要做的是对您的 php 使用 AJAX 请求,这将返回成功/失败状态为 JSON,然后您将使用它有条件地使用 javascript 将内容添加到您的 div。

    您只需使用普通的&lt;input type="button" /&gt;onclick="someFunction",而不是表单,其中 someFunction 进行 AJAX 调用。

    你会想要使用 jQuery。

    你的 php 看起来像

    //do something with submitted values
    
    if ($success){
        echo json_encode(True);
    }
    else{
        echo json_encode(False);
    }
    

    AJAX 调用类似于

    $.ajax({
        type: "POST",
        url: "dosomething.php",
        data: { formValue1 = <get value using jquery>, etc... }
        dataType: "json",
        success: processData,
        error: function(){ alert("failed"); }
    });
    
    function processData(data)
    {
        if(data) {
            $("div#divid").html("what you want to add inside the div");
        }
    }
    

    【讨论】:

      猜你喜欢
      • 2014-02-26
      • 2021-12-29
      • 1970-01-01
      • 1970-01-01
      • 2019-06-29
      • 1970-01-01
      • 2014-02-23
      • 2012-08-01
      • 1970-01-01
      相关资源
      最近更新 更多