【问题标题】:Refreshing ajax div with form data使用表单数据刷新 ajax div
【发布时间】:2014-04-23 14:22:34
【问题描述】:

我用谷歌搜索了很多,但找不到解决这个问题的方法:

我的主页中有一个 div,它使用 JQuery 函数“.load”加载另一个页面。这很好用。在这个加载的页面中,我有一个搜索选项。提交表单时,我希望重新加载此 ajax div 并发送提交的数据,以便我可以在此 ajax div 中使用它。

我怎样才能做出这样的构造?我听说 .load 使用 GET 并且我的表单发送 POST。但是提交后使用.post函数不起作用。

有人吗?

到目前为止的代码:

在我的主页中,我只有一个 div,没什么重要的

加载的页面:

 <form id="formpie" name="zoek" action="" method="POST">
  <input type="hidden" name="zoek" value="zoek" id="zoek"/>
  <input type="text" name="tags" size="31" id="tags"/>
  <select name="categorie" id="categorie">
    <?php $imagelib = Imagelib::find_all();?>
        <option value="">alle</option>
    <?php  foreach($imagelib as $imagelib_id): ?>
        <option value="<?php echo $imagelib_id->id;?>"><?php echo $imagelib_id->naam; ?></option>
        <?php  endforeach;?> 
  </select>
  <input type="submit" name="zoek" id="search" value="Zoek" />
</form>

在我的 JS 文件中:

加载部分:

jQuery("#select_portal").bind('click', function () {
            $("#dialog-form").css("display", "block");
            $("#dialog-form").css("top", "100px");
            $("#dialog-form").css("left", "auto");
            $("#dialog-form").css("right", "auto");
            $("#dialog-form").css("backgroundColor", "white");
            document.getElementById('dialog-form').style.visibility = 'visible';
            $("#dialog-form").load("imglib.php");
        });
    }

点击提交按钮后:

$('#formpie').submit(function (e) {
    e.preventDefault();
    var tags = $("#tags").val();
    var categorie = $("#categorie").val();
    $.ajax({
        type: "POST",
        url: "imglib.php",
        async: false,
        dataType: 'html',
        success: function () {
            $('#dialog-form').load("imglib.php", {tags : tags, categorie : categorie});
        }
    });
});

【问题讨论】:

  • 你能发布你的代码吗?或者您可以发布一个示例 html 页面和您尝试使用的场景。
  • 我已经发布了代码的重要部分。基本上,#POST 数据将用于填充 div。这已经有效,只是重新加载不适用于数据。

标签: javascript php jquery ajax forms


【解决方案1】:

这样的事情应该可以工作:

$('#formpie').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: "imglib.php",
        async: false,
        data: $(this).serializeArray(),
        success: function(data) {
            $('#dialog-form').html(data);
        }
    });
});

您应该将数据与帖子一起发送。它不会自动发送表单数据。

【讨论】:

  • div 现在重新加载。但已填写的字段不会发送。它只是重新加载,就是这样。编辑 - 您的编辑修复了它(GET to POST)。非常感谢!你拯救了我的一天。
  • 在您提供代码后我更改了答案 :) 您应该使用 data 属性发送数据。
猜你喜欢
  • 1970-01-01
  • 2014-04-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-08
相关资源
最近更新 更多