用表单数据刷新Ajax div [英] Refreshing ajax div with form data

问题描述

我在Google上搜索了很多，但是找不到解决此问题的方法:

I've googled a lot but could not find the solution to this problem:

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

I have a div in my main page that loads another page with the JQuery function '.load'. This works well. In this loaded page I have a search option. When the form is submitted I want this ajax div to reload and the submitted data to be send along so I can use that in this ajax div.

如何进行这样的构造?我听说.load使用GET并且我的表单发送POST.但是在提交后使用.post函数无效.

How can I make such a construction? I have heard .load uses GET and my form sends POST. But using the .post function after the submit does not work.

有人吗?

代码提供者:

在我的主页上只有一个div，没什么重要

In my main page I have just a div, nothing important

已加载的页面:

 <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});
        }
    });
});

推荐答案

类似的方法应该起作用:

Something like this should work:

$('#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);
        }
    });
});

您应该在帖子中发送数据.它不会自动发送表单数据.

You should send the data with the post. It won't automaticly send the form data along.

这篇关于用表单数据刷新Ajax div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！